/* ============================================================
   4CastMachine — Brand Kit C: Hybrid (TEST)
   Light / Dark (navy) / Charcoal (Chrome-inspired) — 3 themes.
   Royal Blue #4169E1 heritage anchor.
   ============================================================ */

/* ---------- 1. CORE PALETTE ---------- */
:root {
  --fm-blue-50:  #EEF3FF;
  --fm-blue-100: #DCE6FE;
  --fm-blue-200: #B9CDFE;
  --fm-blue-300: #8AAEFB;
  --fm-blue-400: #5D8BF4;
  --fm-blue-500: #4169E1;
  --fm-blue-600: #3656C7;
  --fm-blue-700: #2A45A5;
  --fm-blue-800: #1F367F;
  --fm-blue-900: #15275E;
  --fm-blue-950: #0B1840;

  --fm-navy-400: #1E3D6F;
  --fm-navy-500: #00437F;
  --fm-navy-600: #003666;
  --fm-navy-700: #002A50;
  --fm-navy-800: #001E3A;
  --fm-navy-900: #001226;

  --fm-crimson-300: #F47A95;
  --fm-crimson-500: #DC143C;
  --fm-crimson-600: #B3102F;
  --fm-crimson-700: #890C24;

  --fm-forecast-300: #C7DC4A;
  --fm-forecast-400: #B0CC2F;
  --fm-forecast-500: #9ACD32;
  --fm-forecast-600: #7BA822;
  --fm-forecast-700: #5F8519;

  --fm-green-500: #1A976A;
  --fm-amber-400: #F5B547;
  --fm-amber-500: #E89A1F;

  --fm-gray-0:   #FFFFFF;
  --fm-gray-50:  #F8F9FB;
  --fm-gray-100: #F1F5FA;
  --fm-gray-150: #E8EDF3;
  --fm-gray-200: #DDE3EB;
  --fm-gray-300: #C5CDD8;
  --fm-gray-400: #97A0AE;
  --fm-gray-500: #6B7484;
  --fm-gray-600: #4D5562;
  --fm-gray-700: #353A45;
  --fm-gray-800: #21252D;
  --fm-gray-900: #15181E;
  --fm-gray-950: #0A0C10;

  /* Chrome dark palette (from apps/web-app/src/globals.css) */
  --fm-chrome-bg:           #202124;
  --fm-chrome-surface:      #292a2d;
  --fm-chrome-surface-hover:#35363a;
  --fm-chrome-border:       #3c4043;
  --fm-chrome-border-strong:#5f6368;
  --fm-chrome-text-muted:   #9aa0a6;
  --fm-chrome-text-muted2:  #80868b;
  --fm-chrome-text-soft:    #bdc1c6;
  --fm-chrome-text:         #e8eaed;
  --fm-chrome-text-strong:  #f1f3f4;
}

