/**
 * tracehw.io — Design Tokens
 * Palette: Chlorine (Blue + Green Accent)
 * Version: 0.2.0
 *
 * Usage: Import this file once at the root of your project.
 * Every visual property in the product should reference a token.
 * Never hardcode a color, spacing, or font value.
 */

:root {

  /* ─────────────────────────────────────────
     COLOR — Primitive (raw values, don't use directly in components)
  ───────────────────────────────────────── */

  /* Background/surface scale — deep navy */
  --color-blue-950:  #030609;
  --color-blue-900:  #060a0f;
  --color-blue-800:  #0a1018;
  --color-blue-700:  #0f1a24;
  --color-blue-600:  #0f1e30;
  --color-blue-500:  #1a2e45;
  --color-blue-400:  #2a4a6a;
  --color-blue-300:  #4a7090;
  --color-blue-200:  #7aaac8;
  --color-blue-100:  #b8d8ed;
  --color-blue-50:   #e8f4fb;

  /* PCB trace color */
  --color-trace:         rgba(60, 140, 255, 1);
  --color-trace-pad:     rgba(60, 140, 255, 0.9);
  --color-trace-muted:   rgba(60, 140, 255, 0.22);

  /* Accent — bright green (buttons, highlights, active states) */
  --color-accent-default:   #4dbd72;
  --color-accent-hover:     #6dcd8a;
  --color-accent-muted:     rgba(77, 189, 114, 0.12);
  --color-accent-subtle:    rgba(77, 189, 114, 0.06);
  --color-accent-border:    rgba(77, 189, 114, 0.22);
  --color-accent-glow:      rgba(77, 189, 114, 0.35);

  --color-white:    #ffffff;
  --color-black:    #000000;

  --color-error:    #e05c5c;
  --color-warning:  #d4a028;
  --color-success:  #4dbd72;

  /* ─────────────────────────────────────────
     COLOR — Semantic (use these in components)
  ───────────────────────────────────────── */

  /* Backgrounds */
  --bg-base:        var(--color-blue-900);   /* page background */
  --bg-elevated:    var(--color-blue-800);   /* cards, panels */
  --bg-overlay:     var(--color-blue-700);   /* modals, popovers */
  --bg-sunken:      var(--color-blue-950);   /* inputs, code blocks */

  /* Borders */
  --border-default: var(--color-blue-600);
  --border-subtle:  var(--color-blue-700);
  --border-strong:  var(--color-blue-500);
  --border-accent:  var(--color-accent-border);

  /* Text */
  --text-primary:   var(--color-white);
  --text-secondary: var(--color-blue-200);
  --text-muted:     var(--color-blue-300);
  --text-faint:     var(--color-blue-500);
  --text-accent:    var(--color-accent-default);
  --text-error:     var(--color-error);

  /* Interactive */
  --interactive-accent:          var(--color-accent-default);
  --interactive-accent-hover:    var(--color-accent-hover);
  --interactive-accent-bg:       var(--color-accent-muted);
  --interactive-accent-bg-hover: rgba(77, 189, 114, 0.18);

  /* ─────────────────────────────────────────
     TYPOGRAPHY
  ───────────────────────────────────────── */

  --font-display: 'Barlow Condensed', sans-serif;
  --font-mono:    'Space Mono', monospace;
  --font-body:    'Barlow Condensed', sans-serif;

  /* Scale (Major Third — 1.25) */
  --text-2xs:  10px;
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   26px;
  --text-2xl:  34px;
  --text-3xl:  44px;
  --text-4xl:  56px;
  --text-5xl:  72px;
  --text-6xl:  96px;
  --text-7xl:  120px;

  /* Weight */
  --weight-regular:  400;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* Leading */
  --leading-tight:   0.93;
  --leading-snug:    1.1;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* Tracking */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.06em;
  --tracking-wider:    0.1em;
  --tracking-widest:   0.2em;

  /* ─────────────────────────────────────────
     SPACING (4px base unit)
  ───────────────────────────────────────── */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ─────────────────────────────────────────
     BORDER RADIUS
  ───────────────────────────────────────── */

  --radius-none: 0px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-pill: 999px;

  /* ─────────────────────────────────────────
     SHADOWS
  ───────────────────────────────────────── */

  --shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:     0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg:     0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-accent: 0 0 20px rgba(77, 189, 114, 0.25);
  --shadow-glow:   0 0 40px rgba(77, 189, 114, 0.15);
  --focus-ring:    0 0 0 3px rgba(77, 189, 114, 0.25);

  /* ─────────────────────────────────────────
     MOTION
  ───────────────────────────────────────── */

  --duration-fast:    100ms;
  --duration-base:    200ms;
  --duration-slow:    400ms;
  --duration-glacial: 800ms;

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─────────────────────────────────────────
     Z-INDEX
  ───────────────────────────────────────── */

  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-cursor:   9999;

  /* ─────────────────────────────────────────
     LAYOUT
  ───────────────────────────────────────── */

  --max-width-sm:  480px;
  --max-width-md:  768px;
  --max-width-lg:  1024px;
  --max-width-xl:  1280px;
  --max-width-2xl: 1440px;

  --nav-height: 64px;

}