/* Batchrunner · APP direction · design tokens
   Translated 1:1 from the shipped app: in/app-design/Theme.swift (+ Components.swift).
   Where DESIGN.md and Theme.swift disagree, Theme.swift wins (see out/DECISIONS.md).
   Light = default; dark follows prefers-color-scheme, exactly like Theme.dyn(light, dark). */

/* ---------- Fonts: the same files the app bundles (sms/Fonts/*.ttf), subset to Latin, woff2. All SIL OFL. ---------- */
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url(/assets/fonts/Inter-Regular.woff2) format("woff2"); }   /* Font.inter(_, .regular) */
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url(/assets/fonts/Inter-Medium.woff2) format("woff2"); }    /* .medium */
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url(/assets/fonts/Inter-SemiBold.woff2) format("woff2"); }  /* .semibold */
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url(/assets/fonts/Inter-Bold.woff2) format("woff2"); }      /* .bold */
@font-face { font-family: "Inter"; font-weight: 800; font-style: normal; font-display: swap; src: url(/assets/fonts/Inter-ExtraBold.woff2) format("woff2"); } /* .heavy / .black */
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url(/assets/fonts/JetBrainsMono-Medium.woff2) format("woff2"); }     /* Font.mono(_, .medium) */
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-display: swap; src: url(/assets/fonts/JetBrainsMono-Bold.woff2) format("woff2"); }       /* Font.mono(_, .bold) */
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/InstrumentSerif-Italic.woff2) format("woff2"); } /* Font.serifItalic */

