/* ============================================================
   AI STOCK ANALYZER — design tokens
   "Midnight Mint Terminal" · dark-first, premium light mode
   ============================================================ */

:root {
  /* ---- surfaces (dark) — KATA TERMINAL ---- */
  --bg0: #070B10;            /* page ground */
  --bg1: #091017;            /* page wash / alt ground */
  --surface: #101820;        /* card */
  --raised: #141E27;         /* raised module */
  --soft: #18232C;           /* soft elevated surface (assistant, AI) */
  --inter: #19242E;          /* interactive surface (hover, inputs) */
  --inset: #0C1219;          /* recessed wells inside a card */
  --line: #24323B;           /* hairline */
  --line-strong: #32434C;    /* emphasized border */
  --line-soft: rgba(122, 160, 150, .10);

  /* ---- brand ---- */
  --mint: #63E3BD;
  --mint-bright: #84F0D2;
  --mint-deep: #25B792;
  --mint-dim: rgba(99, 227, 189, .12);
  --mint-glow: rgba(99, 227, 189, .28);
  --aqua: #75D8EB;
  --ai: #A99AFF;             /* lavender — AI-generated content only */
  --ai-dim: rgba(169, 154, 255, .12);
  --gold: #DCB158;
  --gold-dim: rgba(220, 177, 88, .12);

  /* ---- text ---- */
  --text: #F4F8F7;
  --text-2: #B1BDBA;
  /* #73817F measured 3.88:1 on --inter and 4.16:1 on --raised — under WCAG AA
     for the small labels it carries (tags, ring captions, company names).
     Same hue, lifted until it clears 4.5:1 on every surface it sits on. */
  --muted: #8B9995;

  /* ---- financial meaning (never decorative) ---- */
  --up: #35D49A;
  --up-dim: rgba(53, 212, 154, .12);
  --down: #F0647B;
  --down-dim: rgba(240, 100, 123, .12);
  --warn: #E4AD47;
  --warn-dim: rgba(228, 173, 71, .12);
  --info: #6D9CF5;
  --info-dim: rgba(109, 156, 245, .12);

  /* ---- charts ---- */
  --chart-bg: transparent;
  --chart-grid: rgba(140, 170, 160, .07);
  --chart-text: #6E7F7A;

  /* ---- type ---- */
  --font-ui: "LINE Seed Sans TH", "Inter", "Noto Sans Thai",
             -apple-system, "Segoe UI", sans-serif;
  /* Type scale lifted for Thai readability (spec §54): body is 15px, the
     smallest *readable* size is 13px, and 11px is reserved for metadata
     labels only — never body copy. */
  --fs-hero: clamp(2.3rem, 4.6vw, 3.4rem);
  --fs-h1: 1.42rem;
  --fs-h2: 1.12rem;
  --fs-h3: 1rem;
  --fs-body: .9375rem;   /* 15px */
  --fs-sm: .875rem;      /* 14px */
  --fs-xs: .8125rem;     /* 13px — smallest size used for real sentences */
  --fs-micro: .6875rem;  /* 11px — uppercase metadata labels only */

  /* ---- spacing (base 4) ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;

  /* ---- radius ---- */
  --r-lg: 17px;   /* major section */
  --r-md: 13px;   /* card */
  --r-sm: 10px;   /* input / button */
  --r-xs: 7px;

  /* ---- elevation ---- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 6px 24px -8px rgba(0, 0, 0, .5);
  --shadow-pop: 0 12px 40px -8px rgba(0, 0, 0, .65);

  /* ---- z ---- */
  --z-sticky: 30; --z-nav: 40; --z-drawer: 60; --z-modal: 80; --z-toast: 100;

  /* ---- motion ---- */
  --t-fast: 130ms cubic-bezier(.3, .7, .4, 1);
  --t-med: 200ms cubic-bezier(.3, .7, .4, 1);

  --nav-h: 56px;
  --tabbar-h: 58px;
  --content-max: 1540px;   /* spec §05: 1480–1580 */
  --content-wide: 1680px;  /* research/chart areas on very large displays */

  color-scheme: dark;
}

html[data-theme="light"] {
  --bg0: #F4F7F5;
  --bg1: #EFF4F1;
  --surface: #FFFFFF;
  --raised: #FFFFFF;
  --soft: #F6FAF8;
  --inter: #E9F1EC;
  --inset: #EEF3F0;
  --line: #DBE4DF;
  --line-strong: #C7D5CE;
  --line-soft: rgba(30, 70, 55, .08);

  /* Light-mode ink is measured, not eyeballed. Every value below carries at
     least 4.5:1 against the four light surfaces it can sit on (#FFFFFF,
     #F4F7F5, #EEF3F0, #E9F1EC) so financial figures, links and status text
     all clear WCAG AA. The pre-measurement palette failed at 2.3–3.3:1.
     Hue is preserved — these are the same colours, darkened to be legible. */
  /* The chip/tag colours are solved against their OWN *-dim tint (which is
     darker than a plain surface), so `color: var(--x)` on
     `background: var(--x-dim)` still clears AA. */
  --mint: #156E56;          /* was #20A983 (2.58:1); white text on it as a button reads 5.3:1 */
  --mint-bright: #1E9576;
  --mint-deep: #0F5442;
  --mint-dim: #DEF5ED;
  --mint-glow: rgba(21, 110, 86, .22);
  --aqua: #23768A;          /* was #2B93AB (3.11:1) */
  --ai: #60589C;            /* was #9082E7 (2.79:1) */
  --ai-dim: rgba(96, 88, 156, .13);
  --gold: #795C23;          /* was #C59638 (2.34:1) */
  --gold-dim: rgba(121, 92, 35, .13);

  --text: #13211B;
  --text-2: #4F615A;
  --muted: #62706A;         /* was #7A8B84 (3.12:1) */

  --up: #157B5B;            /* was #1B9E75 (2.95:1) — profit figures must be readable */
  --up-dim: rgba(21, 123, 91, .12);
  --down: #A63D50;          /* was #DD526B (3.32:1); solved on its own dim too */
  --down-dim: rgba(166, 61, 80, .11);
  --warn: #7F5A18;          /* was #B07E22 (3.12:1) */
  --warn-dim: rgba(127, 90, 24, .12);
  --info: #3869C9;          /* was #3B6FD4 (4.14:1) */
  --info-dim: rgba(56, 105, 201, .11);

  --chart-grid: rgba(20, 60, 45, .08);
  --chart-text: #7A8B84;

  --shadow-1: 0 1px 2px rgba(20, 40, 32, .08);
  --shadow-2: 0 6px 24px -10px rgba(20, 40, 32, .18);
  --shadow-pop: 0 12px 40px -10px rgba(20, 40, 32, .25);

  color-scheme: light;
}