/* ---------- 2. LIGHT MODE ---------- */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --surface-canvas: var(--fm-gray-0);
  --surface-1:      var(--fm-gray-50);
  --surface-2:      var(--fm-gray-100);
  --surface-3:      var(--fm-gray-150);
  --surface-navy:       var(--fm-navy-700);
  --surface-navy-dark:  var(--fm-navy-800);
  --surface-navy-darker:var(--fm-navy-900);
  --surface-inverse:    var(--fm-navy-800);
  --surface-glass:      rgba(255, 255, 255, 0.72);

  --text-primary:   var(--fm-gray-900);
  --text-secondary: var(--fm-gray-600);
  --text-tertiary:  var(--fm-gray-500);
  --text-disabled:  var(--fm-gray-400);
  --text-on-brand:  var(--fm-gray-0);
  --text-on-inverse:var(--fm-gray-50);
  --text-link:      var(--fm-blue-500);
  --text-link-hover:var(--fm-blue-600);

  --border-subtle:  var(--fm-gray-150);
  --border-default: var(--fm-gray-200);
  --border-strong:  var(--fm-gray-300);
  --border-brand:   var(--fm-blue-500);
  --border-focus:   var(--fm-blue-500);

  --brand-primary:        var(--fm-blue-500);
  --brand-primary-hover:  var(--fm-blue-600);
  --brand-primary-active: var(--fm-blue-700);
  --brand-primary-soft:   var(--fm-blue-50);
  --brand-secondary:        var(--fm-navy-500);
  --brand-secondary-hover:  var(--fm-navy-600);
  --brand-accent:        var(--fm-crimson-500);
  --brand-accent-hover:  var(--fm-crimson-600);
  --brand-accent-soft:   #FDE6EB;

  --bullish:        var(--fm-blue-500);
  --bullish-soft:   var(--fm-blue-50);
  --bullish-strong: var(--fm-blue-700);
  --bearish:        var(--fm-crimson-500);
  --bearish-soft:   #FDE6EB;
  --bearish-strong: var(--fm-crimson-700);
  --forecast:       var(--fm-forecast-500);
  --forecast-soft:  #F7FBE3;
  --forecast-strong:var(--fm-forecast-700);
  --forecast-on-dark: var(--fm-forecast-300);
  --neutral-signal: var(--fm-amber-500);
  --neutral-signal-soft: #FCF1DA;
  --state-success:  var(--fm-green-500);
  --state-warning:  var(--fm-amber-500);
  --state-danger:   var(--fm-crimson-500);
  --state-info:     var(--fm-blue-500);

  --shadow-xs:  0 1px 1px 0 rgba(9, 9, 11, 0.04);
  --shadow-sm:  0 1px 3px 0 rgba(9, 9, 11, 0.06), 0 1px 2px -1px rgba(9, 9, 11, 0.04);
  --shadow-md:  0 6px 16px -3px rgba(9, 9, 11, 0.10), 0 2px 6px -2px rgba(9, 9, 11, 0.06);
  --shadow-lg:  0 18px 36px -8px rgba(9, 9, 11, 0.14), 0 6px 12px -4px rgba(9, 9, 11, 0.08);
  --shadow-xl:  0 32px 64px -16px rgba(9, 9, 11, 0.22), 0 12px 24px -8px rgba(9, 9, 11, 0.10);
  --shadow-brand: 0 16px 40px -10px rgba(65, 105, 225, 0.40);
  --shadow-glow:  0 0 0 1px rgba(65,105,225,0.20), 0 0 40px -8px rgba(65,105,225,0.45);
  --shadow-navy:  0 16px 48px -12px rgba(0, 30, 58, 0.42);
  --shadow-focus-ring: 0 0 0 4px rgba(65, 105, 225, 0.22);

  --text-shadow-display: 4px 4px 12px rgba(0, 30, 58, 0.18), 2px 2px 4px rgba(0, 0, 0, 0.10);
  --text-shadow-on-navy: 4px 4px 16px rgba(0, 0, 0, 0.35), 2px 2px 4px rgba(0, 0, 0, 0.20);

  --grad-brand:    linear-gradient(135deg, var(--fm-blue-500) 0%, var(--fm-navy-600) 100%);
  --grad-navy:     linear-gradient(180deg, var(--fm-navy-700) 0%, var(--fm-navy-900) 100%);
  --grad-quad-1:   linear-gradient(180deg, #1F407F 0%, #15326B 100%);
  --grad-quad-2:   linear-gradient(180deg, #15326B 0%, #0D2451 100%);
  --grad-quad-3:   linear-gradient(180deg, #0D2451 0%, #061633 100%);
  --grad-forecast: linear-gradient(135deg, var(--fm-forecast-500) 0%, var(--fm-forecast-300) 100%);
  --grad-hero:     radial-gradient(120% 80% at 100% 0%, rgba(65,105,225,0.10) 0%, transparent 55%),
                   radial-gradient(80% 60% at 0% 100%, rgba(154,205,50,0.07) 0%, transparent 60%);
  --grad-soft:     linear-gradient(180deg, var(--fm-gray-50) 0%, var(--fm-gray-100) 100%);
}

/* ---------- 3. DARK MODE (Navy) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-canvas: #0A0E1A;
  --surface-1:      #10162A;
  --surface-2:      #161D36;
  --surface-3:      #1D2644;
  --surface-navy:       #0F2952;
  --surface-navy-dark:  #0A1F44;
  --surface-navy-darker:#06143A;
  --surface-inverse:    var(--fm-gray-50);
  --surface-glass:      rgba(16, 22, 42, 0.72);

  --text-primary:   #E8ECF5;
  --text-secondary: #A8B0C2;
  --text-tertiary:  #7A8398;
  --text-disabled:  #4D556B;
  --text-on-brand:  #FFFFFF;
  --text-on-inverse:var(--fm-gray-900);
  --text-link:      var(--fm-blue-400);
  --text-link-hover:var(--fm-blue-300);

  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.18);
  --border-brand:   var(--fm-blue-400);
  --border-focus:   var(--fm-blue-400);

  --brand-primary:        var(--fm-blue-400);
  --brand-primary-hover:  var(--fm-blue-300);
  --brand-primary-active: var(--fm-blue-200);
  --brand-primary-soft:   rgba(93, 139, 244, 0.14);
  --brand-secondary:        #5B7CB8;
  --brand-secondary-hover:  #7A95C8;
  --brand-accent:        #FF4D6D;
  --brand-accent-hover:  #FF7187;
  --brand-accent-soft:   rgba(255, 77, 109, 0.12);

  --bullish:        var(--fm-blue-400);
  --bullish-soft:   rgba(93, 139, 244, 0.14);
  --bullish-strong: var(--fm-blue-300);
  --bearish:        #FF4D6D;
  --bearish-soft:   rgba(255, 77, 109, 0.14);
  --bearish-strong: #FF6B8A;
  --forecast:       #B8E04A;
  --forecast-soft:  rgba(184, 224, 74, 0.14);
  --forecast-strong:#C7DC4A;
  --forecast-on-dark: #B8E04A;
  --neutral-signal: var(--fm-amber-400);
  --neutral-signal-soft: rgba(245, 181, 71, 0.14);
  --state-success:  #2BB97D;
  --state-warning:  var(--fm-amber-400);
  --state-danger:   #FF4D6D;
  --state-info:     var(--fm-blue-400);

  --shadow-xs:  0 1px 2px 0 rgba(0, 0, 0, 0.40);
  --shadow-sm:  0 1px 3px 0 rgba(0, 0, 0, 0.45), 0 1px 2px -1px rgba(0, 0, 0, 0.30);
  --shadow-md:  0 6px 18px -3px rgba(0, 0, 0, 0.60), 0 2px 6px -2px rgba(0, 0, 0, 0.40);
  --shadow-lg:  0 20px 48px -8px rgba(0, 0, 0, 0.70);
  --shadow-xl:  0 40px 80px -16px rgba(0, 0, 0, 0.80);
  --shadow-brand: 0 16px 48px -10px rgba(93, 139, 244, 0.55);
  --shadow-glow:  0 0 0 1px rgba(93, 139, 244, 0.30), 0 0 50px -8px rgba(93, 139, 244, 0.55);
  --shadow-navy:  0 24px 64px -16px rgba(0, 0, 0, 0.80);
  --shadow-focus-ring: 0 0 0 4px rgba(93, 139, 244, 0.32);

  --text-shadow-display: 4px 4px 18px rgba(0, 0, 0, 0.55), 2px 2px 4px rgba(0, 0, 0, 0.30);
  --text-shadow-on-navy: 4px 4px 22px rgba(0, 0, 0, 0.65), 2px 2px 6px rgba(0, 0, 0, 0.40);

  --grad-brand:    linear-gradient(135deg, var(--fm-blue-400) 0%, #5B7CB8 100%);
  --grad-navy:     linear-gradient(180deg, #0A1F44 0%, #06143A 100%);
  --grad-quad-1:   linear-gradient(180deg, #15326B 0%, #0A1F44 100%);
  --grad-quad-2:   linear-gradient(180deg, #0F2952 0%, #06143A 100%);
  --grad-quad-3:   linear-gradient(180deg, #0A1F44 0%, #02091F 100%);
  --grad-forecast: linear-gradient(135deg, #B8E04A 0%, #C7DC4A 100%);
  --grad-hero:     radial-gradient(120% 80% at 100% 0%, rgba(93,139,244,0.18) 0%, transparent 55%),
                   radial-gradient(80% 60% at 0% 100%, rgba(184,224,74,0.08) 0%, transparent 60%);
  --grad-soft:     linear-gradient(180deg, var(--surface-1) 0%, var(--surface-2) 100%);
}

/* ---------- 3b. CHARCOAL MODE (Chrome-inspired) ---------- */
:root[data-theme="charcoal"] {
  color-scheme: dark;
  --surface-canvas: var(--fm-chrome-bg);
  --surface-1:      var(--fm-chrome-surface);
  --surface-2:      var(--fm-chrome-surface-hover);
  --surface-3:      var(--fm-chrome-border);
  --surface-navy:       #1F407F;
  --surface-navy-dark:  #15326B;
  --surface-navy-darker:#0D2451;
  --surface-inverse:    var(--fm-chrome-text-strong);
  --surface-glass:      rgba(32, 33, 36, 0.85);

  --text-primary:   var(--fm-chrome-text);
  --text-secondary: var(--fm-chrome-text-soft);
  --text-tertiary:  var(--fm-chrome-text-muted);
  --text-disabled:  var(--fm-chrome-text-muted2);
  --text-on-brand:  #FFFFFF;
  --text-on-inverse:var(--fm-chrome-bg);
  --text-link:      var(--fm-blue-400);
  --text-link-hover:var(--fm-blue-300);

  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: var(--fm-chrome-border);
  --border-strong:  var(--fm-chrome-border-strong);
  --border-brand:   var(--fm-blue-500);
  --border-focus:   var(--fm-blue-500);

  --brand-primary:        var(--fm-blue-500);
  --brand-primary-hover:  var(--fm-blue-400);
  --brand-primary-active: var(--fm-blue-300);
  --brand-primary-soft:   rgba(65, 105, 225, 0.16);
  --brand-secondary:        #5B7CB8;
  --brand-secondary-hover:  #7A95C8;
  --brand-accent:        var(--fm-crimson-500);
  --brand-accent-hover:  var(--fm-crimson-300);
  --brand-accent-soft:   rgba(220, 20, 60, 0.16);

  --bullish:        var(--fm-blue-500);
  --bullish-soft:   rgba(65, 105, 225, 0.16);
  --bullish-strong: var(--fm-blue-400);
  --bearish:        var(--fm-crimson-500);
  --bearish-soft:   rgba(220, 20, 60, 0.16);
  --bearish-strong: var(--fm-crimson-300);
  --forecast:       var(--fm-forecast-500);
  --forecast-soft:  rgba(154, 205, 50, 0.16);
  --forecast-strong:var(--fm-forecast-400);
  --forecast-on-dark: var(--fm-forecast-300);
  --neutral-signal: var(--fm-amber-500);
  --neutral-signal-soft: rgba(245, 181, 71, 0.16);
  --state-success:  var(--fm-green-500);
  --state-warning:  var(--fm-amber-500);
  --state-danger:   var(--fm-crimson-500);
  --state-info:     var(--fm-blue-500);

  --shadow-xs:  0 1px 2px 0 rgba(0, 0, 0, 0.30);
  --shadow-sm:  0 1px 3px 0 rgba(0, 0, 0, 0.35), 0 1px 2px -1px rgba(0, 0, 0, 0.22);
  --shadow-md:  0 6px 16px -3px rgba(0, 0, 0, 0.45), 0 2px 6px -2px rgba(0, 0, 0, 0.28);
  --shadow-lg:  0 18px 36px -8px rgba(0, 0, 0, 0.55);
  --shadow-xl:  0 32px 64px -16px rgba(0, 0, 0, 0.70);
  --shadow-brand: 0 16px 40px -10px rgba(65, 105, 225, 0.40);
  --shadow-glow:  0 0 0 1px rgba(65, 105, 225, 0.24), 0 0 40px -8px rgba(65, 105, 225, 0.45);
  --shadow-navy:  0 16px 48px -12px rgba(0, 0, 0, 0.55);
  --shadow-focus-ring: 0 0 0 4px rgba(65, 105, 225, 0.28);

  --text-shadow-display: 4px 4px 14px rgba(0, 0, 0, 0.40), 2px 2px 4px rgba(0, 0, 0, 0.25);
  --text-shadow-on-navy: 4px 4px 18px rgba(0, 0, 0, 0.50), 2px 2px 4px rgba(0, 0, 0, 0.30);

  --grad-brand:    linear-gradient(135deg, var(--fm-blue-500) 0%, #2A45A5 100%);
  --grad-navy:     linear-gradient(180deg, #1F407F 0%, #142D52 100%);
  --grad-quad-1:   linear-gradient(180deg, #1F407F 0%, #15326B 100%);
  --grad-quad-2:   linear-gradient(180deg, #15326B 0%, #0D2451 100%);
  --grad-quad-3:   linear-gradient(180deg, #0D2451 0%, #061633 100%);
  --grad-forecast: linear-gradient(135deg, var(--fm-forecast-500) 0%, var(--fm-forecast-300) 100%);
  --grad-hero:     radial-gradient(120% 80% at 100% 0%, rgba(65,105,225,0.14) 0%, transparent 55%),
                   radial-gradient(80% 60% at 0% 100%, rgba(154,205,50,0.07) 0%, transparent 60%);
  --grad-soft:     linear-gradient(180deg, var(--surface-1) 0%, var(--surface-2) 100%);
}

/* ---------- 4. TYPOGRAPHY (Kit B's font stack) ---------- */
:root {
  --font-sans-ltr: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-sans-rtl: "Estedad", "Vazirmatn", "IranYekanX", "Geist", -apple-system, "Segoe UI", Tahoma, sans-serif;
  --font-display:  "Geist", "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-mono:     "Geist Mono", "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace;
  --font-tabular:  var(--font-mono);

  --fs-xs:   clamp(0.75rem, 0.71rem + 0.18vw, 0.8125rem);
  --fs-sm:   clamp(0.875rem, 0.83rem + 0.22vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.94rem + 0.30vw, 1.0625rem);
  --fs-lg:   clamp(1.125rem, 1.06rem + 0.32vw, 1.1875rem);
  --fs-xl:   clamp(1.25rem, 1.16rem + 0.45vw, 1.375rem);
  --fs-2xl:  clamp(1.5rem, 1.36rem + 0.70vw, 1.75rem);
  --fs-3xl:  clamp(1.875rem, 1.65rem + 1.13vw, 2.25rem);
  --fs-4xl:  clamp(2.25rem, 1.92rem + 1.65vw, 3rem);
  --fs-5xl:  clamp(3rem, 2.42rem + 2.92vw, 4.5rem);
  --fs-6xl:  clamp(3.75rem, 2.83rem + 4.60vw, 6rem);

  --lh-tight:  1.15;
  --lh-snug:   1.30;
  --lh-normal: 1.55;
  --lh-relaxed:1.75;
  --lh-rtl-normal: 1.85;
  --lh-rtl-relaxed:2.05;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --tracking-tight:   -0.02em;
  --tracking-display: -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
}

/* ---------- 5. SPACING / RADII / MOTION ---------- */
:root {
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  2rem;
  --space-8:  2.5rem;
  --space-9:  3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6rem;
  --space-13: 8rem;

  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-full:9999px;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-instant: 80ms;
  --dur-fast:    150ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;
  --dur-slower:  520ms;

  --content-max:    1200px;
  --content-wide:   1320px;
  --content-narrow: 760px;
  --nav-height:     64px;
}

/* ---------- 6. RESETS & GLOBAL ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans-ltr);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--surface-canvas);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
[dir="rtl"] body { font-family: var(--font-sans-rtl); line-height: var(--lh-rtl-normal); letter-spacing: 0; }

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--text-primary); font-weight: var(--fw-bold); letter-spacing: var(--tracking-display); line-height: var(--lh-tight); }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; line-height: var(--lh-snug); }

p { margin: 0; color: var(--text-secondary); }
a { color: var(--text-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--text-link-hover); }
::selection { background: var(--brand-primary-soft); color: var(--text-primary); }

:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); border-radius: var(--radius-sm); }

.num, .tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--space-6); }
.container-wide   { max-width: var(--content-wide); }
.container-narrow { max-width: var(--content-narrow); }
@media (max-width: 768px) { .container { padding-inline: var(--space-4); } }

section { padding-block: clamp(var(--space-10), 8vw, var(--space-13)); }

.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: var(--space-3);
}
[dir="rtl"] .eyebrow { text-transform: none; letter-spacing: 0; font-weight: var(--fw-bold); }

.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }
.no-wrap      { white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.display-shadow { text-shadow: var(--text-shadow-display); }
.display-shadow-on-navy { text-shadow: var(--text-shadow-on-navy); color: #FFFFFF !important; }

@media (prefers-reduced-motion: no-preference) {
  html.theme-transition,
  html.theme-transition * { transition: background-color 280ms var(--ease-out), color 280ms var(--ease-out), border-color 280ms var(--ease-out) !important; }
}
@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; }
}