/*
 * G33G33 design tokens. The single source of colours, spacing, typography,
 * radii and shadows for g33g33.com — and later the customer and admin panels.
 * Only CSS custom properties live here; components are in site.css.
 * All text/background pairs below meet WCAG 2.1 AA (4.5:1 for body text).
 */
:root {
  color-scheme: dark;

  /* Colour: surfaces */
  --color-bg: #0b0d14;
  --color-surface: #141826;
  --color-surface-raised: #1c2133;
  --color-border: #2c3350;        /* decorative borders only */
  --color-border-strong: #6b7394; /* form controls / UI boundaries: 3.4:1 on --color-surface-raised, 3.8:1 on --color-surface */

  /* Colour: text */
  --color-text: #eceef6;          /* 16.7:1 on --color-bg */
  --color-text-muted: #a9b0c7;    /* 9.0:1 on --color-bg, 7.4:1 on --color-surface-raised */
  --color-text-inverse: #0b0d14;

  /* Colour: brand */
  --color-primary: #a78bfa;       /* violet; 7.1:1 on --color-bg */
  --color-primary-hover: #c4b5fd;
  --color-on-primary: #0b0d14;    /* 7.1:1 on --color-primary */
  --color-accent: #5eead4;        /* teal; 13.1:1 on --color-bg */
  --color-focus: #fde047;         /* focus ring, 14.7:1 on --color-bg */

  /* Colour: status */
  --color-success: #4ade80;
  --color-warning: #facc15;
  --color-danger: #f87171;

  /* Typography (system fonts only: no external font requests) */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --font-size-3xl: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  --line-height: 1.6;
  --line-height-tight: 1.15;
  --font-weight-bold: 700;

  /* Spacing scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* Layout */
  --container-max: 72rem;
  --prose-max: 46rem;

  /* Shape and depth */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;
  --shadow-card: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 10px 30px rgb(0 0 0 / 0.35);
  --glow-primary: 0 0 0 1px rgb(167 139 250 / 0.35), 0 8px 30px rgb(167 139 250 / 0.25);

  /* Motion */
  --transition-fast: 120ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
  }
}