/* ============================================================================
   COUNTRYSIDE CANNABIS CO. — Expense Application
   Layer 1 of 3 · tokens.css

   This is the ONLY file in the codebase permitted to contain a raw hex or
   rgba() value. Components (css/components.css) and every screen built after
   this one read semantic tokens exclusively.

   Structure
     1. Brand constants ....... official Brand Guide values, verbatim
     2. Type ................. families, scale, weights, tracking
     3. Space / radius / motion
     4. Semantic tokens — LIGHT
     5. Semantic tokens — DARK
     6. No-JS fallback (prefers-color-scheme)

   Theming contract: tokens are bound to [data-theme="light"|"dark"], not to
   :root alone, so any subtree can be scoped to the opposite theme (used by
   the side-by-side proof panels and by the contrast audit probes).
   ========================================================================= */

/* --- 1. BRAND CONSTANTS -------------------------------------------------- */
/* Countryside Cannabis Co. Brand Guide Booklet. Never approximate these. */
:root {
  --eerie-black:    #1B1B1E;   /* Primary   */
  --gun-powder:     #373F51;   /* Secondary */
  --smoke:          #A9A9A9;   /* Neutral   */
  --white-smoke:    #F6F5FC;   /* Background */
  --golden-tobacco: #E2BE66;   /* Accent    */
  --light-gold:     #EACB7C;   /* interactive tint — dark theme only */
  --dark-surface:   #24252B;   /* lifted panel — dark theme only */

  /* Status base hues. Derived from the brand palette, not a framework set.
     Each has a `-mark` (fill / border / icon) and an `-ink` (text) tier;
     the ink tier is the same hue and saturation at the lightness required to
     clear 7:1 — see rule 5 in DESIGN.md. Audited values in the app's
     Contrast audit section. */
  --red-mark-light:     #A63D40;   /* 5.76:1 on --bg  — fill/border/icon only */
  --red-ink-light:      #782C2E;   /* 7.00:1 worst case — text tier          */
  --red-mark-dark:      #E88E90;
  --red-ink-dark:       #F1BABB;   /* 7.09:1 worst case (its own wash) */
  --green-mark-light:   #4F7A5B;   /* 4.54:1 on --bg  — fill/border/icon only */
  --green-ink-light:    #324D3A;   /* 7.03:1 worst case */
  --green-mark-dark:    #8FBF9E;
  --green-ink-dark:     #B1D3BC;   /* 7.09:1 worst case */
  --grey-ink-dark:      #C9C9C9;   /* Smoke lifted to 7.11:1 for status text */
  --grey-muted-dark:    #8C8C8C;   /* Smoke darkened to 4.54:1 on --surface  */
}

/* --- 2. TYPE ------------------------------------------------------------- */
:root {
  --font-display: 'Tenor Sans', Georgia, 'Times New Roman', serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Scale — 12 / 14 / 16 / 18 / 22 / 28 / 36 / 48. No other sizes exist.
     14px is the floor for body and table text; 12px is caption/legal only. */
  --fs-caption:  12px;
  --fs-sm:       14px;
  --fs-base:     16px;
  --fs-lg:       18px;
  --fs-h4:       22px;
  --fs-h3:       28px;
  --fs-h2:       36px;
  --fs-h1:       48px;
  --fs-eyebrow:  0.74rem;

  --lh-display:  1.1;
  --lh-body:     1.55;
  --lh-tight:    1.35;

  --tracking-display: -0.005em;
  --tracking-eyebrow:  0.16em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
}

/* --- 3. SPACE / RADIUS / ELEVATION / MOTION ------------------------------ */
:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12:48px;
  --space-16:64px;

  --container: 1180px;

  --radius-input: 4px;
  --radius-card:  8px;
  --radius-modal: 12px;

  /* Touch: receipt capture is a one-handed phone flow. */
  --hit-min: 44px;

  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);

  --breakpoint-table-stack: 768px;
}

