/* ============================================================
   ProRoast · Fonts
   ------------------------------------------------------------
   SUBSTITUTION NOTE:
   The product spec calls for "SF Pro Display". SF Pro is licensed
   by Apple and cannot be redistributed/bundled in a design system.
   We substitute ONEST — a clean, neutral grotesk with very close
   metrics and the same calm-iOS feel — plus JetBrains Mono for the
   score numerals.  When you supply SF Pro Display / SF Pro Text
   font files, replace the @import below with local @font-face
   rules (src: url('./fonts/SFProDisplay.woff2')) and update
   --font-display / --font-body in tokens/typography.css.
   ============================================================ */

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

/* ============================================================
   ProRoast · Color tokens
   Dark-first. Spec values honored exactly (slate + blue/purple),
   with the gold "ProRoast" brand layer + glass surfaces added.
   ============================================================ */
:root {
  /* ---- Brand: Gold (the ProRoast signature) ---- */
  --gold-100: #FCEFC0;
  --gold-200: #F7DE97;
  --gold-300: #F2C75F;
  --gold-400: #E9B64A;
  --gold-500: #E0A93B;
  --gold-600: #C98A1C;
  --gold-700: #A8731A;
  --gold-800: #7E5512;
  --gold-900: #5A3D0E;
  /* gold gradient — used on the score numerals, premium marks, wordmark */
  --grad-gold: linear-gradient(100deg, #FCEFC0 0%, #F2C75F 42%, #C98A1C 100%); /* @kind color */
  --grad-gold-soft: linear-gradient(135deg, #F7DE97 0%, #D49E2A 100%); /* @kind color */

  /* ---- AI accent: Blue → Purple (spec) ---- */
  --blue-400: #60A5FA;
  --blue-500: #3B82F6;   /* spec Blue */
  --blue-600: #2563EB;
  --purple-400: #A78BFA;
  --purple-500: #8B5CF6; /* spec Purple */
  --purple-600: #7C3AED;
  /* the AI gradient (spec: #3B82F6 → #8B5CF6) */
  --grad-ai: linear-gradient(100deg, #3B82F6 0%, #8B5CF6 100%); /* @kind color */
  --grad-ai-glow: radial-gradient(circle at 50% 40%, rgba(139,92,246,.45), transparent 65%); /* @kind color */

  /* ---- Navy / slate base (spec) ---- */
  --navy-950: #020617;   /* spec dark background */
  --navy-900: #0F172A;   /* spec Deep Navy */
  --navy-850: #111827;   /* spec dark surface */
  --navy-800: #1E293B;
  --navy-700: #334155;
  --navy-600: #475569;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;  /* spec dark text-secondary */
  --slate-100: #F1F5F9;
  --slate-50:  #F8FAFC;  /* spec light bg / dark text-primary */

  /* ---- Semantic status ---- */
  --success: #54E0A8;
  --success-bg: rgba(84,224,168,.12);
  --danger:  #FB6A6A;
  --danger-bg: rgba(251,106,106,.12);
  --warning: #F6B73C;
  --warning-bg: rgba(246,183,60,.12);
  --info:    #5EC2FF;
  --info-bg: rgba(94,194,255,.12);

  /* ============================================================
     SEMANTIC ALIASES — dark theme (default)
     ============================================================ */
  /* backgrounds */
  --bg-base:    #070813;                 /* app canvas (deepest) */
  --bg-app:     radial-gradient(130% 90% at 80% -10%, #161038 0%, #0B0D22 45%, #070813 100%);
  --bg-elevated:#0C1024;

  /* surfaces */
  --surface-card:   #111827;             /* solid card (spec) */
  --surface-raised: #161D33;
  --surface-sunken: #0A0F20;
  --surface-glass:  rgba(255,255,255,.05);   /* glassmorphism fill */
  --surface-glass-strong: rgba(255,255,255,.08);
  --surface-input:  rgba(255,255,255,.04);

  /* text */
  --text-primary:   #EDEFF7;
  --text-secondary: #9AA0C4;
  --text-tertiary:  #6B7196;
  --text-disabled:  #454B6B;
  --text-on-gold:   #2A1D04;             /* dark ink on gold buttons */
  --text-on-ai:     #FFFFFF;             /* white on AI gradient */
  --text-link:      #8FB4FF;

  /* borders / hairlines */
  --border-subtle:  rgba(255,255,255,.07);
  --border-default: rgba(255,255,255,.12);
  --border-strong:  rgba(255,255,255,.18);
  --border-gold:    rgba(242,199,95,.45);
  --border-ai:      rgba(139,92,246,.40);

  /* focus ring */
  --ring-ai: 0 0 0 3px rgba(139,92,246,.45);
  --ring-gold: 0 0 0 3px rgba(242,199,95,.40);
}

/* ============================================================
   LIGHT THEME — opt-in via [data-theme="light"]
   (spec: bg #F8FAFC, surface #FFF, text #0F172A / #64748B)
   ============================================================ */
[data-theme="light"] {
  --bg-base:    #F8FAFC;
  --bg-app:     radial-gradient(130% 90% at 80% -10%, #EEF2FF 0%, #F8FAFC 55%);
  --bg-elevated:#FFFFFF;

  --surface-card:   #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-sunken: #F1F5F9;
  --surface-glass:  rgba(255,255,255,.65);
  --surface-glass-strong: rgba(255,255,255,.85);
  --surface-input:  #FFFFFF;

  --text-primary:   #0F172A;
  --text-secondary: #64748B;
  --text-tertiary:  #94A3B8;
  --text-disabled:  #CBD5E1;
  --text-on-gold:   #2A1D04;
  --text-on-ai:     #FFFFFF;
  --text-link:      #2563EB;

  --border-subtle:  rgba(15,23,42,.07);
  --border-default: rgba(15,23,42,.12);
  --border-strong:  rgba(15,23,42,.20);
}

/* ============================================================
   ProRoast · Typography tokens
   Display/UI: Onest (SF Pro Display substitute — see fonts.css)
   Numerals/score: JetBrains Mono (tabular, confident)
   ============================================================ */
:root {
  /* families */
  --font-display: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-extra:   800; /* @kind font */

  /* type scale — iOS-leaning, dark-first
     name        size / line-height / tracking */
  --text-display-size: 40px;  --text-display-lh: 1.04; --text-display-ls: -0.03em;
  --text-h1-size:      32px;  --text-h1-lh: 1.08;      --text-h1-ls: -0.025em;
  --text-h2-size:      26px;  --text-h2-lh: 1.12;      --text-h2-ls: -0.02em;
  --text-h3-size:      21px;  --text-h3-lh: 1.2;       --text-h3-ls: -0.015em;
  --text-title-size:   17px;  --text-title-lh: 1.3;    --text-title-ls: -0.01em;
  --text-body-size:    16px;  --text-body-lh: 1.5;     --text-body-ls: 0;
  --text-callout-size: 15px;  --text-callout-lh: 1.45; --text-callout-ls: 0;
  --text-footnote-size:13px;  --text-footnote-lh: 1.4; --text-footnote-ls: 0;
  --text-caption-size: 12px;  --text-caption-lh: 1.35; --text-caption-ls: 0.01em;
  --text-overline-size:11px;  --text-overline-lh: 1.2; --text-overline-ls: 0.16em;

  /* score numeral — the hero */
  --text-score-size:   64px;  --text-score-lh: 1;      --text-score-ls: -0.03em;
}

/* convenience utility classes (optional for cards/specimens) */
.t-display { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--text-display-size); line-height: var(--text-display-lh); letter-spacing: var(--text-display-ls); }
.t-h1 { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--text-h1-size); line-height: var(--text-h1-lh); letter-spacing: var(--text-h1-ls); }
.t-h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-h2-size); line-height: var(--text-h2-lh); letter-spacing: var(--text-h2-ls); }
.t-h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-h3-size); line-height: var(--text-h3-lh); letter-spacing: var(--text-h3-ls); }
.t-title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-title-size); line-height: var(--text-title-lh); letter-spacing: var(--text-title-ls); }
.t-body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--text-body-size); line-height: var(--text-body-lh); }
.t-callout { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--text-callout-size); line-height: var(--text-callout-lh); }
.t-footnote { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--text-footnote-size); line-height: var(--text-footnote-lh); }
.t-caption { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--text-caption-size); line-height: var(--text-caption-lh); }
.t-overline { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-overline-size); line-height: var(--text-overline-lh); letter-spacing: var(--text-overline-ls); text-transform: uppercase; }
.t-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ============================================================
   ProRoast · Spacing tokens
   Base-8 scale (spec: 4, 8, 16, 24, 32, 48, 64) + intermediate steps
   ============================================================ */
