/* PredictLens — Design Tokens
 * Source of truth: source code/predictlens_ios/PredictLens/Resources/DesignSystem.swift
 * Typography split: SF Pro (app) vs Source Serif 4 + JetBrains Mono (marketing).
 */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Brand ---------- */
  --pl-navy:        #0D1B3E;
  --pl-navy-mid:    #112244;
  --pl-navy-card:   #1A2B52;

  --pl-teal:        #00897B;
  --pl-teal-dark:   #00695C;
  --pl-teal-light:  #E0F2F1;
  --pl-teal-15:     rgba(0,137,123,0.15);
  --pl-teal-25:     rgba(0,137,123,0.25);

  --pl-gold:        #F9A825;

  /* ---------- Probability scale ---------- */
  --pl-prob-green:  #2E7D32;
  --pl-prob-amber:  #F9A825;
  --pl-prob-red:    #C62828;
  --pl-green-lt:    #E8F5E9;
  --pl-red-lt:      #FFEBEE;
  --pl-orange-lt:   #FFF3E0;

  /* ---------- Neutrals ---------- */
  --pl-bg:          #F5F6FA;
  --pl-card:        #FFFFFF;
  --pl-slate:       #37474F;   /* body */
  --pl-text-muted:  #607D8B;   /* secondary */
  --pl-gray-md:     #B0BEC5;   /* disabled */
  --pl-gray-light:  #ECEFF1;   /* hairlines, dividers, gridlines */

  /* ---------- Semantic foreground / background ---------- */
  --fg-primary:     var(--pl-navy);
  --fg-secondary:   var(--pl-text-muted);
  --fg-tertiary:    var(--pl-gray-md);
  --fg-accent:      var(--pl-teal);
  --fg-warning:     var(--pl-prob-red);
  --fg-on-navy:     #FFFFFF;

  --bg-canvas:      var(--pl-bg);
  --bg-header:      var(--pl-navy);
  --bg-card:        var(--pl-card);

  /* ---------- Type families ---------- */
  --font-app:       -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", sans-serif;
  --font-serif:     "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --font-mono:      "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* ---------- App type ramp (SF Pro) ---------- */
  --t-app-title:        700 22px/1.2 var(--font-app);   /* screen title */
  --t-app-headline:     700 18px/1.3 var(--font-app);   /* section header */
  --t-app-body:         500 14px/1.4 var(--font-app);   /* card title */
  --t-app-value:        900 26px/1   var(--font-app);   /* big % */
  --t-app-value-sm:     700 13px/1.2 var(--font-app);
  --t-app-caption:      500 12px/1.4 var(--font-app);
  --t-app-footnote:     500 11px/1.4 var(--font-app);
  --t-app-eyebrow:      600 12px/1   var(--font-app);   /* UPPERCASE + 0.4 letter-spacing */
  --t-app-tag:          700 10px/1   var(--font-app);

  /* ---------- Marketing type ramp ---------- */
  --t-mkt-display:      700 96px/1.02 var(--font-serif);   /* hero headline */
  --t-mkt-display-lg:   700 108px/1.02 var(--font-serif);
  --t-mkt-sub:          500 28px/1.45 var(--font-mono);    /* // comment style */
  --t-mkt-eyebrow:      500 22px/1 var(--font-mono);       /* masthead */
  --t-mkt-footer:       500 20px/1 var(--font-mono);

  /* ---------- Spacing (4-based) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;   /* card gutter, app content padding */
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;  /* marketing content gutter */

  /* ---------- Radii ---------- */
  --r-pill: 999px;
  --r-tab: 18px;      /* category pill */
  --r-card: 14px;     /* market card, insight card */
  --r-input: 10px;    /* search field */
  --r-chip: 6px;      /* tag chip (POLY, KAL) */
  --r-bezel-in: 60px;
  --r-bezel-out: 78px;

  /* ---------- Elevation ---------- */
  --sh-card:   0 1px 4px rgba(0,0,0,0.07);
  --sh-device: 0 60px 140px rgba(0,0,0,0.55),
               inset 0 0 0 2px rgba(255,255,255,0.06),
               0 0 0 6px #1A1A1A;

  /* ---------- Motion ---------- */
  --ease-std: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-std:  200ms;
}

/* ---------- Semantic block tags ---------- */
h1 { font: var(--t-mkt-display); letter-spacing: -2px; color: var(--fg-on-navy); margin: 0; }
h2 { font: var(--t-app-title); color: var(--fg-primary); margin: 0; }
h3 { font: var(--t-app-headline); color: var(--fg-primary); margin: 0; }
p  { font: var(--t-app-body); color: var(--pl-slate); margin: 0; }
code, .mono { font-family: var(--font-mono); }