/* Billy design tokens. Direction: Totaliser (see BRAND.md).
   Light is the default. Dark follows the system unless <html data-theme="light|dark"> pins it.
   .theme-night gives one element and its children the dark values in either theme.
   Every text colour below measures 7:1 or better on --glass, --housing and --window, in both themes.
   Derived colours are precomputed hex, not color-mix(), so they hold on old Android WebViews.
   Paper tokens (bills) are defined once and are deliberately NOT redefined for dark. */

:root {
  color-scheme: light;

  /* Grounds */
  --glass: #E4EAE2;            /* page ground: dispenser LCD glass by day. Sunlight fallback #EEF1EC */
  --housing: #F8FAF6;          /* surfaces: rows, sheets, slips, panels */
  --window: #DCE3D9;           /* the recessed readout window behind big figures. Never pressable */
  --hairline: #B5BAB5;         /* row rules, panel edges. Decorative only, never a control's only edge */

  /* Ink */
  --segment: #0C1410;          /* text, icons, figures, wordmark. 15.3:1 on glass */
  --etch: #38443D;             /* secondary text, labels, axes, input borders. 8.3:1 on glass, 7.8:1 on window */
  --ghost: 0.08;               /* opacity of unlit segments and ghost 8s */

  /* The one key */
  --led: #FFB000;              /* fill of the single primary action. Never text, never a large field, never on paper */
  --led-press: #E29D02;
  --on-led: #0C1410;           /* label on the key. 10.2:1 */
  --key-edge: #0C1410;         /* 2px edge so the key stands off glass (amber on glass is only 1.5:1) */

  /* Billy's hand: drafted by Billy, not yet confirmed by a person */
  --carbon: #3D2696;
  --carbon-soft: #E2E1EA;

  /* States. Warm means act, cool describes. Colour is never the only signal */
  --paid: #0A5223;             /* solid chip + tick */
  --due: #0B4A78;              /* outline chip + date */
  --overdue: #8C170C;          /* solid chip + "!" + days */

  /* Semantic aliases and soft fills (soft fills always carry --segment text) */
  --good: var(--paid);
  --good-soft: #DBE6DD;
  --warn: #634000;             /* "one thing to look at": text, outline and glyph only, never a fill */
  --warn-soft: #E6E4D8;
  --bad: var(--overdue);
  --bad-soft: #EBDFDA;
  --info: var(--due);
  --info-soft: #DCE5E7;
  --draft: var(--carbon);
  --draft-soft: var(--carbon-soft);

  /* Focus: flips with the theme so it shows on every surface */
  --focus: #0C1410;
  --focus-width: 3px;
  --focus-offset: 2px;

  /* Charts */
  --chart-ink: var(--segment);   /* the bar or line being talked about */
  --chart-rest: #76837B;         /* every other bar. 3.8:1 on housing */
  --chart-band: #E5E8E4;         /* the "usual band" (p10 to p90 for this weekday) */
  --chart-grid: var(--hairline);
  --chart-axis: var(--etch);

  /* The night tile: the app icon's ground, the splash, and the landing page's dispenser face.
     Fixed in both themes, like plates. Lit segments on it are --tile-ink (15.5:1) */
  --tile: #0C1410;
  --tile-ink: #EDEAE0;

  /* Number plates are physical objects: fixed colours in both themes */
  --plate-private: #FFFFFF;
  --plate-commercial: #FFD22E;
  --plate-ev: #0E6B37;
  --plate-ink: #111111;
  --plate-ev-ink: #FFFFFF;
  --plate-edge: #111111;

  /* Paper: bills and bill previews. Paper-white in BOTH themes. No Billy hue ever prints */
  --paper: #FFFFFF;
  --paper-ink: #141414;          /* 18.4:1 */
  --paper-muted: #555555;        /* 7.5:1 */
  --paper-rule: #C8C8C8;
  --paper-total-rule: #141414;   /* the double rule under Total due */
  --paper-omc-1: #333333;        /* outlet's OMC primary: header rule, table-header rule. Neutral until set */
  --paper-omc-2: #8A8A8A;        /* outlet's OMC accent bar. Text never sits on either OMC colour */
  --paper-qr: #000000;
  --paper-billy: #737373;        /* "Made with Billy" footer, 4.7:1 */

  /* Type families */
  --font-display: "Anek Devanagari", "sans-serif-condensed", "Roboto Condensed", "Arial Narrow", "Mukta", "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari", sans-serif;
  --font-utility: "Anek Devanagari", Roboto, "Mukta", "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari", sans-serif;
  --font-body: "Mukta", "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-bill: "Noto Sans Devanagari", "Noto Sans", Arial, sans-serif;

  /* Type settings */
  --stretch-display: 75%;        /* condensed only at 24px and above */
  --stretch-display-deva: 87.5%;
  --stretch-utility: 100%;
  --weight-hero: 800;
  --weight-display: 700;
  --weight-utility: 600;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-strong: 700;
  --figures: tabular-nums;       /* font-variant-numeric for every figure */
  --tracking-label: 0.06em;      /* uppercase Latin labels only, scoped to :lang(en) */

  /* Type scale: one 17px base for app and site */
  --text-label: 14px;
  --text-sm: 15px;
  --text-body: 17px;
  --text-lead: 20px;
  --text-title: 24px;
  --text-h2: 30px;
  --text-h1: 38px;
  --figure-md: 30px;
  --figure-lg: 44px;
  --figure-xl: 56px;
  --display-hero: clamp(44px, 9vw, 112px);
  --display-section: clamp(32px, 5vw, 56px);
  --lh-body: 1.5;
  --lh-body-deva: 1.6;
  --lh-display: 1.02;
  --lh-display-deva: 1.25;

  /* Space, size, shape */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --gutter: 16px;
  --page-max: 1200px;
  --target: 48px;
  --key-height: 52px;
  --row-height: 56px;
  --input-height: 56px;
  --radius-chip: 4px;
  --radius-key: 6px;
  --radius-card: 8px;
  --rule-width: 1px;
  --double-rule-gap: 2px;        /* two 1px rules, 2px apart: the "closed" mark under totals */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Motion (components switch it all off under prefers-reduced-motion) */
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 400ms;
  --dur-count: 900ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass: #090B0A;
    --housing: #141917;
    --window: #040505;
    --hairline: #434B47;
    --segment: #EDEAE0;
    --etch: #9BA79F;
    --ghost: 0.14;
    --led: #FFB81C;
    --led-press: #E6A519;
    --on-led: #0C1410;
    --key-edge: transparent;
    --carbon: #BCA9FF;
    --carbon-soft: #282A33;
    --paid: #6BD68E;
    --due: #74B9F2;
    --overdue: #FF8C7A;
    --good-soft: #1E3025;
    --warn: #E3AE52;
    --warn-soft: #2D2B1E;
    --bad-soft: #302723;
    --info-soft: #202C31;
    --focus: #EDEAE0;
    --chart-rest: #6E7A73;
    --chart-band: #252A27;
    color-scheme: dark;
  }
}

