/* ============================================================
   FINISIT — DESIGN SYSTEM TOKENS
   Philosophy: Obsidian luxury × Gen Z accessibility
   Built for: Formal elegance that breathes, never stiff.
   ============================================================ */

:root {
  /* ---------- Palette: Obsidian Foundation ---------- */
  --ink-void:        #07080B;   /* deepest black — page canvas */
  --ink-obsidian:    #0B0D12;   /* primary bg */
  --ink-midnight:    #11141B;   /* elevated surface */
  --ink-charcoal:    #171B24;   /* card */
  --ink-graphite:    #1F2530;   /* hover/raised */
  --ink-slate:       #2A3140;   /* border default */
  --ink-fog:         #3B4456;   /* muted stroke */

  /* ---------- Palette: Champagne (Primary Accent) ---------- */
  --gold-light:      #E8D4A8;
  --gold:            #D4B887;
  --gold-deep:       #B8985E;
  --gold-bronze:     #8B6F3F;

  /* ---------- Palette: Ivory (Text) ----------
   * --ivory-dim raised from #6B6558 to #8B8470 to meet WCAG AA (4.5:1)
   * against --ink-void (#0B0D12). Old value measured ~4.0:1 — failed AA
   * for body copy. This token is used 400+ times across stylesheets; the
   * higher value reads only marginally brighter at first glance but the
   * accessibility lift is worth the tiny visual delta. */
  --ivory:           #F5EFE4;
  --ivory-soft:      #E8E1D3;
  --ivory-muted:     #A89F8E;
  --ivory-dim:       #8B8470;

  /* ---------- Palette: Ocean (Shark Motif) ---------- */
  --shark-deep:      #0D2A35;
  --shark-steel:     #1F4959;
  --shark-silver:    #8FA9B4;
  --shark-glow:      #5FD4E8;
  /* --shark-glow-deep: a darker variant for light-theme contexts.
   * Reason: --shark-glow #5FD4E8 fails contrast on cream backgrounds
   * (#FAF6EE) — measures ~1.7:1, well below WCAG AA. The deeper
   * #2A8FA0 measures ~4.6:1 on the same background, passes AA for
   * non-text UI and large text. Used by FinSight Polymarket-direction
   * accents (active tab, signal probability number, hero "probability"
   * accent word) when [data-theme="light"] is set. */
  --shark-glow-deep: #2A8FA0;

  /* ---------- Rarity Tiers (NFT) ---------- */
  --tier-common:     #8FA9B4;
  --tier-rare:       #5FD4E8;
  --tier-epic:       #B794F6;
  --tier-legendary:  var(--gold);
  --tier-mythic:     #F5A4D0;

  /* ---------- Semantic ---------- */
  --bg:              var(--ink-obsidian);
  --bg-elevated:     var(--ink-charcoal);
  --surface:         var(--ink-midnight);
  --text:            var(--ivory);
  --text-muted:      var(--ivory-muted);
  --text-dim:        var(--ivory-dim);
  --accent:          var(--gold);
  --accent-hover:    var(--gold-light);
  --border:          var(--ink-slate);
  --border-soft:     rgba(245, 239, 228, 0.08);
  --border-gold:     rgba(212, 184, 135, 0.25);

  /* ---------- Status / Semantic colors ---------- */
  --color-success:     #22c55e;
  --color-success-bg:  rgba(34, 197, 94, 0.12);
  --color-error:       #ef4444;
  --color-error-bg:    rgba(239, 68, 68, 0.12);
  --color-warning:     #f59e0b;
  --color-warning-bg:  rgba(245, 158, 11, 0.12);

  /* ---------- Typography ────────────────────────────────────────────────
   * Loaded via Google Fonts (canonical URL embedded in every .html head).
   * Weights loaded: Fraunces 300-700 (variable, italic), Inter 300/400/500/600/700,
   * JetBrains Mono 400/500/700, IBM Plex Sans Thai 300/400/500/700,
   * Noto Serif Thai 300/400/500/700. Anything outside these will faux-bold.
   *
   * Fallback chain order: web font → matching language script font → system. */
  --font-display:    'Fraunces', 'Noto Serif Thai', Georgia, 'Times New Roman', serif;
  --font-body:       'Inter', 'IBM Plex Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:       'JetBrains Mono', 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  /* Modular scale: 1.250 (major third) — formal, confident */
  --text-xs:         0.75rem;     /* 12px */
  --text-sm:         0.875rem;    /* 14px */
  --text-base:       1rem;        /* 16px */
  --text-md:         1.125rem;    /* 18px */
  --text-lg:         1.375rem;    /* 22px */
  --text-xl:         1.75rem;     /* 28px */
  --text-2xl:        2.25rem;     /* 36px */
  --text-3xl:        3rem;        /* 48px */
  --text-4xl:        4rem;        /* 64px */
  --text-5xl:        5.5rem;      /* 88px */
  --text-6xl:        7.5rem;      /* 120px */

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tightest: -0.04em;
  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.08em;
  --tracking-widest:   0.22em;

  /* ---------- Spacing (4px base) ---------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;
  --sp-11: 12rem;
  --sp-12: 5rem;   /* section padding */
  --sp-16: 4rem;   /* hero inner padding */

  /* ---------- Layout ---------- */
  --container:       1280px;
  --container-wide:  1480px;
  --gutter:          clamp(1.25rem, 4vw, 2.5rem);
  --nav-height:      72px;
  --nav-h:           72px;   /* alias */
  --ticker-h:        46px;

  /* ---------- Radius ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---------- Shadow (all warm, never cold blue) ---------- */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:    0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg:    0 20px 60px rgba(0,0,0,0.55);
  --shadow-gold:  0 0 40px rgba(212, 184, 135, 0.15);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04);

  /* ---------- Motion ---------- */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout:    cubic-bezier(0.76, 0, 0.24, 1);
  --ease-luxe:     cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:      160ms;
  --dur-base:      320ms;
  --dur-slow:      640ms;
  --dur-cinema:    1200ms;

  /* ---------- Gradients ---------- */
  --grad-gold:     linear-gradient(135deg, #E8D4A8 0%, #D4B887 45%, #8B6F3F 100%);
  --grad-gold-soft:linear-gradient(180deg, rgba(212,184,135,0.12), rgba(212,184,135,0) 70%);
  --grad-hero:     radial-gradient(1200px 800px at 70% 20%, rgba(212,184,135,0.10), transparent 60%),
                   radial-gradient(900px 600px at 20% 80%, rgba(31,73,89,0.18), transparent 60%);
  --grad-fade-b:   linear-gradient(180deg, transparent, var(--ink-obsidian));
  --grad-fade-t:   linear-gradient(0deg, transparent, var(--ink-obsidian));
}

