/* metalguy.app — Design tokens
   Single source of truth. Hardcoded values in any other file are a bug. */

:root {
  /* ---------- Color ---------- */
  --color-steel:   #1F1F1F;   /* primary type, base */
  --color-bone:    #F5F2EB;   /* page background */
  --color-mill:    #2A3F5F;   /* secondary, headers */
  --color-copper:  #B87333;   /* primary accent, CTAs */
  --color-caution: #F4C430;   /* anomaly flag, warnings */
  --color-weld:    #E85D2F;   /* alerts, price drops */
  --color-shop:    #3D8B3D;   /* verified, in-stock, good price */
  --color-line:    #D6D2C8;   /* dividers, hairlines */
  --color-muted:   #6B6B6B;   /* secondary type */

  /* Functional aliases */
  --color-bg:           var(--color-bone);
  --color-surface:      #FFFFFF;
  --color-text:         var(--color-steel);
  --color-text-muted:   var(--color-muted);
  --color-border:       var(--color-line);
  --color-accent:       var(--color-copper);
  --color-accent-text:  var(--color-bone);
  --color-success:      var(--color-shop);
  --color-warning:      var(--color-caution);
  --color-danger:       var(--color-weld);
  --color-link:         var(--color-mill);

  /* ---------- Type ---------- */
  --font-display: 'Geist', 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  --size-xs:  12px;
  --size-sm:  14px;
  --size-md:  16px;
  --size-lg:  18px;
  --size-xl:  22px;
  --size-2xl: 28px;
  --size-3xl: 36px;
  --size-4xl: 48px;

  --line-tight:   1.2;
  --line-snug:    1.35;
  --line-normal:  1.5;
  --line-relaxed: 1.7;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  /* ---------- Space ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---------- Radius ---------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* ---------- Shadow ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, .10);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .14);

  /* ---------- Layout ---------- */
  --max-width: 720px;
  --gutter:    var(--space-4);
  --header-h:  56px;

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --duration-1:  120ms;
  --duration-2:  220ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-1: 0ms;
    --duration-2: 0ms;
  }
}