/* ============================================================
   AlpharvestPro Design System — Core Tokens
   v0.1.0 · 2026-04-19
   Shared across .com · .win · .vip
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600&family=Noto+Sans+JP:wght@400;500;700&family=Noto+Sans+TC:wght@400;500;700&display=swap');

/* ------------------------------------------------------------
   Root — defaults to Light Editorial mode
   ------------------------------------------------------------ */
:root {
  /* Typography stacks */
  --apv-font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Noto Serif JP", serif;
  --apv-font-sans:  "Inter", "Noto Sans JP", "Noto Sans TC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --apv-font-mono:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* Type scale (editorial) */
  --apv-text-xs:   12px;
  --apv-text-sm:   14px;
  --apv-text-base: 16px;
  --apv-text-md:   18px;
  --apv-text-lg:   22px;
  --apv-text-xl:   28px;
  --apv-text-2xl:  36px;
  --apv-text-3xl:  48px;
  --apv-text-4xl:  64px;

  /* Line-height */
  --apv-lh-tight: 1.15;
  --apv-lh-snug:  1.35;
  --apv-lh-base:  1.55;
  --apv-lh-loose: 1.75;

  /* Spacing scale (4px grid) */
  --apv-space-1:  4px;
  --apv-space-2:  8px;
  --apv-space-3:  12px;
  --apv-space-4:  16px;
  --apv-space-5:  24px;
  --apv-space-6:  32px;
  --apv-space-7:  40px;
  --apv-space-8:  48px;
  --apv-space-10: 64px;
  --apv-space-12: 96px;

  /* Radii */
  --apv-radius-sm:   4px;
  --apv-radius-md:   8px;
  --apv-radius-lg:   16px;
  --apv-radius-pill: 999px;

  /* ---- Light Editorial palette (default) ---- */
  --apv-bg-base:         #FAFAF7;
  --apv-bg-surface:      #FFFFFF;
  --apv-bg-subtle:       #F4F3EE;
  --apv-ink-primary:     #0A1628;
  --apv-ink-secondary:   #475569;
  --apv-ink-tertiary:    #94A3B8;
  --apv-accent-primary:  #E8A317;   /* amber */
  --apv-accent-secondary:#1E3A5F;   /* navy */
  --apv-bull:            #047857;
  --apv-bear:            #B91C1C;
  --apv-border:          #E5E7EB;
  --apv-border-strong:   #CBD5E1;

  /* Domain tertiary accent — set per-domain below */
  --apv-accent-tertiary: transparent;
  --apv-accent-tertiary-soft: transparent;

  /* Effects */
  --apv-focus-ring:  color-mix(in srgb, var(--apv-accent-primary) 42%, transparent);
  --apv-shadow-sm:   0 1px 2px rgba(10, 22, 40, 0.06);
  --apv-shadow-md:   0 4px 12px rgba(10, 22, 40, 0.08);
  --apv-shadow-lg:   0 12px 32px rgba(10, 22, 40, 0.12);
  --apv-shadow-ring: 0 0 0 3px var(--apv-focus-ring);

  /* Motion */
  --apv-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --apv-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --apv-dur-fast:    120ms;
  --apv-dur-base:    220ms;
  --apv-dur-slow:    420ms;
}

/* ------------------------------------------------------------
   Dark Terminal mode — dashboards · heatmaps · reports · VIP
   ------------------------------------------------------------ */
[data-theme="dark"] {
  --apv-bg-base:         #0A1628;
  --apv-bg-surface:      #112240;
  --apv-bg-subtle:       #0F1B30;
  --apv-ink-primary:     #E6EDF3;
  --apv-ink-secondary:   #8892B0;
  --apv-ink-tertiary:    #64748B;
  --apv-accent-primary:  #F4B740;   /* brighter amber */
  --apv-accent-secondary:#1E3A5F;
  --apv-bull:            #00C48C;
  --apv-bear:            #EF4444;
  --apv-border:          #1E3A5F;
  --apv-border-strong:   #2A4A7A;

  --apv-shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.40);
  --apv-shadow-md:   0 4px 12px rgba(0, 0, 0, 0.40);
  --apv-shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.50);
}

