/* Agryos Terminal — design tokens (SHARED, read-only for view agents). The rules behind every value are in
   docs/DESIGN.md. Dark is the default; light overrides live under [data-theme=light].
   Every colour token is a plain hex or rgba(): views read them with getComputedStyle and build alpha variants
   from the hex, so no oklch()/color-mix() values here. Token NAMES are a public API — never rename or drop one. */
:root {
  color-scheme: dark;

  /* ---------- neutrals: one warm-graphite family (OKLCH hue 75, chroma ≤ .01) ---------- */
  --bg: #0f0e0c;            /* app canvas */
  --bg-2: #141210;          /* bars, ticker, recessed strips */
  --bg-3: #1b1917;          /* group rows, map backgrounds */
  --panel: #171513;         /* raised surface: panels, cards, KPI tiles (opaque — no glass) */
  --panel-solid: #171513;   /* same, guaranteed opaque (sticky table heads, modals) */
  --panel-2: #1f1d1b;       /* overlays: menus, tooltips, toasts, palette */
  --sunken: rgba(0, 0, 0, .24);          /* inputs, wells */
  --tint: rgba(236, 233, 229, .035);      /* quiet fill (nested tiles, chips) */
  --tint-strong: rgba(236, 233, 229, .06);
  --hover: rgba(236, 233, 229, .045);
  --hover-strong: rgba(236, 233, 229, .08);
  --press: rgba(236, 233, 229, .11);
  --border: rgba(236, 233, 229, .075);    /* hairlines */
  --border-strong: rgba(236, 233, 229, .13);
  --border-hover: rgba(236, 233, 229, .2);
  --border-glow: rgba(var(--accent-rgb), .38); /* focus/hover edge in brand colour (name kept for the views) */

  /* ---------- text ---------- */
  --text: #ece9e5;
  --text-2: #b4b0ab;
  --text-3: #8c8882;        /* 5.2:1 on --panel, 4.8:1 on --tint, 4.5:1 on --tint-strong: the floor for small
                               labels (#85817b was 4.37:1 on the --tint wells where KPI labels and chip counts sit) */
  --text-inverse: #12100d;

  /* ---------- brand: ONE accent, the grain gold, desaturated ---------- */
  --accent: #e3b662;
  --accent-rgb: 227, 182, 98;
  --accent-ink: #1b150b;    /* text on a solid accent fill */
  /* the accent as TEXT on an accent tint (active chip, accent badge, demo strip): ≥ 4.5:1 on a 14% tint over the
     darkest strip. Equal to --accent in the dark theme; a deeper gold in the light one. AF.applyTheme derives both
     for a colour the user picked (docs/DESIGN.md § 2.2). */
  --accent-text: #e3b662;
  --focus: rgba(var(--accent-rgb), .8);   /* keyboard focus outline */
  --accent-2: #78c192;      /* secondary = sage (same as --chart-3); used sparingly by curve/weather */

  /* ---------- data semantics ---------- */
  --up: #63ca84;
  --up-rgb: 99, 202, 132;
  --down: #e96562;
  --down-rgb: 233, 101, 98;
  --flat: #b4b0ab;
  --info: #77abd7;
  --info-rgb: 119, 171, 215;
  --warn: #ee9b58;
  --warn-rgb: 238, 155, 88;

  /* Legacy gradient tokens: kept for the views/landing that still reference them, now flat on purpose
     (gradient text and gold→orange fills were the loudest AI fingerprint of the old UI). */
  --grad: linear-gradient(var(--accent), var(--accent));
  --grad-soft: linear-gradient(rgba(var(--accent-rgb), .10), rgba(var(--accent-rgb), .10));
  --grad-text: linear-gradient(var(--accent), var(--accent));

  /* drought palette (official USDM — do not restyle) */
  --d0: #ffff00; --d1: #fcd37f; --d2: #ffaa00; --d3: #e60000; --d4: #730000;

  /* ---------- typography ---------- */
  --font-ui: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 28px;
  --fs-3xl: 40px;
  --lh: 1.45;
  /* figures (Plex Mono, tabular): their own scale, so a price never borrows a heading size */
  --num-xs: 11px;           /* deltas under a value, axis numbers */
  --num-sm: 12px;           /* table cells */
  --num: 13px;              /* inline figures in text rows */
  --num-md: 15px;           /* quotes in a header strip */
  --num-lg: 19px;           /* KPI value */
  --num-xl: 28px;           /* big KPI */
  --num-hero: 40px;         /* the one main price of a screen */
  --num-track: -.01em;      /* figures ≥ 19px: slightly tighter, digits stay tabular */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 650;

  /* ---------- spacing (4px grid) ---------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* ---------- radii: tight inside, softer outside ---------- */
  --r-xs: 3px;              /* tags, kbd, badges */
  --r-sm: 5px;              /* controls: buttons, inputs, chips, nav items */
  --r: 7px;                 /* KPI tiles, cards, toasts */
  --r-lg: 9px;              /* panels */
  --r-xl: 12px;             /* modals, auth card */
  --r-pill: 999px;          /* only dots and the switch track */

  /* ---------- elevation: hairline first, tinted shadow second ---------- */
  --shadow-rgb: 4, 3, 2;
  --inset-hi: inset 0 1px 0 rgba(255, 255, 255, .028);
  --shadow-sm: inset 0 1px 0 rgba(255, 255, 255, .028), 0 1px 2px rgba(4, 3, 2, .28);
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 2px 4px rgba(4, 3, 2, .22), 0 8px 24px rgba(4, 3, 2, .28);
  --shadow-lg: 0 2px 6px rgba(4, 3, 2, .3), 0 18px 48px rgba(4, 3, 2, .5);
  --shadow-pop: inset 0 1px 0 rgba(255, 255, 255, .04), 0 4px 12px rgba(4, 3, 2, .32), 0 16px 40px rgba(4, 3, 2, .42);
  --glow-accent: 0 0 0 1px rgba(var(--accent-rgb), .32);   /* name kept; no outer glow any more */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-opacity: .035;

  /* ---------- motion (docs/DESIGN.md § Movimento) ---------- */
  --ease: cubic-bezier(.2, .8, .2, 1);          /* state changes on screen */
  --ease-out: cubic-bezier(.16, 1, .3, 1);      /* things arriving */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);  /* things moving from A to B (indicators) */
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);  /* drawers and sheets */
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur: 200ms;
  --dur-slow: 320ms;
  --dur-chart: 700ms;       /* chart draw-in (charts.js mirrors it) */
  --dur-tween: 450ms;       /* chart dataset tween */
  --stagger: 35ms;
  --flash-ms: 650ms;        /* AF.flash removes the class at 700 ms: keep this below */

  /* ---------- z-index scale ---------- */
  --z-sticky: 10;
  --z-dropdown: 60;
  --z-overlay: 800;
  --z-palette: 850;
  --z-menu: 870;
  --z-toast: 900;

  /* ---------- layout ---------- */
  --header-h: 52px;
  --ticker-h: 30px;
  --footer-h: 28px;
  --sidebar-w: 212px;
  --sidebar-w-collapsed: 56px;
  --row-h: 26px;
  --cell-px: 8px;
  --blur: 0px;              /* glass is gone: every backdrop-filter: blur(var(--blur)) in the views is now a no-op */

  /* ---------- charts ---------- */
  --chart-grid: rgba(236, 233, 229, .055);
  --chart-axis: #85817b;
  --chart-cross: rgba(236, 233, 229, .32);
  /* muted, distinguishable series — same lightness band, hues ~45° apart; first is the brand gold */
  --chart-1: #e3b662;   /* gold */
  --chart-2: #73a7d3;   /* steel blue */
  --chart-3: #78c192;   /* sage */
  --chart-4: #da8061;   /* terracotta */
  --chart-5: #a78ec6;   /* heather */
  --chart-6: #6fbab9;   /* teal */
  --chart-7: #d387a5;   /* rose */
  --chart-8: #b2c07d;   /* olive */
  --chart-9: #8f9be3;   /* periwinkle — 9th and 10th exist for the ten weather models */
  --chart-10: #cdc3b4;  /* bone */
}

