/* ==========================================================================
   Alpha Digital — design tokens
   tokens.css v1 (2026-08-11)

   Single source of truth for the platform's design language.
   Light theme only for now. Tokens are split into:

     1. Primitives  — raw brand + neutral values. Never used directly in
                      component CSS; reference the semantic tier instead.
     2. Semantic    — the names components consume. A future dark theme
                      overrides THESE under [data-theme="dark"] (or a
                      prefers-color-scheme block) without any renaming.

   Hard rule, platform-wide: every numeric/financial display uses
   font-variant-numeric: tabular-nums (see .tnum utility at the bottom).
   ========================================================================== */

/* --- Typography: Inter, self-hosted (variable, latin subset) ------------- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ========================================================================
     1. PRIMITIVES
     ======================================================================== */

  /* Brand palette (extracted from the Alpha Medical logo) */
  --brand-green-deep:   #004800; /* ink: headers, nav, shell chrome */
  --brand-green-alpha:  #0c6e38; /* primary: buttons, links, active states */
  --brand-green-bright: #139647; /* POSITIVE ONLY: favourable deltas, success */
  --brand-charcoal:     #4c4c4d; /* secondary text */
  --brand-black:        #000000; /* primary text */

  /* Derived greens (hover/pressed/tints of the primary) */
  --green-alpha-hover:   #0a5e30;
  --green-alpha-pressed: #084f28;
  --green-tint:          #e9f2ec; /* selected nav item, active chip, table hover */
  --green-tint-border:   #bcd8c8;

  /* Semantic additions — not brand colours; a finance platform needs them.
     Danger tuned from #b3261e (slightly deeper + desaturated so it sits
     comfortably next to the muted greens); warning tuned from #9a6700. */
  --red-danger:      #a92d24;
  --red-danger-ink:  #8a1f17;
  --red-tint:        #faedeb;
  --red-tint-border: #eccfcb;

  --amber-warning:      #9a6700;
  --amber-warning-ink:  #6b4a00;
  --amber-tint:         #fbf3df;
  --amber-tint-border:  #ead9b0;

  --green-positive-tint: #e9f7ee; /* surface behind favourable figures */

  /* Neutrals (paper carries a whisper of green so white cards lift off it) */
  --neutral-paper:    #f6f7f6;
  --neutral-surface:  #ffffff;
  --neutral-sunken:   #eef0ee; /* wells, zebra rows, input backgrounds */
  --neutral-hairline: #e2e5e2; /* default borders, dividers */
  --neutral-border:   #c7ccc8; /* interactive/emphasised borders */
  --neutral-muted:    #6e7370; /* tertiary text, captions, placeholders */
  --neutral-disabled: #9ea19f;

  /* ========================================================================
     2. SEMANTIC TOKENS — what components actually reference.
     Dark theme later = override this block only, same names.
     ======================================================================== */

  color-scheme: light;

  /* Surfaces */
  --color-bg:            var(--neutral-paper);
  --color-surface:       var(--neutral-surface);
  --color-surface-sunken: var(--neutral-sunken);
  --color-chrome:        var(--brand-green-deep);  /* top bar / shell chrome */
  --color-chrome-text:   #ffffff;
  --color-chrome-muted:  rgba(255, 255, 255, 0.72);

  /* Text */
  --color-text:           var(--brand-black);
  --color-text-secondary: var(--brand-charcoal);
  --color-text-muted:     var(--neutral-muted);
  --color-text-disabled:  var(--neutral-disabled);
  --color-heading:        var(--brand-green-deep);

  /* Borders */
  --color-hairline: var(--neutral-hairline);
  --color-border:   var(--neutral-border);

  /* Interactive */
  --color-primary:         var(--brand-green-alpha);
  --color-primary-hover:   var(--green-alpha-hover);
  --color-primary-pressed: var(--green-alpha-pressed);
  --color-primary-tint:    var(--green-tint);
  --color-primary-tint-border: var(--green-tint-border);
  --color-link:            var(--brand-green-alpha);
  --color-focus-ring:      rgba(12, 110, 56, 0.35);

  /* Status — positive is ONLY for favourable movement / success */
  --color-positive:      var(--brand-green-bright);
  --color-positive-tint: var(--green-positive-tint);
  --color-danger:        var(--red-danger);
  --color-danger-ink:    var(--red-danger-ink);
  --color-danger-tint:   var(--red-tint);
  --color-danger-tint-border: var(--red-tint-border);
  --color-warning:       var(--amber-warning);
  --color-warning-ink:   var(--amber-warning-ink);
  --color-warning-tint:  var(--amber-tint);
  --color-warning-tint-border: var(--amber-tint-border);

  /* ========================================================================
     Typography
     ======================================================================== */

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium:  500;

  --text-xs:   0.75rem;    /* 12px — captions, table meta */
  --text-sm:   0.8125rem;  /* 13px — dense table body, labels */
  --text-base: 0.875rem;   /* 14px — default UI text */
  --text-md:   1rem;       /* 16px — emphasised body */
  --text-lg:   1.125rem;   /* 18px — card titles */
  --text-xl:   1.375rem;   /* 22px — page titles */
  --text-2xl:  1.75rem;    /* 28px — headline figures */

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --tracking-caps:  0.06em; /* uppercase labels / nav sections */

  /* ========================================================================
     Spacing (4px base) · Radii · Elevation
     ======================================================================== */

  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  --radius-sm:   4px;   /* inputs, chips */
  --radius-md:   8px;   /* buttons, cards */
  --radius-lg:   12px;  /* modals, large panels */
  --radius-full: 999px; /* pills, avatars */

  --shadow-card:  0 1px 2px rgba(0, 24, 0, 0.06), 0 1px 3px rgba(0, 24, 0, 0.1);
  --shadow-raised: 0 4px 12px rgba(0, 24, 0, 0.12);

  /* Shell dimensions (v2 shell: top bar only, no sidebar) */
  --shell-topbar-height: 56px;
}

/* --- Base application of the language ------------------------------------ */

html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* HARD RULE (platform-wide): all numeric/financial displays are tabular.
   Apply .tnum (or the data attribute) to every element that renders money,
   quantities, percentages, dates-as-figures, or anything columnar. */
.tnum,
[data-numeric] {
  font-variant-numeric: tabular-nums lining-nums;
}