/* ==========================================================================
   AUREUS — design tokens
   Two surfaces share one token contract:
     · default (marketing site)  — warm, light, editorial
     · .theme-terminal (dashboard) — dark "investment terminal"
   Reversed marketing sections opt into the dark palette with .invert.
   ========================================================================== */

:root {
    color-scheme: light;

    /* --- brand ---------------------------------------------------------- */
    --gold:          #a9822b;   /* accent w/ text-grade contrast on white   */
    --gold-strong:   #876619;
    --gold-bright:   #d8b25a;   /* decorative: rules, gradients, chart line */
    --gold-tint:     #f6eedc;
    --gold-tint-2:   #efe4c9;
    --bronze:        #4a3a22;
    --champagne:     #e8d6ae;

    /* --- neutrals (warm) --------------------------------------------------*/
    --paper:            #fbf9f5;
    --surface:          #ffffff;
    --surface-2:        #f4f0e8;
    --surface-3:        #ece6da;
    --ink:              #191a1e;
    --ink-soft:         #42444c;
    --muted:            #6b6a70;
    --muted-2:          #8b8a90;
    --line:             #e7e1d4;
    --line-strong:      #d7cfbd;
    --overlay:          rgba(23, 21, 15, 0.42);

    /* charcoal band used by inverted sections & footer */
    --charcoal:         #16171c;
    --charcoal-2:       #1e2027;
    --charcoal-3:       #292c34;

    /* --- semantic (never colour-only in UI copy) -----------------------  */
    --success:          #1c7c57;
    --success-tint:     #e4f1ea;
    --danger:           #b23b3b;
    --danger-tint:      #f7e7e4;
    --warn:             #9a6b16;
    --warn-tint:        #f7ecd6;
    --info:             #2c6e9b;
    --info-tint:        #e5eef4;

    /* --- typography ------------------------------------------------------
       Aureus ships in 6 UI languages (en/th/vi/ko/ja/zh). Inter covers Latin
       + Vietnamese extended Latin well, but has zero glyph coverage for Thai
       or CJK, and Playfair Display (serif display face) has none of those
       either — both would otherwise silently fall back to whatever font the
       OS happens to ship, which looks inconsistent across devices. So every
       script gets an explicit webfont (all loaded together in layout.php;
       Google Fonts serves each family unicode-range-subset, so a page only
       ever downloads the glyphs it actually renders). CJK reuses the sans
       family for display text too — loading a second (much heavier) serif
       CJK family for headings only would cost real page-weight for a small
       visual gain, so Playfair Display's serif character is Latin/Thai-only
       by design here. */
    --font-sans: "Inter", "Noto Sans Thai", "Noto Sans KR", "Noto Sans JP", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Playfair Display", "Noto Sans Thai", "Noto Sans KR", "Noto Sans JP", "Noto Sans SC", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --fs-xs:   0.75rem;
    --fs-sm:   0.8125rem;
    --fs-base: 0.9375rem;   /* 15px */
    --fs-md:   1.0625rem;
    --fs-lg:   1.25rem;
    --fs-xl:   1.5rem;
    --fs-2xl:  clamp(1.75rem, 1.2rem + 2.4vw, 2.25rem);
    --fs-3xl:  clamp(2.1rem, 1.3rem + 3.6vw, 3rem);
    --fs-4xl:  clamp(2.6rem, 1.4rem + 5.4vw, 4rem);
    --fs-5xl:  clamp(3rem, 1.4rem + 7vw, 5rem);

    --lh-tight: 1.12;
    --lh-snug:  1.3;
    --lh-base:  1.65;

    --tracking-tight: -0.02em;
    --tracking-wide:  0.08em;
    --tracking-caps:  0.16em;

    /* --- spacing (4px grid) ------------------------------------------- */
    --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
    --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 2.5rem;  --sp-8: 3rem;
    --sp-10: 4rem;    --sp-12: 5rem;   --sp-16: 7rem;   --sp-20: 9rem;

    --container:        1200px;
    --container-wide:   1360px;
    --container-narrow: 720px;
    --gutter: clamp(1.25rem, 5vw, 3rem);

    /* --- radius (restrained) ---------------------------------------- */
    --r-xs: 4px;
    --r-sm: 7px;
    --r-md: 11px;
    --r-lg: 16px;
    --r-xl: 22px;
    --r-pill: 999px;

    /* --- elevation ------------------------------------------------- */
    --shadow-xs: 0 1px 2px rgba(24, 21, 12, 0.05);
    --shadow-sm: 0 1px 3px rgba(24, 21, 12, 0.06), 0 1px 2px rgba(24, 21, 12, 0.04);
    --shadow-md: 0 6px 18px -6px rgba(24, 21, 12, 0.10), 0 2px 6px rgba(24, 21, 12, 0.05);
    --shadow-lg: 0 28px 64px -20px rgba(24, 21, 12, 0.22), 0 8px 20px -12px rgba(24, 21, 12, 0.12);
    --shadow-gold: 0 18px 40px -14px rgba(169, 130, 43, 0.34);
    --ring: 0 0 0 3px rgba(216, 178, 90, 0.45);

    /* --- motion --------------------------------------------------- */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-1: 0.14s;
    --dur-2: 0.22s;
    --dur-3: 0.4s;

    --z-header: 100;
    --z-dropdown: 200;
    --z-drawer: 300;
    --z-modal: 400;
    --z-toast: 500;

    --header-h: 76px;
    --bottomnav-h: 64px;
}

