/* DraftLayer Design Tokens
 * Single source of truth for all visual decisions.
 * Do not hardcode any of these values elsewhere.
 */

:root {
  /* ─── Colors: Backgrounds ─────────────────────────────────────────── */
  --color-bg:               #07090f;
  --color-surface:          #0f131b;
  --color-surface-elevated: #171d28;

  /* ─── Colors: Borders ─────────────────────────────────────────────── */
  --color-border:           #273247;
  --color-border-subtle:    #192235;

  /* ─── Colors: Text ────────────────────────────────────────────────── */
  --color-text-primary:     #f3f6ff;
  --color-text-secondary:   #9da9bf;
  --color-text-muted:       #637089;

  /* ─── Colors: Accent ──────────────────────────────────────────────── */
  --color-accent:           #4f7dff;
  --color-accent-hover:     #78a0ff;
  --color-accent-dim:       rgba(79, 125, 255, 0.13);

  /* ─── Colors: Semantic ────────────────────────────────────────────── */
  --color-success:          #22c55e;
  --color-warning:          #f59e0b;
  --color-error:            #ef4444;

  /* ─── Typography: Font Families ──────────────────────────────────── */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* ─── Typography: Scale (base 16px) ──────────────────────────────── */
  --text-xs:   0.75rem;   /*  12px */
  --text-sm:   0.875rem;  /*  14px */
  --text-base: 1rem;      /*  16px */
  --text-lg:   1.125rem;  /*  18px */
  --text-xl:   1.25rem;   /*  20px */
  --text-2xl:  1.5rem;    /*  24px */
  --text-3xl:  1.875rem;  /*  30px */
  --text-4xl:  2.25rem;   /*  36px */
  --text-5xl:  3.25rem;   /*  52px */

  /* ─── Spacing (4px base grid) ────────────────────────────────────── */
  --space-1:   0.25rem;   /*   4px */
  --space-2:   0.5rem;    /*   8px */
  --space-3:   0.75rem;   /*  12px */
  --space-4:   1rem;      /*  16px */
  --space-5:   1.25rem;   /*  20px */
  --space-6:   1.5rem;    /*  24px */
  --space-8:   2rem;      /*  32px */
  --space-10:  2.5rem;    /*  40px */
  --space-12:  3rem;      /*  48px */
  --space-16:  4rem;      /*  64px */
  --space-20:  5rem;      /*  80px */

  /* ─── Border Radius ──────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* ─── Shadows ─────────────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.6);

  /* ─── Transitions ─────────────────────────────────────────────────── */
  --transition-fast: 120ms ease;
  --transition-base: 220ms ease;
}