/**
 * caniextend — Design Tokens
 *
 * Canonical CSS custom properties matching the marketing site brand.
 * Palette: navy / blueprint / stone — light theme.
 *
 * Import with:  <link rel="stylesheet" href="/css/tokens.css">
 * Reference as: var(--bg), var(--accent), etc.
 *
 * Typography: DM Sans (UI), DM Serif Display (headings) — Google Fonts.
 *
 * Contrast ratios (WCAG AA):
 *   --text on --bg      ≥ 7 : 1  (AAA)
 *   --muted on --bg     ≥ 4.5 : 1 (AA)
 *   --accent on white   ≥ 4.5 : 1 (AA — large text / icons)
 */

/* ── Colour tokens ── */
:root {
  /* Surfaces */
  --bg:              #FFFFFF;
  --bg-alt:          #F5F4F1;
  --surface:         #FFFFFF;
  --surface-raised:  #F5F4F1;
  --border:          #E2E8F0;
  --border-subtle:   #EDF2F7;

  /* Text */
  --text:            #2D3748;
  --muted:           #718096;
  --placeholder:     #A0AEC0;

  /* Brand */
  --navy:            #0F2240;
  --accent:          #4A7FA5;
  --accent-hover:    #3A6A8E;
  --accent-glow:     rgba(74, 127, 165, 0.25);
  --accent-faint:    rgba(74, 127, 165, 0.10);
  --slate:           #7BAFD4;

  /* Semantic */
  --success:         #1A7F5A;
  --success-faint:   rgba(26, 127, 90, 0.12);
  --danger:          #C53030;
  --danger-faint:    rgba(197, 48, 48, 0.10);
  --warning:         #B45309;
  --warning-faint:   rgba(180, 83, 9, 0.10);
  --info:            #4A7FA5;
  --info-faint:      rgba(74, 127, 165, 0.10);
}

/* ── Spacing scale ── */
:root {
  --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 */
}

/* ── Border radius ── */
:root {
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;
}

/* ── Typography ── */
:root {
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-sans:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  --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 */

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
}

/* ── Transition presets ── */
:root {
  --transition-fast:   150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   300ms ease;
}

/* ── Z-index scale ── */
:root {
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 1000;
  --z-modal:   2000;
  --z-toast:   3000;
}

/* ── Hero blueprint grid (matches marketing site) ── */
.hero-bg {
  background-color: var(--navy);
  background-image:
    linear-gradient(rgba(74, 127, 165, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 127, 165, 0.07) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
}