/* ============================================================
   Almanac theme tokens — Decision Intelligence Platform MVP
   Per design vision §3 + §10. Light mode is the default; dark mode
   activates via `prefers-color-scheme: dark` AND can be forced
   by [data-theme="dark"] for the Storybook preview toggle.

   TWO-AXIS THEME SYSTEM (design update 2026-06-21):
     {palette family} × {light | dark}
     - data-theme  = light | dark   (mode — existing toggle + prefers-color-scheme)
     - data-palette = almanac | manufacturing | agriculture |
                      retail | finance | powerbi   (family)
   Almanac is the DEFAULT family: the unqualified :root below is
   Almanac, so an unset (or "almanac") data-palette renders Almanac.
   Each other family is a token file imported here; it redefines the
   SAME token names under :root[data-palette="<family>"] (light) and
   [data-palette="<family>"][data-theme="dark"] (+ prefers-color-scheme
   sibling) for dark, so every screen works unchanged. Components
   never hardcode hex (Stylelint enforces) — adding a family = adding
   a token file, not touching components.
   ============================================================ */

@import "./tokens.midnight.css";
@import "./tokens.manufacturing.css";
@import "./tokens.agriculture.css";
@import "./tokens.retail.css";
@import "./tokens.finance.css";
@import "./tokens.powerbi.css";

:root {
  /* surfaces */
  --surface-canvas:        #F6F2EA;
  --surface-raised:        #FFFFFF;
  --surface-sunk:          #EDE7DA;
  --surface-overlay:       #1B1A18CC;

  /* chrome — BOLD, distinct surface for top bar + drawer (doc 25 §11.5).
     Almanac = warm espresso/ink. Deep color in light mode so the warm-ivory
     canvas pops (PowerBI/Aikido feel). WCAG AA on every on-chrome pair. */
  --surface-chrome:        #2E2118;   /* espresso chrome — top bar + drawer */
  --ink-on-chrome:         #F3EADC;   /* primary text/icon on chrome */
  --ink-on-chrome-dim:     #CDBEAA;   /* secondary on chrome (AA) */
  --chrome-border:         #483726;   /* crisp chrome↔canvas edge + on-chrome dividers */
  --chrome-hover:          #3C2C1F;   /* drawer item hover / inset fields */
  --chrome-active:         #4C3720;   /* drawer item active fill (+ amber edge) */

  /* ink */
  --ink-primary:           #1B1A18;
  --ink-secondary:         #413D38;
  --ink-tertiary:          #5D5951;
  --ink-disabled:          #B6AFA3;

  /* line */
  --line-soft:             #E2DBCC;
  --line-default:          #C9C0AE;
  --line-strong:           #1B1A18;

  /* accents — semantic */
  --accent-primary:        #B7791F;
  --accent-primary-soft:   #F1E2C2;
  --accent-data:           #1C7E9B;
  --accent-data-soft:      #CDE6EE;

  /* state */
  --state-positive:        #4F6F3A;
  --state-positive-soft:   #E5EBDB;
  --state-warning:         #B27B16;
  --state-warning-soft:    #F3E6C4;
  --state-negative:        #8B3A2F;
  --state-negative-soft:   #ECD5CE;
  --state-neutral:         #4B4640;
  --state-neutral-soft:    #ECE7DC;

  /* informational */
  --info-link:             #1F5C70;
  --info-link-hover:       #144454;
  --focus-ring:            #B7791F40;

  /* spacing — 8pt grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* radii */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* typography */
  --font-sans: "Inter", "Be Vietnam Pro", system-ui, -apple-system, sans-serif;
  --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* motion */
  --ease-enter: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-exit:  cubic-bezier(0.4, 0, 1, 1);
  --dur-state:  120ms;
  --dur-open:   180ms;
  --dur-page:   240ms;

  /* ============================================================
     TYPE WEIGHT TOKENS — centralized so legibility is tunable.
     One step heavier than before to fix "too light" text. Sizes +
     line-heights are unchanged (set on the .t-* roles below).
     ============================================================ */
  --fw-body:    500;   /* base body / paragraph (was 400) */
  --fw-strong:  600;   /* meta, captions, labels, eyebrows, sub-labels */
  --fw-heading: 700;   /* small section/card headings that read thin */

  /* ============================================================
     DATA-VIZ TOKENS — charts read these (theme-controlled).
     Base values ALIAS the existing chart colors, so the qualitative
     ramp + semantics resolve per-family automatically (var() is lazy:
     each family already redefines --accent-data / --state-* / --fin-*).
     Result: Almanac + all industry families render IDENTICALLY — this
     is a pure refactor for them. Only Midnight overrides --viz-* with
     a navy-ready palette (tokens.midnight.css).
     ============================================================ */
  /* qualitative / categorical ramp (mutually distinguishable) */
  --viz-1: var(--accent-data);
  --viz-2: var(--state-positive);
  --viz-3: var(--accent-primary);
  --viz-4: var(--state-warning);
  --viz-5: var(--state-negative);
  --viz-6: var(--ink-tertiary);
  /* semantic */
  --viz-positive: var(--fin-green);
  --viz-negative: var(--fin-red);
  --viz-warning:  var(--state-warning);
  --viz-neutral:  var(--ink-tertiary);
  --viz-line:     var(--accent-data);   /* neutral data lines / sparklines */
  --viz-track:    var(--line-soft);     /* gauge background arc */
  --viz-anchor:   var(--viz-line);      /* waterfall anchor (prior/new) bar */
  /* ACT/FC/BUD bar trio — aliased to current values so existing themes
     are byte-identical; Midnight repoints to mint/azure/slate. */
  --viz-act: var(--ink-secondary);
  --viz-fc:  var(--viz-line);
  --viz-bud: var(--ink-disabled);
  /* diverging heat (soft translucent fills; navy shows through in Midnight) */
  --viz-heat-low:  var(--fin-red-soft);
  --viz-heat-mid:  var(--fin-amber-soft);
  --viz-heat-high: var(--fin-green-soft);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-canvas:      #15140F;
    --surface-raised:      #1F1D17;
    --surface-sunk:        #100F0B;
    --surface-overlay:     #00000099;
    --surface-chrome:      #1E1710;   /* near-black espresso, a step off the dark canvas */
    --ink-on-chrome:       #F1ECE0;
    --ink-on-chrome-dim:   #BFB4A1;
    --chrome-border:       #3A2B1C;
    --chrome-hover:        #2A2015;
    --chrome-active:       #3C2C19;

    --ink-primary:         #F1ECE0;
    --ink-secondary:       #CBC4B5;
    --ink-tertiary:        #ACA799;
    --ink-disabled:        #4B4640;

    --line-soft:           #2B2820;
    --line-default:        #3A352B;
    --line-strong:         #F1ECE0;

    --accent-primary:      #E0A93A;
    --accent-primary-soft: #2A2316;
    --accent-data:         #5FA5BC;
    --accent-data-soft:    #16242A;

    --state-positive:      #8FAE71;
    --state-positive-soft: #1F2716;
    --state-warning:       #DAB16A;
    --state-warning-soft:  #2A2113;
    --state-negative:      #C97766;
    --state-negative-soft: #2A1612;
    --state-neutral:       #C2BAAA;
    --state-neutral-soft:  #1F1D17;

    --info-link:           #5FA5BC;
    --info-link-hover:     #8AC0D2;
    --focus-ring:          #E0A93A55;
  }
}