/* ==========================================================================
   Dark surfaces — dashboard shell and inverted marketing bands
   ========================================================================== */
.theme-terminal,
.invert {
    color-scheme: dark;

    --paper:            #0e0f12;
    --surface:          #15171c;
    --surface-2:        #1b1e24;
    --surface-3:        #23272f;
    --ink:              #ecebe4;
    --ink-soft:         #bcbbc3;
    --muted:            #8b8c95;
    --muted-2:          #6e6f79;
    --line:             #262a32;
    --line-strong:      #343a45;
    --overlay:          rgba(0, 0, 0, 0.6);

    --gold:          #d9b466;
    --gold-strong:   #e7c583;
    --gold-bright:   #e7c583;
    --gold-tint:     rgba(217, 180, 102, 0.12);
    --gold-tint-2:   rgba(217, 180, 102, 0.18);

    --success:       #43c08d;
    --success-tint:  rgba(67, 192, 141, 0.14);
    --danger:        #e5786a;
    --danger-tint:   rgba(229, 120, 106, 0.15);
    --warn:          #e0b45f;
    --warn-tint:     rgba(224, 180, 95, 0.14);
    --info:          #6db2dd;
    --info-tint:     rgba(109, 178, 221, 0.14);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 10px 26px -10px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 34px 70px -24px rgba(0, 0, 0, 0.7);
    --shadow-gold: 0 18px 44px -16px rgba(217, 180, 102, 0.28);
    --ring: 0 0 0 3px rgba(217, 180, 102, 0.4);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-1: 0s;
        --dur-2: 0s;
        --dur-3: 0s;
    }
}

/* ==========================================================================
   Script-aware tracking — wide uppercase letter-spacing (eyebrows, badges,
   pill labels, table headers) is a Latin-typography convention. Thai has no
   case at all and wide tracking visibly breaks the way vowel/tone marks sit
   above and below consonants; CJK is already fixed-width and dense, so extra
   tracking just looks like broken kerning rather than "refined." Resetting
   the tokens here — rather than touching every component that reads them —
   fixes all ~13 call sites in one place per the "one shared fix, not
   per-page" rule. */
:lang(th), :lang(ko), :lang(ja), :lang(zh) {
    --tracking-caps: normal;
    --tracking-wide: normal;
}

/* Vietnamese stacks a tone mark on top of an already-accented vowel (ườ, ệ,
   ỡ…) — at the very tight 1.12 heading line-height that's comfortable for
   plain Latin, those marks can visually crowd the line above. A touch more
   room removes the risk without changing the Latin/Thai/CJK headings at all. */
:lang(vi) {
    --lh-tight: 1.22;
}