[data-density="comfortable"] {
  --row-h: 32px;
  --cell-px: 12px;
  --fs: 13.5px;
  --fs-sm: 12.5px;
}
[data-density="compact"] {
  --row-h: 26px;
  --fs: 12.5px;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f5f3;
  --bg-2: #f1efeb;
  --bg-3: #eae7e3;
  --panel: #fffefc;
  --panel-solid: #fffefc;
  --panel-2: #ffffff;
  --sunken: #ffffff;
  --tint: rgba(29, 26, 23, .03);
  --tint-strong: rgba(29, 26, 23, .055);
  --hover: rgba(29, 26, 23, .04);
  --hover-strong: rgba(29, 26, 23, .07);
  --press: rgba(29, 26, 23, .1);
  --border: rgba(29, 26, 23, .09);
  --border-strong: rgba(29, 26, 23, .15);
  --border-hover: rgba(29, 26, 23, .24);
  --border-glow: rgba(var(--accent-rgb), .42);
  --text: #1d1a17;
  --text-2: #534f4a;
  --text-3: #6d6863;        /* 4.9:1 on --tint-strong, 4.8:1 on --bg-2 (was #716c67: 4.25:1 on the kbd hint) */
  --text-inverse: #fffefc;
  --accent: #976902;
  --accent-rgb: 151, 105, 2;
  --accent-ink: #fffdf8;
  --accent-text: #7d5700;   /* 4.8:1 on a 14% gold tint over --bg-2, 5.6:1 on the panel tint */
  --accent-2: #318454;
  --up: #17773f;            /* 4.9:1 on --bg-2 (ticker), 4.8:1 on its own 10% tint (was #198044: 4.34 / 4.33) */
  --up-rgb: 23, 119, 63;
  --down: #c13234;
  --down-rgb: 193, 50, 52;
  --flat: #534f4a;
  --info: #2d6da5;
  --info-rgb: 45, 109, 165;
  --warn: #a65109;          /* 4.8:1 on --bg-2, 4.5:1 on its own 14% tint (was #b2580b: 4.26 / 4.02) */
  --warn-rgb: 166, 81, 9;
  --shadow-rgb: 60, 45, 25;
  --inset-hi: inset 0 1px 0 rgba(255, 255, 255, .7);
  --shadow-sm: 0 0 0 0 transparent, 0 1px 2px rgba(60, 45, 25, .06);
  --shadow: 0 1px 2px rgba(60, 45, 25, .05), 0 4px 14px rgba(60, 45, 25, .07);
  --shadow-lg: 0 2px 6px rgba(60, 45, 25, .06), 0 18px 44px rgba(60, 45, 25, .14);
  --shadow-pop: 0 1px 3px rgba(60, 45, 25, .08), 0 12px 32px rgba(60, 45, 25, .14);
  --grain-opacity: .05;
  --chart-grid: rgba(29, 26, 23, .07);
  --chart-axis: #716c67;
  --chart-cross: rgba(29, 26, 23, .32);
  --chart-1: #a57710;
  --chart-2: #2d6da5;
  --chart-3: #318454;
  --chart-4: #bd5833;
  --chart-5: #7b5a9f;
  --chart-6: #2d8387;
  --chart-7: #b14c79;
  --chart-8: #6c792f;
  --chart-9: #4a55ad;
  --chart-10: #6e6559;
}