:root {
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* layout rhythm */
  --gutter-screen: 20px;   /* iOS screen side padding */
  --gutter-card:   16px;   /* default card inner padding */
  --gutter-section:24px;   /* gap between major sections */

  /* touch target floor (iOS HIG) */
  --hit-min: 44px;
}

/* ============================================================
   ProRoast · Elevation tokens — radius, shadow, blur, glow
   Radius scale honors spec (8, 12, 16, 24); adds pill + small.
   Dark-first shadows are deep & soft; "glow" shadows carry brand.
   ============================================================ */
:root {
  /* ---- corner radius ---- */
  --radius-xs:  6px;
  --radius-sm:  8px;    /* spec */
  --radius-md:  12px;   /* spec */
  --radius-lg:  16px;   /* spec */
  --radius-xl:  24px;   /* spec — cards, sheets */
  --radius-2xl: 32px;
  --radius-pill:999px;

  /* ---- shadows (dark UI: deep, diffuse) ---- */
  --shadow-sm:   0 1px 2px rgba(0,0,0,.4);
  --shadow-md:   0 6px 18px -6px rgba(0,0,0,.55);
  --shadow-lg:   0 18px 40px -16px rgba(0,0,0,.65);
  --shadow-xl:   0 32px 70px -24px rgba(0,0,0,.75);
  --shadow-sheet:0 -12px 40px -8px rgba(0,0,0,.6);

  /* glass card edge: subtle top highlight + ambient drop */
  --shadow-glass: 0 8px 32px -12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);

  /* ---- brand glows (use sparingly — score, primary CTA) ---- */
  --glow-ai:   0 12px 34px -8px rgba(139,92,246,.55);
  --glow-gold: 0 10px 28px -6px rgba(230,160,40,.55), 0 2px 10px -2px rgba(242,199,95,.45);
  --glow-soft-ai:  0 0 0 1px rgba(139,92,246,.25), 0 8px 30px -6px rgba(139,92,246,.4);

  /* ---- backdrop blur ---- */
  --blur-sm: 6px;
  --blur-md: 12px;
  --blur-lg: 20px;
}