/* Respect OS preference only when user hasn't set an explicit theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --apv-bg-base:         #0A1628;
    --apv-bg-surface:      #112240;
    --apv-bg-subtle:       #0F1B30;
    --apv-ink-primary:     #E6EDF3;
    --apv-ink-secondary:   #8892B0;
    --apv-ink-tertiary:    #64748B;
    --apv-accent-primary:  #F4B740;
    --apv-accent-secondary:#1E3A5F;
    --apv-bull:            #00C48C;
    --apv-bear:            #EF4444;
    --apv-border:          #1E3A5F;
    --apv-border-strong:   #2A4A7A;
  }
}

/* ------------------------------------------------------------
   Domain tertiary accents — opt-in via <body data-domain="...">
   ------------------------------------------------------------ */
[data-domain="com"] {
  --apv-accent-tertiary: transparent;
  --apv-accent-tertiary-soft: transparent;
}

[data-domain="win"] {
  --apv-accent-tertiary:      #C2410C;   /* cinnabar — dividers, flag ribbons */
  --apv-accent-tertiary-soft: #FED7AA;
}

[data-domain="vip"] {
  --apv-accent-tertiary:      #D4AF37;   /* gold foil — CTAs only */
  --apv-accent-tertiary-soft: #F5E6A8;
  --apv-gradient-vip: linear-gradient(135deg, #D4AF37 0%, #F4B740 55%, #E8A317 100%);
}

/* ------------------------------------------------------------
   Root wrapper — opt-in shell
   Usage: <body class="apv-root" data-theme="..." data-domain="...">
   ------------------------------------------------------------ */
.apv-root {
  background: var(--apv-bg-base);
  color: var(--apv-ink-primary);
  font-family: var(--apv-font-sans);
  font-size: var(--apv-text-base);
  line-height: var(--apv-lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.apv-root h1, .apv-root h2, .apv-root h3, .apv-root h4 {
  font-family: var(--apv-font-serif);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: var(--apv-lh-tight);
  color: var(--apv-ink-primary);
}

.apv-root h1 { font-size: var(--apv-text-3xl); }
.apv-root h2 { font-size: var(--apv-text-2xl); }
.apv-root h3 { font-size: var(--apv-text-xl); }
.apv-root h4 { font-size: var(--apv-text-lg); }

.apv-root a {
  color: var(--apv-accent-secondary);
  text-decoration-color: color-mix(in srgb, var(--apv-accent-primary) 60%, transparent);
  text-underline-offset: 3px;
  transition: color var(--apv-dur-fast) var(--apv-ease-out);
}
.apv-root a:hover { color: var(--apv-accent-primary); }
[data-theme="dark"].apv-root a,
[data-theme="dark"] .apv-root a { color: var(--apv-accent-primary); }

/* ------------------------------------------------------------
   Tabular numerics — tickers · prices · RS scores · percents
   ------------------------------------------------------------ */
.apv-num, .apv-ticker, .apv-price, .apv-rs, .apv-pct {
  font-family: var(--apv-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: 0;
}

/* Colored % movement helpers */
.apv-bull-text { color: var(--apv-bull); }
.apv-bear-text { color: var(--apv-bear); }

/* ------------------------------------------------------------
   Bilingual toggle scaffolding
   Usage: <body data-lang="en"> + <span data-lang="en|ja|zh">
   ------------------------------------------------------------ */
[data-lang][data-lang="en"] [data-lang="ja"],
[data-lang][data-lang="en"] [data-lang="zh"] { display: none; }
[data-lang][data-lang="ja"] [data-lang="en"],
[data-lang][data-lang="ja"] [data-lang="zh"] { display: none; }
[data-lang][data-lang="zh"] [data-lang="en"],
[data-lang][data-lang="zh"] [data-lang="ja"] { display: none; }

/* Fallback when body has no data-lang yet — rely on <html lang>  */
html[lang^="ja"] body:not([data-lang]) [data-lang="en"],
html[lang^="ja"] body:not([data-lang]) [data-lang="zh"] { display: none; }
html[lang^="zh"] body:not([data-lang]) [data-lang="en"],
html[lang^="zh"] body:not([data-lang]) [data-lang="ja"] { display: none; }
html[lang^="en"] body:not([data-lang]) [data-lang="ja"],
html[lang^="en"] body:not([data-lang]) [data-lang="zh"] { display: none; }

/* ------------------------------------------------------------
   Accessibility — reduced motion & focus
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --apv-dur-fast: 0ms;
    --apv-dur-base: 0ms;
    --apv-dur-slow: 0ms;
  }
}

.apv-root :focus-visible {
  outline: 2px solid var(--apv-accent-primary);
  outline-offset: 2px;
  border-radius: var(--apv-radius-sm);
}