:root {
  color-scheme: light dark;

  /* ---------- Color · light (Theme.swift first argument of dyn) ---------- */
  --bg: #F4F1EA;              /* Theme.background */
  --surface: #FFFFFF;         /* Theme.surface — cards, inputs */
  --raised: #FAF6EE;          /* Theme.raised — avatar fill, InfoNote */
  --ink: #0A1628;             /* Theme.textPrimary — headlines, hero numbers */
  --ink-2: #4A5468;           /* Theme.textSecondary — body */
  --muted: #5A6376;           /* Theme.textMuted — captions, eyebrows */
  --faint: rgba(10,22,40,.25);/* Theme.textFaint — placeholder art only, never text that must be read */
  --line: rgba(10,22,40,.08); /* Theme.line — hairline dividers (NOT boxes) */
  --line-input: rgba(10,22,40,.22); /* web-only: input boundary needs ≥3:1-ish visibility (WCAG 1.4.11); app inputs sit in cards */
  --accent: #07744C;          /* Theme.accent — ring, ✓, selected chip, 1 CTA accent · max 1–2 per screen */
  --accent-soft: rgba(7,116,76,.12);  /* Theme.accentSoft / Theme.greenSoft (accent @ 12%) */
  --success: #07744C;         /* Theme.success */
  --warning: #8F5A12;         /* Theme.warning — skipped, cap notice */
  --warning-soft: rgba(143,90,18,.14); /* Theme.warningSoft (14%) */
  --danger: #C0392B;          /* Theme.danger — failed / risk only */
  --danger-soft: rgba(192,57,43,.09);  /* web-only: calm risk card fill (app: "calm card, not red banner") */
  --cta-ink: #0A1628;         /* Theme.ctaInk — secondary solid button */
  --cta-ink-label: #FFFFFF;   /* Theme.ctaInkLabel */
  --brand-1: #055E3B;         /* Theme.brandGradient start (topLeading) */
  --brand-2: #097B4D;         /* Theme.brandGradient end (bottomTrailing) */
  --brand-gradient: linear-gradient(135deg, var(--brand-1), var(--brand-2)); /* Theme.brandGradient */
  /* App Store panel (screens SS1/SS4/SS6): brand gradient + one lighter radial glow, top-centre-right */
  --panel-green: radial-gradient(60% 45% at 62% 14%, rgba(16,185,129,.22), rgba(16,185,129,0) 70%), linear-gradient(160deg, #0B6E45 0%, #066F45 38%, #05583A 100%); /* glow capped at 22% so 13–17px text on it stays ≥4.5:1 */
  /* App Store cream panel (SS2/SS3/SS5): cream with a warm peach glow at the left edge */
  --panel-cream: radial-gradient(45% 35% at 0% 22%, rgba(253,214,140,.45), rgba(253,214,140,0) 70%), var(--bg);
  --on-green: #FFFFFF;        /* text on the brand panel */
  --on-green-serif: #F3EBC8;  /* the cream serif accent on the green panel ("who got it." in SS1) */
  --on-green-2: rgba(255,255,255,.94);

  /* ---------- Type (Theme.swift Font.inter / Font.mono / serifItalic) ---------- */
  --font-sans: "Inter", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;  /* numbers: tabular by design */
  --font-serif: "Instrument Serif", "New York", Georgia, "Times New Roman", serif; /* italic, pivot word only */

  /* Scale = DESIGN.md names; sizes scaled for web (app pt → px, body raised to 17px). */
  --t-display-xl: clamp(44px, 6.2vw, 72px);  /* display-xl 56pt 800 · paywall-hero size → web hero */
  --t-display-lg: clamp(34px, 4.6vw, 54px);  /* display-lg 40pt 800 */
  --t-display-md: clamp(28px, 3.2vw, 38px);  /* display-md 30pt 700 · screen title / H2 */
  --t-title-lg: 22px;   /* title-lg 22pt 700 */
  --t-title-md: 18px;   /* title-md 17pt 600 · card title */
  --t-body: 17px;       /* body 15pt → 17px web minimum */
  --t-caption: 15px;    /* caption 12.5pt → 15px */
  --t-micro: 14px;      /* micro 11pt → 14px */
  --t-eyebrow: 13px;    /* Eyebrow 10.5pt 700 tracking 1.8 → 13px (13px = web legibility floor) */
  --track-eyebrow: .16em;  /* Eyebrow .tracking(1.8) at 10.5pt ≈ .17em */
  --t-hero-num: clamp(72px, 9vw, 112px);  /* hero-num 80–96pt 800 */
  --t-stat-num: 34px;   /* StatStrip .mono(27, .bold) — ratio to its 9.5pt label kept */
  --t-inline-num: 22px; /* inline-num 18–22pt */

  /* ---------- Spacing (DESIGN.md scale; Theme.Space) ---------- */
  --s-4: 4px; --s-6: 6px; --s-8: 8px; --s-10: 10px; --s-12: 12px; --s-14: 14px; --s-16: 16px; --s-18: 18px;
  --s-20: 20px; --s-22: 22px; --s-24: 24px; --s-28: 28px; --s-32: 32px; --s-36: 36px; --s-40: 40px; --s-60: 60px; --s-80: 80px;
  --screen-h: 22px;     /* Theme.Space.screenH */
  --top-headline: 60px; /* Theme.Space.topHeadline */
  --section: 28px;      /* Theme.Space.section (in-card) — page sections use 80/60 */
  --head-body: 18px;    /* Theme.Space.headBody */
  --tap: 44px;          /* Theme.Space.tap — min target */
  --col: 640px;         /* .screenPadding() maxWidth 640 = reading column */

  /* ---------- Radius (Components.swift) ---------- */
  --r-chip: 8px;        /* MergeChip 8 */
  --r-note: 13px;       /* InfoNote 13 */
  --r-banner: 12px;     /* TrialBanner 12 / icon-btn 12 */
  --r-button: 16px;     /* PrimaryButton 16 · StatStrip 16 */
  --r-card: 18px;       /* .cardStyle() 18 */
  --r-big: 24px;        /* FirstRunCoach 24 · big card */
  --r-pill: 999px;      /* Capsule() */

  /* ---------- Depth: app has NO hard drop shadows. Atmospheric only. ---------- */
  --shadow-float: 0 1px 2px rgba(10,22,40,.06), 0 10px 30px rgba(10,22,40,.10); /* floating pills / phone (App Store art) */
  --glow-green: 0 0 0 1px rgba(7,116,76,.06), 0 18px 60px rgba(7,116,76,.16);   /* "atmospheric green glow on hero/ledger card" */
  --phone-bezel: #111317;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #070B14;            /* Theme.background (dark) + radial green tint below */
    --surface: #0D1628;       /* Theme.surface */
    --raised: #121E33;        /* Theme.raised */
    --ink: #EDF2FF;           /* Theme.textPrimary */
    --ink-2: #9BA6BF;         /* Theme.textSecondary */
    --muted: #8590AD;         /* Theme.textMuted is #6B7796 (3.9:1 on #070B14) → lifted to 5.9:1 for web AA; see DECISIONS */
    --faint: rgba(237,242,255,.25);
    --line: rgba(237,242,255,.08);
    --line-input: rgba(237,242,255,.22);
    --accent: #2BD49A;        /* Theme.accent (dark) */
    --accent-soft: rgba(43,212,154,.12);
    --success: #2BD49A;
    --warning: #E0A340;       /* Theme.warning (dark) */
    --warning-soft: rgba(224,163,64,.14);
    --danger: #FF6B5C;        /* Theme.danger (dark) */
    --danger-soft: rgba(255,107,92,.10);
    --cta-ink: #EDF2FF;       /* Theme.ctaInk (dark) — light button */
    --cta-ink-label: #070B14; /* Theme.ctaInkLabel (dark) */
    --panel-green: radial-gradient(60% 45% at 62% 14%, rgba(43,212,154,.26), rgba(43,212,154,0) 70%), linear-gradient(160deg, #06402A 0%, #075637 40%, #042A1C 100%);
    --panel-cream: radial-gradient(60% 40% at 50% 0%, rgba(43,212,154,.10), rgba(43,212,154,0) 70%), var(--bg); /* DESIGN.md: dark bg = radial green tint */
    --shadow-float: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.45);
    --glow-green: 0 0 0 1px rgba(43,212,154,.10), 0 18px 60px rgba(43,212,154,.12);
    --phone-bezel: #24272E;
  }
}