/**
 * ECOZA HILL RETREAT — DESIGN TOKENS
 *
 * GENERATED FILE. Do not edit.
 * Source: src/design-system/*.ts   Regenerate: npm run tokens
 *
 * Governing document: docs/DESIGN-DOCTRINE.md
 * Two registers: .desk (working surface) and .lobby (surfaces that leave the building).
 *
 * Font lock status: provisional — awaiting Windows 13.5px table test
 *
 * Deleted from v1 and deliberately not re-added:
 *   - primary 300/500/900/950: used 0 times; brand needs 7 steps, not 11
 *   - secondary (terracotta) full ramp: used twice, both decorative. Kept as a single accent in dataviz.cat[3]. A second brand ramp is how a palette loses discipline.
 *   - neutral ramp unchanged: genuinely all used — this is what a used ramp looks like
 *   - shadows sh-3 / sh-4 / sh-5: Rule 1 — elevation budget. Two shadows is enough: overlay and floating.
 *   - radius xs/sm/md/lg/xl/2xl (6 steps): Rule — two registers need two radii, plus one dense and one pill. Four total.
 *   - success reusing p-600: D-007 — made brand, confirmed and paid indistinguishable
 */

:root {
  /* ---- Brand — Hill Green. Rule 4 (90/8/2): active nav, ONE primary action,
     focus ring, logo. Never status, never decoration, never charts. ---- */
  --brand-50: #f5faf6;
  --brand-100: #e6f4ea;
  --brand-200: #cbe9d4;
  --brand-400: #80c393;
  --brand-600: #437f54;
  --brand-700: #386846;
  --brand-800: #2a4e34;

  /* ---- Neutral — Stone. Carries 90% of every Desk screen. ---- */
  --n-50: #f7f8f7;
  --n-100: #eceeed;
  --n-200: #d8dcd9;
  --n-300: #bec3bf;
  --n-400: #9ea6a0;
  --n-500: #7a857d;
  --n-600: #616b64;
  --n-700: #4d544f;
  --n-800: #393f3b;
  --n-900: #282c29;
  --n-950: #181b19;

  /* ---- Status — D-007: deliberately NOT brand green. Every state also carries
     a shape (dot/ring/bar/slash) so it survives greyscale and the printed PDF. ---- */
  --st-teal-50: #eef6f7;
  --st-teal-200: #b3d6da;
  --st-teal-500: #2f7f88;
  --st-teal-600: #2f6f75;
  --st-teal-700: #255a5f;
  --st-teal-900: #16383b;
  --st-emerald-50: #ecf8f1;
  --st-emerald-200: #a8dcc0;
  --st-emerald-500: #1f9159;
  --st-emerald-600: #1f7a4d;
  --st-emerald-700: #18603d;
  --st-emerald-900: #0f3b26;
  --st-amber-50: #fcf7ed;
  --st-amber-200: #f2d6a6;
  --st-amber-500: #d99417;
  --st-amber-600: #c18215;
  --st-amber-700: #936515;
  --st-amber-900: #493512;
  --st-red-50: #fcefee;
  --st-red-200: #edb0ab;
  --st-red-500: #d63729;
  --st-red-600: #ae3429;
  --st-red-700: #852b23;
  --st-red-900: #431d19;
  --st-blue-50: #eff6fa;
  --st-blue-200: #b0d0e8;
  --st-blue-500: #3989c6;
  --st-blue-600: #3073a6;
  --st-blue-700: #285a80;
  --st-blue-900: #1b3041;

  /* ---- Logo-exact tones. Illustration and the hill-contour ornament ONLY. ---- */
  --logo-pine: #2d5c3d;
  --logo-mid: #4a875b;
  --logo-leaf: #78ac5e;
  --logo-paper: #f2f0e9;

  /* ---- Data visualisation ---- */
  --viz-1: #437f54;
  --viz-2: #2f6f75;
  --viz-3: #c18215;
  --viz-4: #a1562b;
  --viz-5: #3073a6;
  --viz-6: #7a857d;
  --viz-seq-1: #f5faf6;
  --viz-seq-2: #cbe9d4;
  --viz-seq-3: #80c393;
  --viz-seq-4: #437f54;
  --viz-seq-5: #2a4e34;
  --viz-div-1: #ae3429;
  --viz-div-2: #f2d6a6;
  --viz-div-3: #1f7a4d;

  /* ---- Print — frozen light values. A printed page is ink on paper, not a theme. ---- */
  --print-ink: #16241c;
  --print-ink-dim: #525f56;
  --print-ink-faint: #6b7871;
  --print-paper: #faf7ef;
  --print-rule: #d8dcd9;
  --print-rule-strong: #2d5c3d;
  --print-wash: #fcf7ed;

  /* ---- Surface + text roles (light) ---- */
  --bg: #f6f6f3;
  --surface: #ffffff;
  --surface-sunken: #f1f1ec;
  --surface-raised: #ffffff;
  --paper: #faf7ef;
  --border: rgba(30,42,32,.11);
  --border-strong: rgba(30,42,32,.22);
  --text: #16241c;
  --text-dim: #525f56;
  --text-faint: #6b7871;
  --accent: #437f54;
  --accent-wash: rgba(67,127,84,.10);
  --on-accent: #ffffff;
  --accent-hover: #386846;

  /* ---- Type ---- */
  --font-ui: 'Archivo Variable', 'Archivo', 'Hind Siliguri', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-lobby: 'Instrument Serif', Georgia, 'Times New Roman', serif;   /* Lobby register only, never below 22px */
  --font-bn: 'Hind Siliguri', 'Noto Sans Bengali', sans-serif;
  --t-lobby-xl: 400 44px/1.05 var(--font-lobby);  /* lobby · Login hero, invoice title */
  --t-lobby-xl-track: -0.01em;
  --t-lobby-lg: 400 32px/1.12 var(--font-lobby);  /* lobby · Day-sheet header, confirmation panel */
  --t-lobby-lg-track: -0.01em;
  --t-lobby-md: 400 24px/1.2 var(--font-lobby);  /* lobby · Document section head, empty-state headline */
  --t-lobby-md-track: 0;
  --t-head-lg: 600 20px/1.3 var(--font-ui);  /* desk · Page H1, drawer title */
  --t-head-lg-track: -0.01em;
  --t-head-md: 600 16px/1.35 var(--font-ui);  /* desk · Card title, modal title, section head */
  --t-head-md-track: -0.005em;
  --t-head-sm: 600 14px/1.4 var(--font-ui);  /* desk · Field-group header */
  --t-head-sm-track: 0;
  --t-body-lg: 400 15px/1.55 var(--font-ui);  /* both · Modal body, long-form */
  --t-body-lg-track: 0;
  --t-body: 400 13.5px/1.45 var(--font-ui);  /* desk · DEFAULT — table cells, forms, everything */
  --t-body-track: 0;
  --t-body-sm: 400 12.5px/1.45 var(--font-ui);  /* desk · Helper text, meta, timestamps */
  --t-body-sm-track: 0;
  --t-label: 600 12.5px/1.3 var(--font-ui);  /* desk · Form labels */
  --t-label-track: 0;
  --t-caption: 500 11.5px/1.4 var(--font-ui);  /* desk · Footnotes, attribution lines */
  --t-caption-track: 0.005em;
  --t-overline: 700 11px/1.2 var(--font-ui);  /* desk · Table headers, nav group labels */
  --t-overline-track: 0.08em;
  --t-num-hero: 700 30px/1.05 var(--font-ui);  /* both · The Due figure in the money strip; day-sheet counts */
  --t-num-hero-track: -0.015em;
  --t-num-lg: 600 20px/1.15 var(--font-ui);  /* both · KPI values, invoice total */
  --t-num-lg-track: -0.01em;
  --t-num: 500 13.5px/1.4 var(--font-ui);  /* desk · Money in tables */
  --t-num-track: 0;
  --t-ref: 600 12.5px/1.3 var(--font-ui);  /* both · EC-2931, INV-2026-0001 */
  --t-ref-track: 0.04em;

  /* ---- Space. Rule 3: spacing does the grouping, not boxes. ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-in-group: var(--sp-2);
  --sp-between-groups: var(--sp-6);
  --sp-between-sections: var(--sp-12);
  --sp-between-regions: var(--sp-16);

  /* ---- Radius — four values, two of them register defaults ---- */
  --r-dense: 2px;
  --r-desk: 6px;
  --r-lobby: 20px;
  --r-pill: 999px;

  /* ---- Elevation — Rule 1: ONLY things that float get a shadow ---- */
  --sh-raised: 0 2px 8px rgba(20,30,20,.10), 0 1px 2px rgba(20,30,20,.05);
  --sh-floating: 0 16px 40px rgba(20,30,20,.16), 0 4px 12px rgba(20,30,20,.08);

  /* ---- Desk metrics — the numbers that make a dense tool dense ---- */
  --desk-row-height: 36px;
  --desk-row-height-compact: 30px;
  --desk-control-height: 32px;
  --desk-control-height-sm: 26px;
  --desk-icon-in-control: 16px;
  --desk-icon-in-nav: 18px;
  --desk-hairline: 1px;
  --desk-focus-ring: 2px;
  --desk-focus-offset: 2px;
  --desk-sidebar-width: 248px;
  --desk-sidebar-rail-width: 72px;
  --desk-topbar-height: 60px;
  --desk-content-max: 1440px;
  --desk-form-max: 960px;

  /* ---- Z ladder ---- */
  --z-base: 0;
  --z-sticky: 100;
  --z-dropdown: 400;
  --z-drawer: 800;
  --z-modal: 1000;
  --z-toast: 1200;
  --z-tooltip: 1400;

  /* ---- Motion — four animations, and that is the whole list ---- */
  --dur-instant: 0ms;
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;
  --dur-shimmer: 1400ms;
  --ease-standard: cubic-bezier(.2,0,.2,1);
  --ease-enter: cubic-bezier(0,0,.2,1);
  --ease-exit: cubic-bezier(.4,0,1,1);
  --skeleton-delay: 400ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d120e;
    --surface: #111813;
    --surface-sunken: #0a0f0b;
    --surface-raised: #1b271f;
    --paper: #171d17;
    --border: rgba(200,220,205,.10);
    --border-strong: rgba(200,220,205,.20);
    --text: #eaf1ec;
    --text-dim: #a3b9ab;
    --text-faint: #82968a;
    --accent: #80c393;
    --accent-wash: rgba(128,195,147,.12);
    --on-accent: #0d120e;
    --accent-hover: #cbe9d4;
    --sh-raised: 0 2px 8px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3);
    --sh-floating: 0 16px 40px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.4);
    --st-teal-50: #12262a;
    --st-emerald-50: #0f2419;
    --st-amber-50: #2a2011;
    --st-red-50: #2b1513;
    --st-blue-50: #12212c;
    --st-teal-700: #8fc4ca;
    --st-emerald-700: #7fc9a2;
    --st-amber-700: #e0b768;
    --st-red-700: #e59a92;
    --st-blue-700: #93bedd;
  }
}
[data-theme="dark"] {
  --bg: #0d120e;
  --surface: #111813;
  --surface-sunken: #0a0f0b;
  --surface-raised: #1b271f;
  --paper: #171d17;
  --border: rgba(200,220,205,.10);
  --border-strong: rgba(200,220,205,.20);
  --text: #eaf1ec;
  --text-dim: #a3b9ab;
  --text-faint: #82968a;
  --accent: #80c393;
  --accent-wash: rgba(128,195,147,.12);
  --on-accent: #0d120e;
  --accent-hover: #cbe9d4;
  --sh-raised: 0 2px 8px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3);
  --sh-floating: 0 16px 40px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.4);
  --st-teal-50: #12262a;
  --st-emerald-50: #0f2419;
  --st-amber-50: #2a2011;
  --st-red-50: #2b1513;
  --st-blue-50: #12212c;
  --st-teal-700: #8fc4ca;
  --st-emerald-700: #7fc9a2;
  --st-amber-700: #e0b768;
  --st-red-700: #e59a92;
  --st-blue-700: #93bedd;
}