/* ---------- Light Mode Theme ---------- */
[data-theme="light"] {
  /* Ink palette → warm ivory surfaces. Spread the surface tones a bit
   * wider so panels visibly differ from the page background — was too
   * flat before, "everything blends together". */
  --ink-void:        #FAF6EE;   /* page background — slightly lifted */
  --ink-obsidian:    #FFFFFF;   /* card / panel — pure white for clean separation */
  --ink-midnight:    #F4EFE3;
  --ink-charcoal:    #ECE5D6;
  --ink-graphite:    #E2DAC8;
  --ink-slate:       rgba(60, 45, 20, 0.28);
  --ink-fog:         rgba(60, 45, 20, 0.16);

  /* Ivory palette → dark text. Each step now passes WCAG AA on the
   * lifted background. */
  --ivory:           #0E0B05;   /* primary text, ~16:1 on FAF6EE */
  --ivory-soft:      #1F1A0F;   /* near-primary / large headings */
  --ivory-muted:     #4A4029;   /* secondary text — was #6B6048 (~5:1), now ~7.4:1 */
  --ivory-dim:       #6F6346;   /* metadata / hints — was #9A8E7A (~3.9:1, fail), now ~5.1:1 (pass) */

  /* Semantic */
  --bg:              #FAF6EE;
  --bg-elevated:     #FFFFFF;   /* white panels on cream page → strong separation */
  --surface:         #FFFFFF;
  --text:            #0E0B05;
  --text-muted:      #4A4029;
  --text-dim:        #6F6346;
  --border:          rgba(60, 45, 20, 0.18);
  --border-soft:     rgba(60, 45, 20, 0.10);
  --border-gold:     rgba(139, 111, 63, 0.45);

  /* Shadows → warm brown tones */
  --shadow-sm:    0 1px 3px rgba(60, 40, 10, 0.10);
  --shadow-md:    0 8px 24px rgba(60, 40, 10, 0.12);
  --shadow-lg:    0 20px 60px rgba(60, 40, 10, 0.16);
  --shadow-gold:  0 0 40px rgba(139, 111, 63, 0.18);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.85);

  /* Gradients */
  --grad-fade-b:    linear-gradient(180deg, transparent, #F9F5EE);
  --grad-fade-t:    linear-gradient(0deg,   transparent, #F9F5EE);
  --grad-gold-soft: linear-gradient(180deg, rgba(139,111,63,0.09), rgba(139,111,63,0) 70%);
  --grad-hero:      radial-gradient(1200px 800px at 70% 20%, rgba(212,184,135,0.18), transparent 60%),
                    radial-gradient(900px 600px at 20% 80%, rgba(31,73,89,0.08), transparent 60%);
}

/* ── Sub-Brand Palette (Finisit Ecosystem) ────────────────────── */

/* FinShark Collection — NFT identity */
:root {
  --fs-gold:         #D4AF27;
  --fs-gold-lt:      #E8CA60;
  --fs-navy:         #060C14;
  --fs-ocean:        #0D1F2D;
  --fs-teal:         #3FAFC4;
  --fs-glow:         rgba(212,175,39,0.15);
  --fs-border:       rgba(212,175,39,0.25);

  /* NisitSorngraph — Technical analysis */
  --ns-gold:         #D4A737;
  --ns-gold-lt:      #E6C35C;
  --ns-dark:         #0B1928;
  --ns-green:        #1D5C30;
  --ns-green-lt:     #22A35A;
  --ns-glow:         rgba(212,167,55,0.12);
  --ns-border:       rgba(212,167,55,0.22);

  /* TradeTongkam — Gold signals */
  --tk-gold:         #D4A737;
  --tk-gold-lt:      #F0C040;
  --tk-amber:        #B8860B;
  --tk-up:           #3DB87A;
  --tk-down:         #E05555;
  --tk-glow:         rgba(212,167,55,0.12);
  --tk-border:       rgba(212,167,55,0.20);

  /* Fintastic Returns — Board game / educational */
  --fr-blue:         #4766E1;
  --fr-blue-lt:      #6B87F0;
  --fr-teal:         #0B4A4A;
  --fr-gold:         #D4AF27;
  --fr-glow:         rgba(71,102,225,0.15);
  --fr-border:       rgba(71,102,225,0.25);

  /* Shared brand token (overridden per page) */
  --brand:           var(--fs-gold);
  --brand-glow:      var(--fs-glow);
  --brand-border:    var(--fs-border);
}

/* ---------- Thai-script size compensation ────────────────────────────────
 * Thai glyphs have a smaller visual size than Latin at the same px due to
 * their geometry (no vertical descenders/ascenders the way Latin has).
 * When the page is rendered in Thai (html[lang="th"], set by the language
 * toggle), bump the body and display font sizes ~6-8% so the visual
 * weight matches the Latin layout. Also tighten letter-spacing since
 * Thai doesn't benefit from the same negative tracking as Latin display. */
:root[lang="th"] body,
:root[lang="th"] p,
:root[lang="th"] li,
:root[lang="th"] input,
:root[lang="th"] textarea,
:root[lang="th"] select,
:root[lang="th"] button {
  font-size: 1.06em;
  letter-spacing: 0;
}
:root[lang="th"] h1,
:root[lang="th"] h2,
:root[lang="th"] h3,
:root[lang="th"] .hero__title,
:root[lang="th"] .token-hero__title,
:root[lang="th"] .nft-hero h1,
:root[lang="th"] .token-cta__title {
  letter-spacing: -0.01em;  /* Thai needs lighter tracking than Latin -0.04em */
  line-height: 1.2;          /* Thai tone marks need slightly more vertical room */
}

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