/* =====================================================================
   Reflow — design tokens
   Verified 1:1 against the extension source (content-player.js, content.js,
   editor/styles.css, cloud/ui.js, cloud/theme.js, manifest.json).
   COLOR LAW (updated):
   - Cobalt #2563EB: brand, CTAs, recording, chrome, step pills, "flow".
     Deep cobalt #172554 adds depth for headings/dark accents.
   - Replay orange #F97316: ONLY the in-page target RING / callout marker for
     "next action". Never a fill, button, link, or large surface. Spotlight
     tooltips use a neutral-dark surface with orange as a thin 3px top marker.
   - #EA580C (orange-strong): reserved for the REPLAY product-demo emphasis.
   ===================================================================== */
:root {
  /* Cobalt — primary / recording / chrome / CTAs / step pills / "flow" */
  --rf-primary-900: #1E3A8A;
  --rf-primary-800: #1E40AF;
  --rf-primary-700: #1D4ED8;
  --rf-primary-600: #2563EB; /* PRIMARY */
  --rf-primary-500: #3B82F6;
  --rf-primary-100: #DBEAFE;
  --rf-primary-50:  #EFF6FF;
  --rf-primary-950: #172554; /* deep cobalt — depth for headings / dark accents */

  /* Cyan wave — hairlines, watermark gradient, recording hover glow */
  --rf-cyan-600: #0891B2;
  --rf-cyan-500: #06B6D4;
  --rf-cyan-400: #22D3EE;
  --rf-cyan-300: #67E8F9;
  --rf-cyan-100: #CFFAFE;

  /* NO ORANGE anywhere — spotlight, replay, callouts all use cobalt. */
  --rf-orange:        #2563EB; /* was orange; now cobalt so nothing renders orange */
  --rf-orange-aa:     #1D4ED8;
  --rf-orange-glow:   rgba(37, 99, 235, 0.35);
  /* spotlight is a single cobalt color — no context swap */
  --rf-spot-record: 37, 99, 235;
  --rf-spot-replay: 37, 99, 235;
  --rf-scrim:         rgba(31, 41, 55, 0.46); /* the 9999px box-shadow dim */
  /* spotlight tooltip surface — neutral dark, orange appears only as a top marker */
  --rf-tooltip-bg:    #111827;
  --rf-tooltip-fg:    #FFFFFF;

  /* Input-hint pills (verbatim content-player.js) — NOT orange */
  --rf-pill-value:     #1D4ED8; /* "입력: …" cobalt (no orange) */
  --rf-pill-sensitive: #7C3AED; /* "직접 입력하세요" violet */

  /* Mode colors (verbatim content.js) */
  --rf-mode-normal: rgba(37, 99, 235, 1);
  --rf-mode-ghost:  rgba(139, 92, 246, 0.98);
  --rf-mode-skip:   rgba(100, 116, 139, 0.98);

  /* Neutrals */
  --rf-ink:        #0F172A;
  --rf-ink-soft:   #1F2937;
  --rf-text:       #334155;
  --rf-text-soft:  #475569;
  --rf-muted:      #64748B;
  --rf-muted-soft: #94A3B8;
  --rf-line:       #E2E8F0;
  --rf-line-soft:  #EEF2F7;

  /* Surfaces */
  --rf-white:        #FFFFFF;
  --rf-surface-1:    #F8FAFC;
  --rf-surface-2:    #F1F5F9;
  --rf-surface-tint: #F0F7FF;
  --rf-dark:         #0B1220;
  --rf-dark-2:       #060A14;

  /* Status */
  --rf-success: #047857;
  --rf-synced:  #10B981;
  --rf-danger:  #DC2626;

  /* Gradients */
  --rf-grad-brand: linear-gradient(135deg, #2563EB, #1E40AF);
  --rf-grad-wave:  linear-gradient(135deg, #67E8F9 0%, #38BDF8 35%, #2563EB 75%, #1E40AF 100%);
  --rf-grad-gate:  linear-gradient(90deg, #14B8A6 0%, #2563EB 55%, #1E3A8A 100%);
  --rf-mint-underline: inset 0 -9px 0 rgba(94, 234, 212, 0.32);

  /* Radii (verbatim editor/styles.css) */
  --rf-radius-sm: 8px;
  --rf-radius-md: 12px;
  --rf-radius-lg: 16px;
  --rf-radius-xl: 22px;
  --rf-radius-spot: 14px; /* spotlight + cards rhyme */

  /* Shadows */
  --rf-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --rf-shadow-sm: 0 2px 6px rgba(30, 58, 138, 0.06);
  --rf-shadow-md: 0 8px 20px rgba(30, 58, 138, 0.08);
  --rf-shadow-lg: 0 18px 42px rgba(30, 58, 138, 0.12);
  --rf-shadow-brand: 0 12px 28px rgba(37, 99, 235, 0.22);
  /* landing scrim is intentionally LIGHT (13%) so marketing copy stays readable
     while the orange ring still "follows" you. The product's own replay uses 46%
     because you're executing steps, not reading — that heavier dim lives in the
     contained REPLAY demo (.replay-demo .scrim) only. */
  --rf-spot-shadow: 0 0 0 9999px rgba(15,23,42,0.13), 0 0 0 3px rgba(249,115,22,0.5), 0 10px 26px rgba(15,23,42,0.28);

  /* Motion */
  --rf-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Type */
  --rf-font: "Pretendard", "Inter", "Segoe UI", "Malgun Gothic", system-ui, -apple-system, sans-serif;
  --rf-mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  /* Layout */
  --rf-container: 1120px;
  --rf-nav-h: 64px;
}

/* Dark theme overrides (light/dark toggle on <html data-theme>) */
:root[data-theme="dark"] {
  --rf-white: #0B1220;
  --rf-surface-1: #0E1626;
  --rf-surface-2: #131D30;
  --rf-surface-tint: #101a2e;
  --rf-ink: #F1F5F9;
  --rf-ink-soft: #E2E8F0;
  --rf-text: #CBD5E1;
  --rf-text-soft: #94A3B8;
  --rf-muted: #94A3B8;
  --rf-line: #1E293B;
  --rf-line-soft: #16213a;
}