/*
 * Intel Parker — Design Tokens
 * CSS custom properties. No rules, only variables.
 * Import first in every page.
 */

:root {
  /* ── Colour: Core ── */
  --color-ink:            #1b1b1b;
  --color-paper:          #fafaf7;
  --color-accent:         #0d7b7e;
  --color-accent-hover:   #0a6366;
  --color-accent-soft:    #e8f2f2;

  /* ── Colour: Neutrals (Stone scale) ── */
  --color-stone-50:       #f5f5f2;
  --color-stone-100:      #e8e8e4;
  --color-stone-200:      #d4d4cf;
  --color-stone-400:      #8c8c85;
  --color-stone-600:      #55554f;

  /* ── Colour: Semantic ── */
  --color-success:        #2d8a56;
  --color-warning:        #d4860b;
  --color-error:          #c73a3a;

  /* ── Typography: Font stacks ── */
  --font-display:         'Switzer', system-ui, -apple-system, sans-serif;
  --font-body:            'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:            'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  /* ── Typography: Size scale ── */
  --text-hero:            clamp(2.25rem, 4vw, 3.25rem);
  --text-h1:              clamp(2.25rem, 3.5vw, 3.5rem);
  --text-h2:              clamp(1.75rem, 2.5vw, 2.5rem);
  --text-h3:              1.375rem;
  --text-h4:              1.125rem;
  --text-body-lg:         1.125rem;
  --text-body:            1rem;
  --text-body-sm:         0.875rem;
  --text-label:           0.75rem;
  --text-caption:         0.6875rem;

  /* ── Typography: Line heights ── */
  --leading-tight:        1.1;
  --leading-snug:         1.3;
  --leading-normal:       1.65;
  --leading-relaxed:      1.75;

  /* ── Typography: Weights ── */
  --weight-extrabold:     800;
  --weight-bold:          700;
  --weight-semibold:      600;
  --weight-medium:        500;
  --weight-regular:       400;
  --weight-light:         350;

  /* ── 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-16:             64px;
  --space-20:             80px;
  --space-24:             96px;
  --space-32:             128px;

  /* ── Layout ── */
  --content-width:        1120px;
  --content-gutter:       24px;
  --grid-gap:             24px;

  /* ── Border radius ── */
  --radius-sm:            4px;
  --radius-md:            8px;
  --radius-lg:            12px;
  --radius-xl:            16px;

  /* ── Shadows ── */
  --shadow-none:          none;
  --shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md:            0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg:            0 8px 32px rgba(0, 0, 0, 0.08);

  /* ── Transitions ── */
  --transition-fast:      150ms ease;
  --transition-base:      200ms ease;
  --transition-slow:      300ms ease;

  /* ── Borders ── */
  --border-thin:          1px solid var(--color-stone-100);
  --border-default:       1.5px solid var(--color-stone-200);
}