[data-theme="dark"] {
  --surface-canvas:      #15140F;
  --surface-raised:      #1F1D17;
  --surface-sunk:        #100F0B;
  --surface-overlay:     #00000099;
  --surface-chrome:      #1E1710;
  --ink-on-chrome:       #F1ECE0;
  --ink-on-chrome-dim:   #BFB4A1;
  --chrome-border:       #3A2B1C;
  --chrome-hover:        #2A2015;
  --chrome-active:       #3C2C19;
  --ink-primary:         #F1ECE0;
  --ink-secondary:       #CBC4B5;
  --ink-tertiary:        #ACA799;
  --ink-disabled:        #4B4640;
  --line-soft:           #2B2820;
  --line-default:        #3A352B;
  --line-strong:         #F1ECE0;
  --accent-primary:      #E0A93A;
  --accent-primary-soft: #2A2316;
  --accent-data:         #5FA5BC;
  --accent-data-soft:    #16242A;
  --state-positive:      #8FAE71;
  --state-positive-soft: #1F2716;
  --state-warning:       #DAB16A;
  --state-warning-soft:  #2A2113;
  --state-negative:      #C97766;
  --state-negative-soft: #2A1612;
  --state-neutral:       #C2BAAA;
  --state-neutral-soft:  #1F1D17;
  --info-link:           #5FA5BC;
  --info-link-hover:     #8AC0D2;
  --focus-ring:          #E0A93A55;
}

/* ============================================================
   Base reset, type roles
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface-canvas);
  color: var(--ink-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 22px;
  font-weight: var(--fw-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv01", "cv11";
}

/* type roles (per doc 16 §4) — weights driven by centralized --fw-* tokens.
   Sizes + line-heights unchanged; only weight lifted for legibility. */