/* --- 4. SEMANTIC TOKENS · LIGHT ----------------------------------------- */
:root,
[data-theme='light'] {
  color-scheme: light;

  --bg:           var(--white-smoke);
  --surface:      #FFFFFF;
  --surface-sunk: #F0EFF7;
  --surface-inverse: var(--eerie-black);

  --fg:           var(--eerie-black);      /* 15.05:1 worst — money + validation */
  --fg-secondary: var(--gun-powder);       /*  9.23:1 worst — NOT Smoke          */
  --fg-muted:     #5A6273;                 /*  5.36:1 worst — darkened Gun Powder */
  --fg-on-inverse: var(--white-smoke);

  --border:         rgba(27, 27, 30, 0.12);  /* hairlines, dividers, zebra edges */
  --border-control: rgba(27, 27, 30, 0.48);  /* 3.03:1 — form-control boundaries
                                                (WCAG 1.4.11); same ink, alpha only */
  --border-strong:  var(--eerie-black);

  --accent:     var(--golden-tobacco);
  --accent-fg:  var(--eerie-black);          /* 9.65:1 — text ON accent, never white */
  --accent-hover: #D8B054;                   /* accent darkened for hover fill */
  --accent-wash: color-mix(in srgb, var(--golden-tobacco) 12%, var(--surface));

  --focus-ring: var(--gun-powder);           /* 9.73:1 against --bg */

  /* Status — BLOCK / FLAG / INFO / SUCCESS / NEUTRAL.
     `-mark` = fill, border, icon.  `-ink` = text (>=7:1).  `-wash` = tinted panel. */
  --status-block-mark:  var(--red-mark-light);
  --status-block-ink:   var(--red-ink-light);
  --status-block-wash:  color-mix(in srgb, var(--red-mark-light) 12%, var(--surface));
  --status-block-on:    var(--white-smoke);   /* 5.76:1 on the block fill */

  --status-flag-mark:   var(--golden-tobacco);
  --status-flag-ink:    var(--eerie-black);
  --status-flag-wash:   color-mix(in srgb, var(--golden-tobacco) 12%, var(--surface));

  --status-info-mark:   var(--gun-powder);
  --status-info-ink:    var(--gun-powder);
  --status-info-wash:   color-mix(in srgb, var(--gun-powder) 12%, var(--surface));

  --status-success-mark: var(--green-mark-light);
  --status-success-ink:  var(--green-ink-light);
  --status-success-wash: color-mix(in srgb, var(--green-mark-light) 12%, var(--surface));

  --status-neutral-mark: var(--smoke);
  --status-neutral-ink:  var(--gun-powder);  /* Smoke is 2.17:1 — never text here */
  --status-neutral-wash: color-mix(in srgb, var(--smoke) 12%, var(--surface));

  --skeleton-base: color-mix(in srgb, var(--eerie-black) 7%, var(--surface));
  --skeleton-sheen: color-mix(in srgb, var(--eerie-black) 3%, var(--surface));

  --shadow-card:  0 1px 2px rgba(27, 27, 30, 0.04);
  --shadow-lift:  0 1px 2px rgba(27, 27, 30, 0.05), 0 10px 28px -14px rgba(27, 27, 30, 0.16);
  --shadow-modal: 0 24px 64px -20px rgba(27, 27, 30, 0.30);
  --scrim: rgba(27, 27, 30, 0.44);
}

/* --- 5. SEMANTIC TOKENS · DARK ------------------------------------------ */
/* Same specificity as the light group; source order decides. Both themes are
   first-class — elevation reads through --surface, not through heavy shadow. */