:root[data-theme="dark"],
.theme-night {               /* a night surface inside a light page (the landing's dispenser face) */
  --glass: #090B0A;
  --housing: #141917;
  --window: #040505;
  --hairline: #434B47;
  --segment: #EDEAE0;
  --etch: #9BA79F;
  --ghost: 0.14;
  --led: #FFB81C;
  --led-press: #E6A519;
  --on-led: #0C1410;
  --key-edge: transparent;
  --carbon: #BCA9FF;
  --carbon-soft: #282A33;
  --paid: #6BD68E;
  --due: #74B9F2;
  --overdue: #FF8C7A;
  --good-soft: #1E3025;
  --warn: #E3AE52;
  --warn-soft: #2D2B1E;
  --bad-soft: #302723;
  --info-soft: #202C31;
  --focus: #EDEAE0;
  --chart-rest: #6E7A73;
  --chart-band: #252A27;
  color-scheme: dark;
}
/* Aliases resolve where they are declared, so a night surface inside a light page declares them again. */
.theme-night {
  --good: var(--paid); --bad: var(--overdue); --info: var(--due); --draft: var(--carbon); --draft-soft: var(--carbon-soft);
  --chart-ink: var(--segment); --chart-grid: var(--hairline); --chart-axis: var(--etch);
}