/**
 * Design system — spacing, color, typography, radii, shadows
 *
 * Spacing scale (named by size):
 *   XXS — 2px | XS — 4px | S — 8px | M — 16px | LG — 24px | XL — 32px | XXL — 48px | XXXL — 64px
 */

:root {
  /* -------------------------------------------------------------------------
     Spacing
     ------------------------------------------------------------------------- */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-xxxl: 64px;

  /* Layout rhythm (compositions of the scale) */
  --space-gutter: calc(var(--space-m) + var(--space-xs));
  --space-gutter-wide: var(--space-xl);
  --space-section: calc(var(--space-xxxl) + var(--space-xl));
  --space-header: var(--space-xxxl);
  --space-main-bottom: calc(var(--space-xxxl) + var(--space-xl));
  --space-footer-top: calc(var(--space-xxxl) - var(--space-s));
  --space-modal-inset: calc(var(--space-xxxl) + var(--space-xxxl));
  --space-card-shift: calc(-1 * var(--space-xxs));

  /* Layout widths from spacing scale only (avoid ad hoc px outside tokens) */
  --layout-hero-figure-column-min: calc(4 * var(--space-xxxl) + var(--space-xs));
  --layout-hero-figure-column-max: calc(6 * var(--space-xxxl) - var(--space-xs));
  --layout-hero-photo-max: calc(10 * var(--space-xl));
  --layout-case-study-toc-max: calc(4 * var(--space-xxl) + var(--space-lg) + var(--space-xs));

  /* -------------------------------------------------------------------------
     Color
     ------------------------------------------------------------------------- */
  --color-white: #fff;
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-sky-500: #0ea5e9;
  --color-sky-600: #0284c7;
  --color-sky-700: #0369a1;
  --color-fuchsia-500: #d946ef;
  --color-fuchsia-600: #c026d3;
  --color-lime-300: #bef264;
  --color-lime-400: #a3e635;
  --color-hero-sky: #e0f2fe;
  --color-backdrop: rgba(15, 23, 42, 0.45);
  --color-header-border: rgb(226 232 240 / 0.7);
  --color-header-bg: rgb(255 255 255 / 0.8);

  /* -------------------------------------------------------------------------
     Typography
     ------------------------------------------------------------------------- */
  --font-family-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-body: 1rem;
  --font-size-body-lg: 1.125rem;
  --font-size-md: 1.25rem;
  --font-size-md-plus: 1.375rem;
  --font-size-xl: 1.875rem;
  --font-size-2xl: 2.25rem;
  --font-size-hero: 3.75rem;
  --font-size-modal-body: 0.9375rem;
  --line-height-tight: 1.15;
  --line-height-body: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-highlight: 1.6;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-brand: 0.025em;
  --letter-spacing-label: 0.06em;
  --max-line-length: 42rem;
  --max-line-length-wide: 56rem;
  --max-content: 72rem;

  /* -------------------------------------------------------------------------
     Effects & shape
     ------------------------------------------------------------------------- */
  --shadow-soft: 0 var(--space-s) var(--space-xxl) rgba(15, 23, 42, 0.08);
  --shadow-badge: 0 var(--space-xxs) var(--space-xs) rgb(15 23 42 / 0.05);
  --radius-pill: 9999px;
  --radius-card: var(--space-m);
  --radius-card-lg: var(--space-lg);
  --radius-cta: var(--space-lg);
  --radius-process: calc(var(--space-s) + var(--space-xs));
  --border-width-default: 1px;
}