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

/* ============================================================
   SparkyForm — design tokens (from design_system/colors_and_type.css)
   ============================================================ */
:root {
  /* Voltage Yellow */
  --volt-50:  #FFF9E6;
  --volt-100: #FFEFB8;
  --volt-200: #FFE48A;
  --volt-300: #FFD75C;
  --volt-400: #FFCB3E;
  --volt-500: #FFC42E;
  --volt-600: #F2A900;
  --volt-700: #C98A00;

  /* Ink */
  --ink-950: #0F1115;
  --ink-900: #16181D;
  --ink-800: #1F222A;
  --ink-700: #2C3038;
  --ink-600: #3C414C;

  /* Slate neutrals */
  --slate-900: #1A1E27;
  --slate-700: #3A4250;
  --slate-500: #677488;
  --slate-400: #8A95A6;
  --slate-300: #C3CAD4;
  --slate-200: #DFE4EB;
  --slate-100: #EEF1F5;
  --slate-50:  #F6F8FB;
  --white:     #FFFFFF;

  /* Functional blue */
  --blue-600: #2563D9;
  --blue-500: #3B82F6;
  --blue-100: #DBEAFE;
  --blue-50:  #EFF5FF;

  /* Pass / fail / warn */
  --pass-700: #0E7A4B;
  --pass-600: #12A063;
  --pass-100: #D7F2E4;
  --pass-50:  #ECFBF3;
  --fail-700: #C2261B;
  --fail-600: #E03B2E;
  --fail-100: #FBDDD9;
  --fail-50:  #FEF1EF;
  --warn-700: #B9710A;
  --warn-600: #E08A0E;
  --warn-100: #FCEBCB;
  --warn-50:  #FEF8EC;

  /* AI "spark" gradient */
  --ai-from: #FFCF3F;
  --ai-mid:  #FF8A5B;
  --ai-to:   #F062B0;
  --ai-gradient: linear-gradient(118deg, var(--ai-from) 0%, var(--ai-mid) 48%, var(--ai-to) 100%);
  --ai-tint: linear-gradient(118deg, rgba(255,207,63,0.10) 0%, rgba(255,138,91,0.08) 50%, rgba(240,98,176,0.09) 100%);
  --ai-edge: 3px;

  /* Semantic surface roles */
  --bg-app:        var(--slate-50);
  --bg-surface:    var(--white);
  --bg-sunken:     var(--slate-100);
  --bg-inverse:    var(--ink-900);
  --fg-primary:    var(--ink-900);
  --fg-secondary:  var(--slate-700);
  --fg-tertiary:   var(--slate-500);
  --fg-on-ink:     #F4F6FA;
  --fg-on-volt:    var(--ink-900);
  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --focus-ring:    var(--blue-500);

  /* Type families */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale */
  --text-display: 700 40px/1.05 var(--font-display);
  --text-h1:      700 30px/1.12 var(--font-display);
  --text-h2:      600 23px/1.2  var(--font-display);
  --text-h3:      600 18px/1.3  var(--font-body);
  --text-lead:    400 18px/1.5  var(--font-body);
  --text-body:    400 16px/1.55 var(--font-body);
  --text-ui:      500 15px/1.3  var(--font-body);
  --text-label:   600 13px/1.3  var(--font-body);
  --text-caption: 400 13px/1.4  var(--font-body);
  --text-overline:700 11px/1.2  var(--font-body);
  --text-data:    500 16px/1.2  var(--font-mono);
  --text-data-lg: 700 28px/1.0  var(--font-mono);

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;

  /* Spacing (4px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px;

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(16,17,21,0.06), 0 1px 1px rgba(16,17,21,0.04);
  --shadow-md:  0 2px 6px rgba(16,17,21,0.07), 0 6px 16px rgba(16,17,21,0.06);
  --shadow-lg:  0 8px 24px rgba(16,17,21,0.10), 0 2px 6px rgba(16,17,21,0.05);
  --shadow-xl:  0 20px 48px rgba(16,17,21,0.18), 0 4px 12px rgba(16,17,21,0.08);
  --shadow-volt: 0 4px 16px rgba(242,169,0,0.32);
  --shadow-focus: 0 0 0 3px rgba(59,130,246,0.32);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;

  --tap-target: 48px;
}