.t-display    { font-family: var(--font-serif); font-size: 36px; line-height: 44px; font-weight: 600; letter-spacing: -0.01em; }
.t-h1         { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.005em; }
.t-h2         { font-size: 18px; line-height: 26px; font-weight: var(--fw-heading); }
.t-h3         { font-size: 15px; line-height: 22px; font-weight: var(--fw-heading); }
.t-body-lg    { font-size: 16px; line-height: 26px; font-weight: var(--fw-body); }
.t-body       { font-size: 14px; line-height: 22px; font-weight: var(--fw-body); }
.t-meta       { font-size: 12px; line-height: 18px; font-weight: var(--fw-strong); color: var(--ink-tertiary); }
.t-numeric-lg { font-family: var(--font-serif); font-size: 28px; line-height: 36px; font-variant-numeric: tabular-nums; font-weight: 600; }
.t-numeric    { font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; font-weight: var(--fw-body); }
.t-mono       { font-family: var(--font-mono); font-size: 13px; line-height: 20px; }

/* secondary-emphasis body + common label roles → strong weight */
.t-body.is-secondary, .t-label, .t-kicker, .t-eyebrow { font-weight: var(--fw-strong); }

/* VN-specific: line-height never < 1.5 */
[lang="vi"] { line-height: 1.55; letter-spacing: 0; }
[lang="vi"].t-body-lg { line-height: 1.6; }

/* focus ring */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* selection */
::selection {
  background: var(--accent-primary-soft);
  color: var(--ink-primary);
}

/* scrollbar — calm */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-default);
  border-radius: 8px;
  border: 2px solid var(--surface-canvas);
}

/* reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   FINANCE / ANALYST LAYER  (client iteration — dense Excel-like mode)
   Round-4 re-skin: every finance token now MAPS TO an Almanac token
   (no literal hex, no reference-tool palette). The dense layout is
   unchanged; only the finish is Almanac-native. Because these alias
   the theme-aware Almanac tokens, light + dark work automatically —
   no per-mode override needed.
     chrome/header band → --surface-sunk      (matches DataTable thead)
     text on band       → --ink-secondary
     primary accent     → --accent-primary    (Almanac amber)
     figures / data viz → --accent-data        (Almanac data-blue)
     +/- deltas         → --state-positive / --state-negative
   ============================================================ */
:root {
  --fin-navy:        var(--surface-canvas);  /* header band → page canvas (blends) */
  --fin-navy-2:      var(--surface-canvas);  /* sub-header → canvas              */
  --fin-navy-3:      var(--surface-canvas);  /* total band → canvas (+top border) */
  --fin-on-navy:     var(--ink-secondary);  /* header label text                */
  --fin-on-navy-dim: var(--ink-tertiary);   /* muted header text                */
  --fin-blue:        var(--accent-data);     /* data-viz + active/recommended    */
  --fin-blue-soft:   var(--accent-data-soft);
  --fin-green:       #1F8A3F;  /* + deltas — brighter for light-theme legibility (review) */
  --fin-green-soft:  #D7EBD3;
  --fin-red:         #C23A2B;  /* − deltas — brighter for light-theme legibility (review) */
  --fin-red-soft:    #F4D9D2;
  --fin-amber-soft:  var(--state-warning-soft); /* mid heat stop                 */
  --fin-canvas:      var(--surface-canvas);  /* data canvas = page (blends)      */
  --fin-zebra:       var(--surface-canvas);  /* no heavy zebra — hairlines only  */
  --fin-rule:        var(--line-default);    /* cell gridline                    */
  --fin-rule-soft:   var(--line-soft);
  --fin-radius:      var(--radius-sm);       /* Almanac small radius             */
  --fin-row-h:       30px;                   /* dense row height                 */
  --fin-cell-x:      13px;                   /* horizontal cell padding          */
  --fin-num: var(--font-mono);
}

/* The +/- and heat brightening above is LIGHT-THEME ONLY (review request:
   clearer green/red for faster issue-spotting). Dark stays the muted
   Almanac moss/rust by restoring the theme-aware state tokens. */
[data-theme="dark"] {
  --fin-green: var(--state-positive);
  --fin-green-soft: var(--state-positive-soft);
  --fin-red: var(--state-negative);
  --fin-red-soft: var(--state-negative-soft);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fin-green: var(--state-positive);
    --fin-green-soft: var(--state-positive-soft);
    --fin-red: var(--state-negative);
    --fin-red-soft: var(--state-negative-soft);
  }
}
/* the dense analyst surface — applied to wizard + results roots */
.fin {
  background: var(--fin-canvas);
  color: var(--ink-primary);
}
.fin .t-num,
.fin .fin-num { font-family: var(--fin-num); font-variant-numeric: tabular-nums; }

/* utility flexes */
.row  { display: flex; align-items: center; }
.col  { display: flex; flex-direction: column; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }