/* ============================================================================
   Wonderboy Creative — design tokens.
   Single source of truth, ported from design_handoff_dental_seo/design_files/
   colors_and_type.css. Loaded ahead of everything else in style.css.
   ============================================================================ */

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

:root {
  /* -- Hero blue (brand primary) ------------------------------------------ */
  --hero-50:  #EEF0FF;
  --hero-100: #E0E3FF;
  --hero-200: #C5CBFF;
  --hero-300: #A2ABFF;
  --hero-400: #838FFF;
  --hero-500: #6375FF;
  --hero-600: #4F5EE8;
  --hero-700: #3F4CC4;
  --hero-800: #333E9E;
  --hero-900: #262E6E;

  /* -- Electric sky (accent on dark) -------------------------------------- */
  --electric-300: #7DD3FC;
  --electric-400: #4FC2F7;
  --electric-500: #38BDF8;
  --electric-600: #0EA5E0;

  /* -- Midnight (dark grounds) -------------------------------------------- */
  --midnight-700: #2B3550;
  --midnight-800: #222C44;
  --midnight-900: #1C2539;
  --midnight-950: #121A2B;

  /* -- Bolt gold (rare warm accent) --------------------------------------- */
  --gold-400: #D2A867;
  --gold-500: #BF944E;

  /* -- Neutrals (cool, faintly blue grays) -------------------------------- */
  --white:    #FFFFFF;
  --gray-50:  #F6F8FB;
  --gray-100: #EDF1F6;
  --gray-200: #DDE3EC;
  --gray-300: #C3CCDA;
  --gray-400: #97A3B6;
  --gray-500: #6B7689;
  --gray-600: #4B5567;
  --gray-700: #333C4D;

  /* -- Status -------------------------------------------------------------- */
  --success:    #1FB47A;
  --success-bg: #E4F7EF;

  /* -- Semantic ----------------------------------------------------------- */
  --color-brand:        var(--hero-500);
  --color-brand-hover:  var(--hero-600);
  --color-accent:       var(--electric-500);

  --bg-page:      var(--white);
  --bg-subtle:    var(--gray-50);
  --bg-inverse:   var(--midnight-900);
  --bg-inverse-2: var(--midnight-950);

  --fg-primary:   var(--midnight-900);
  --fg-secondary: var(--gray-600);
  --fg-muted:     var(--gray-500);
  --fg-on-brand:  var(--white);
  --fg-link:      var(--hero-600);

  --border-subtle: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-focus:  var(--hero-500);

  /* -- Typography --------------------------------------------------------- */
  --font-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.5rem;
  --text-4xl:  3.25rem;
  --text-5xl:  4.25rem;
  --text-6xl:  5.5rem;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-body:   0.01em;
  --tracking-wide:   0.08em;

  /* -- Spacing / radii / shadow / motion --------------------------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;  --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;  --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  --radius-sm: 6px;  --radius-md: 10px;  --radius-lg: 16px;
  --radius-xl: 24px; --radius-pill: 999px;

  --shadow-sm:    0 1px 2px rgba(22,33,58,.06), 0 1px 3px rgba(22,33,58,.08);
  --shadow-md:    0 4px 12px rgba(22,33,58,.08), 0 2px 4px rgba(22,33,58,.06);
  --shadow-lg:    0 12px 32px rgba(22,33,58,.12), 0 4px 8px rgba(22,33,58,.06);
  --shadow-brand: 0 8px 24px rgba(99,117,255,.34);
  --shadow-glow:  0 0 0 4px rgba(56,189,248,.28);

  --ease-out:    cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;
}