/* ========================================================================
   BASE
   Nothing here is a component. Components live in components.css.
   ======================================================================== */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font: var(--t-body);
  letter-spacing: var(--t-body-track);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* Bengali needs +1px to match apparent x-height. */
[lang="bn"] { font-family: var(--font-bn); font-size: 1.08em; }

/* Rule 6: money, dates, counts and refs are ALWAYS tabular. */
.num, .money, td.num, th.num { font-variant-numeric: tabular-nums slashed-zero; text-align: right; }
.ref { text-transform: uppercase; letter-spacing: var(--t-ref-track); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.money-sym { font-size: .85em; color: var(--text-dim); }

/* Focus is a RING, not a glow. 2px solid, 2px offset. Never removed. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--desk-focus-ring) solid var(--accent);
  outline-offset: var(--desk-focus-offset);
}

/* Registers. Pick one before writing markup. */
.lobby { background: var(--paper); --r-register: var(--r-lobby); }
.desk  { background: var(--surface); --r-register: var(--r-desk); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ========================================================================
   TYPOGRAPHY RULES (enforced in review, restated here for whoever opens this file)
   1. Money, dates, counts and refs are ALWAYS tabular-nums + slashed-zero.
   2. The Lobby family (--font-lobby) never appears on a Desk screen, and never below 22px.
   3. Max two families visible in any viewport.
   4. Prose caps at 66ch; card text at 40ch; table cells truncate with a tooltip instead.
   5. Never below 12.5px. Touch-target labels never below 13.5px.
   6. Bengali gets lang="bn" and +1px — it needs it to match apparent x-height.
   7. Uppercase only at `overline` and `ref`, always with tracking.
   8. Fluid clamp() on lobby-* only. Desk sizes are fixed so tables do not reflow.
   ======================================================================== */

/* Fonts: https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=Hind+Siliguri:wght@400;500;600;700&display=swap */