[data-theme='dark'] {
  color-scheme: dark;

  --bg:           var(--eerie-black);
  --surface:      var(--dark-surface);
  --surface-sunk: #141416;
  --surface-inverse: var(--white-smoke);

  --fg:           var(--white-smoke);   /* 14.10:1 worst — money + validation */
  --fg-secondary: var(--smoke);         /*  6.50:1 on --surface — body tier    */
  --fg-muted:     var(--grey-muted-dark);
  --fg-on-inverse: var(--eerie-black);

  --border:         rgba(246, 245, 252, 0.12);
  --border-control: rgba(246, 245, 252, 0.35);  /* 3.01:1 — form-control boundary */
  --border-strong:  var(--white-smoke);

  --accent:     var(--light-gold);
  --accent-fg:  var(--eerie-black);      /* 10.91:1 */
  --accent-hover: #F2D896;
  --accent-wash: color-mix(in srgb, var(--light-gold) 14%, var(--surface));

  --focus-ring: var(--golden-tobacco);   /* 8.58:1 against --surface */

  --status-block-mark:  var(--red-mark-dark);
  --status-block-ink:   var(--red-ink-dark);
  --status-block-wash:  color-mix(in srgb, var(--red-mark-dark) 14%, var(--surface));
  --status-block-on:    var(--eerie-black);   /* 7.12:1 on the block fill */

  --status-flag-mark:   var(--light-gold);
  --status-flag-ink:    var(--eerie-black);
  --status-flag-wash:   color-mix(in srgb, var(--light-gold) 14%, var(--surface));

  --status-info-mark:   var(--smoke);
  --status-info-ink:    var(--grey-ink-dark);
  --status-info-wash:   color-mix(in srgb, var(--smoke) 14%, var(--surface));

  --status-success-mark: var(--green-mark-dark);
  --status-success-ink:  var(--green-ink-dark);
  --status-success-wash: color-mix(in srgb, var(--green-mark-dark) 14%, var(--surface));

  --status-neutral-mark: var(--smoke);
  --status-neutral-ink:  var(--grey-ink-dark);
  --status-neutral-wash: color-mix(in srgb, var(--smoke) 14%, var(--surface));

  --skeleton-base: color-mix(in srgb, var(--white-smoke) 8%, var(--surface));
  --skeleton-sheen: color-mix(in srgb, var(--white-smoke) 14%, var(--surface));

  /* Gun Powder is 1.63:1 on Eerie Black — surface and border duty only. */
  --shadow-card:  0 0 0 1px rgba(246, 245, 252, 0.04);
  --shadow-lift:  0 0 0 1px rgba(246, 245, 252, 0.06), 0 12px 32px -18px rgba(0, 0, 0, 0.72);
  --shadow-modal: 0 28px 72px -24px rgba(0, 0, 0, 0.82);
  --scrim: rgba(20, 20, 22, 0.66);
}

/* --- 6. NO-JS FALLBACK -------------------------------------------------- */
/* theme.js stamps a concrete data-theme before first paint. If scripting is
   off, honour the OS preference so the page is still legible. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: var(--eerie-black);
    --surface: var(--dark-surface);
    --surface-sunk: #141416;
    --surface-inverse: var(--white-smoke);
    --fg: var(--white-smoke);
    --fg-secondary: var(--smoke);
    --fg-muted: var(--grey-muted-dark);
    --fg-on-inverse: var(--eerie-black);
    --border: rgba(246, 245, 252, 0.12);
    --border-control: rgba(246, 245, 252, 0.35);
    --border-strong: var(--white-smoke);
    --accent: var(--light-gold);
    --accent-hover: #F2D896;
    --accent-wash: color-mix(in srgb, var(--light-gold) 14%, var(--surface));
    --focus-ring: var(--golden-tobacco);
    --status-block-mark: var(--red-mark-dark);
    --status-block-ink: var(--red-ink-dark);
    --status-block-wash: color-mix(in srgb, var(--red-mark-dark) 14%, var(--surface));
    --status-block-on: var(--eerie-black);
    --status-flag-mark: var(--light-gold);
    --status-info-mark: var(--smoke);
    --status-info-ink: var(--grey-ink-dark);
    --status-info-wash: color-mix(in srgb, var(--smoke) 14%, var(--surface));
    --status-success-mark: var(--green-mark-dark);
    --status-success-ink: var(--green-ink-dark);
    --status-success-wash: color-mix(in srgb, var(--green-mark-dark) 14%, var(--surface));
    --status-neutral-ink: var(--grey-ink-dark);
    --status-neutral-wash: color-mix(in srgb, var(--smoke) 14%, var(--surface));
    --skeleton-base: color-mix(in srgb, var(--white-smoke) 8%, var(--surface));
    --skeleton-sheen: color-mix(in srgb, var(--white-smoke) 14%, var(--surface));
    --shadow-card: 0 0 0 1px rgba(246, 245, 252, 0.04);
    --shadow-lift: 0 0 0 1px rgba(246, 245, 252, 0.06), 0 12px 32px -18px rgba(0, 0, 0, 0.72);
    --shadow-modal: 0 28px 72px -24px rgba(0, 0, 0, 0.82);
    --scrim: rgba(20, 20, 22, 0.66);
  }
}