/* ==========================================================================
   Caching Out — Design Tokens
   --------------------------------------------------------------------------
   Concept: "Instrumentation". Deep signal green as brand and pass state,
   green-shifted graphite neutrals, copper as the "before" counterpoint.

   Structure:
     1. Primitives    — raw palette, never referenced directly in components
     2. Typography    — families, fluid scale, weights
     3. Space/layout  — spacing scale, containers, radii, shadows, motion, z
     4. Semantic      — role tokens. THESE are what components use.
     5. Dark theme    — semantic overrides only
     6. Base reset    — minimal element defaults

   Rule: components must only ever reference layer 4 (--color-*, --text-*,
   --surface-*, --border-*). If a component references --ink-500 directly,
   dark mode will break.

   All colour pairings verified against WCAG 2.1 AA. See check-contrast.mjs.
   ========================================================================== */

/* ==========================================================================
   1. PRIMITIVES
   ========================================================================== */

:root {
  /* --- Neutrals: "Ink" (graphite with a green-cyan undertone) ------------ */
  --ink-950: #080b0a;
  --ink-900: #0e1413;
  --ink-800: #16201e;
  --ink-700: #202c29;
  --ink-600: #3a4844;
  --ink-500: #576764;
  --ink-450: #6f807c; /* light-mode interactive border — 4.15:1 on paper */
  --ink-400: #7c8c88; /* dark-mode interactive border */
  --ink-300: #a9b6b2;
  --ink-200: #cbd5d1;
  --ink-100: #e4eae7;
  --ink-50: #f2f5f4;
  --paper: #ffffff;

  /* --- Brand / accent: "Signal" ----------------------------------------- */
  --signal-900: #023423;
  --signal-800: #034a32;
  --signal-700: #046345; /* primary action, light mode — 7.30:1 on paper */
  --signal-600: #057f58; /* focus ring, icons, chart series 1 */
  --signal-500: #079d6d;
  --signal-400: #25bc88; /* primary action, dark mode — 8.12:1 on ink-950 */
  --signal-300: #5fd6ab; /* links on dark — 11.00:1 on ink-950 */
  --signal-200: #9fe9cc;
  --signal-100: #d2f6e6;
  --signal-50: #ecfbf4;

  /* --- Secondary accent: "Copper" (the "before" / unoptimised state) ----- */
  --copper-700: #8a3d12;
  --copper-600: #ab4e17;
  --copper-500: #c9631f;
  --copper-400: #e38445;
  --copper-100: #fbe7d8;

  /* --- Editorial surface: "Sand" ---------------------------------------- */
  --sand: #efeae0;
  --sand-deep: #e3dccd;

  /* --- Functional states ------------------------------------------------ */
  --warning-700: #8a5d02;
  --warning-500: #c98a06;
  --warning-300: #f2c24b;
  --warning-100: #fdf1d6;

  --error-700: #96201a;
  --error-500: #c33025;
  --error-300: #ee7a70;
  --error-100: #fbe1de;
}

/* ==========================================================================
   2. TYPOGRAPHY
   ========================================================================== */

:root {
  --font-heading: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, "Liberation Mono", monospace;

  /* Fluid scale: min at 375px viewport, max at 1440px */
  --text-display: clamp(2.75rem, 1.9rem + 4.25vw, 4.5rem);
  --text-h1: clamp(2.25rem, 1.7rem + 2.75vw, 3.5rem);
  /* The homepage H1 (operator, 2026-10-23 late): a fixed pair above and
     below 991.5px rather than the display clamp. */
  --text-hero: 2.75rem;
  --leading-hero: 3.5rem;
  --text-hero-sm: 2rem;
  --leading-hero-sm: 2.8rem;
  --text-h2: clamp(1.75rem, 1.4rem + 1.75vw, 2.5rem);
  --text-h3: clamp(1.375rem, 1.2rem + 0.875vw, 1.75rem);
  --text-h4: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-body-sm: 0.875rem;
  --text-caption: 0.8125rem;
  --text-eyebrow: 0.75rem;
  --text-metric: clamp(2.25rem, 1.6rem + 3.25vw, 3.75rem);
  --text-metric-sm: 1.5rem;
  --text-code: 0.875rem;

  --leading-display: 1.04;
  --leading-h1: 1.08;
  --leading-h2: 1.15;
  --leading-h3: 1.25;
  --leading-h4: 1.35;
  --leading-body: 1.65;
  --leading-tight: 1.2;
  --leading-none: 1;

  --tracking-display: -0.03em;
  --tracking-h1: -0.025em;
  --tracking-h2: -0.02em;
  --tracking-h3: -0.015em;
  --tracking-h4: -0.01em;
  --tracking-normal: 0;
  --tracking-eyebrow: 0.12em;

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

  /* Max line length for prose */
  --measure: 68ch;
}

/* ==========================================================================
   3. SPACE, LAYOUT, RADII, SHADOW, MOTION
   ========================================================================== */

:root {
  /* --- Spacing (4px base) ----------------------------------------------- */
  --space-0: 0;
  --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 */
  --space-24: 6rem;    /*  96px */
  --space-32: 8rem;    /* 128px */
  --space-40: 10rem;   /* 160px */

  /* --- Containers and grid ---------------------------------------------- */
  --container-prose: 680px;
  --container: 1200px;
  --container-wide: 1360px;
  --grid-columns: 12;
  --gutter: 1rem;         /* 16px, overridden at md */
  --page-padding: 1rem;   /* 16px, overridden at md/lg */

  /* --- Section rhythm --------------------------------------------------- */
  --section-y: var(--space-20);      /* 80px mobile */
  --section-y-lg: var(--space-24);   /* hero / CTA mobile */

  /* --- Radii ------------------------------------------------------------ */
  --radius-sm: 4px;
  --radius-md: 8px;   /* buttons, inputs */
  --radius-lg: 12px;  /* cards */
  --radius-xl: 16px;  /* panels, screenshots */
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* --- Shadows (ink-tinted, never pure black) --------------------------- */
  --shadow-sm: 0 1px 2px rgba(8, 11, 10, 0.05),
               0 1px 3px rgba(8, 11, 10, 0.06);
  --shadow-md: 0 2px 4px rgba(8, 11, 10, 0.05),
               0 6px 16px rgba(8, 11, 10, 0.08);
  --shadow-lg: 0 4px 8px rgba(8, 11, 10, 0.06),
               0 16px 40px rgba(8, 11, 10, 0.12);

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 240ms;
  --duration-entrance: 320ms;

  /* --- Borders ---------------------------------------------------------- */
  --border-width: 1px;
  --border-width-thick: 2px;

  /* --- Z-index ---------------------------------------------------------- */
  --z-base: 0;
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ==========================================================================
   4. SEMANTIC TOKENS — light theme (default)
   Components reference ONLY these.
   ========================================================================== */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* --- Surfaces --------------------------------------------------------- */
  --surface-page: var(--paper);
  --surface-raised: var(--paper);
  --surface-sunken: var(--ink-50);
  --surface-alt: var(--ink-50);
  --surface-warm: var(--sand);
  --surface-warm-deep: var(--sand-deep);
  --surface-inverse: var(--ink-950);
  --surface-accent-subtle: var(--signal-50);
  --surface-accent-muted: var(--signal-100);
  --surface-accent-strong: var(--signal-700);
  --surface-code: var(--ink-950);

  /* --- Text ------------------------------------------------------------- */
  --text-primary: var(--ink-900);      /* 18.61:1 on paper */
  --text-secondary: var(--ink-600);    /*  9.59:1 on paper */
  --text-muted: var(--ink-500);        /*  5.95:1 on paper */
  --text-disabled: var(--ink-400);
  --text-inverse: var(--paper);
  --text-accent: var(--signal-700);    /*  7.30:1 on paper */
  --text-on-accent: var(--paper);      /*  7.30:1 on signal-700 */
  --text-link: var(--signal-700);
  --text-link-hover: var(--signal-800);
  --text-success: var(--signal-700);
  --text-warning: var(--warning-700);  /*  5.76:1 on paper */
  --text-error: var(--error-700);      /*  8.34:1 on paper */
  --text-copper: var(--copper-600);    /*  5.48:1 on paper */

  /* --- Borders ---------------------------------------------------------- */
  --border-subtle: var(--ink-100);     /* decorative dividers only */
  --border-default: var(--ink-200);    /* card borders (decorative) */
  --border-interactive: var(--ink-450);/* inputs, checkboxes — 4.15:1 */
  --border-strong: var(--ink-600);
  --border-accent: var(--signal-700);
  --border-warm: var(--sand-deep);
  --border-error: var(--error-500);
  --border-warning: var(--warning-500);

  /* --- Interactive: primary action -------------------------------------- */
  --action-primary-bg: var(--signal-700);
  --action-primary-bg-hover: var(--signal-800);
  --action-primary-bg-active: var(--signal-900);
  --action-primary-text: var(--paper);

  /* --- Interactive: secondary action ------------------------------------ */
  --action-secondary-bg: transparent;
  --action-secondary-bg-hover: var(--ink-50);
  --action-secondary-bg-active: var(--ink-100);
  --action-secondary-border: var(--ink-450);
  --action-secondary-border-hover: var(--ink-600);
  --action-secondary-text: var(--ink-900);

  /* --- Interactive: disabled -------------------------------------------- */
  --action-disabled-bg: var(--ink-200);
  --action-disabled-text: var(--ink-500);

  /* --- Focus ------------------------------------------------------------ */
  --color-focus: var(--signal-600);    /* 5.02:1 on paper — clears 3:1 */
  --focus-ring: 2px solid var(--color-focus);
  --focus-offset: 2px;

  /* --- Form fields ------------------------------------------------------ */
  --field-bg: var(--paper);
  --field-bg-disabled: var(--ink-50);
  --field-border: var(--ink-450);
  --field-border-hover: var(--ink-600);
  --field-border-focus: var(--signal-600);
  --field-text: var(--ink-900);
  --field-placeholder: var(--ink-500);  /* 5.95:1 */

  /* --- Chips / badges --------------------------------------------------- */
  --chip-neutral-bg: var(--ink-50);
  --chip-neutral-text: var(--ink-700);
  --chip-brand-bg: var(--signal-100);
  --chip-brand-text: var(--signal-800);   /* 8.90:1 */
  --chip-warning-bg: var(--warning-100);
  --chip-warning-text: var(--warning-700);/* 5.14:1 */
  --chip-error-bg: var(--error-100);
  --chip-error-text: var(--error-700);    /* 6.72:1 */
  --chip-copper-bg: var(--copper-100);
  --chip-copper-text: var(--copper-700);  /* 6.36:1 */

  /* --- Data visualisation (ordered series) ------------------------------ */
  --chart-1: var(--signal-600);
  --chart-2: var(--copper-500);
  --chart-3: var(--ink-600);
  --chart-4: var(--signal-300);
  --chart-5: var(--warning-500);
  --chart-grid: var(--ink-100);
  --chart-axis: var(--ink-500);

  /* --- Elevation -------------------------------------------------------- */
  --elevation-card: none;
  --elevation-card-hover: var(--shadow-sm);
  --elevation-raised: var(--shadow-sm);
  --elevation-overlay: var(--shadow-lg);

  /* --- Warm surfaces, tints and gradients (2026-10-24) -------------------
     The operator's warm direction (design/02 amendment of 2026-10-24): the
     homepage speaks to site owners, not performance engineers, so it uses
     pastel grounds and soft, varied gradients where it used one flat colour.
     Built only from the palette above (no new hex); each has a dark-theme
     value in section 5. Used by assets/css/home-warm.css. */
  --surface-mint: var(--signal-50);
  --surface-peach: var(--copper-100);
  --surface-sand: var(--sand);
  --tint-mint: var(--signal-100);
  --tint-peach: var(--copper-100);
  --tint-sand: var(--sand-deep);
  --tint-sun: var(--warning-100);
  --text-on-tint: var(--signal-800);       /* 8.9:1 on signal-100 */
  --dot-mint: var(--signal-300);
  --dot-peach: var(--copper-400);
  --shape-opacity: 0.85;
  --gradient-hero:
    radial-gradient(44rem 30rem at 6% 0%, var(--signal-100), transparent 70%),
    radial-gradient(40rem 28rem at 96% 4%, var(--copper-100), transparent 70%),
    radial-gradient(56rem 26rem at 50% 104%, var(--signal-50), transparent 72%),
    var(--paper);
  --gradient-mint: linear-gradient(160deg, var(--signal-100) 0%, var(--signal-50) 38%, var(--sand) 100%);
  --gradient-peach: linear-gradient(160deg, var(--copper-100) 0%, var(--sand) 55%, var(--signal-50) 100%);
  --gradient-sand: linear-gradient(180deg, var(--sand) 0%, var(--paper) 100%);
  --gradient-deep:
    radial-gradient(60rem 32rem at 10% 0%, var(--signal-700), transparent 70%),
    radial-gradient(52rem 30rem at 96% 100%, var(--signal-800), transparent 70%),
    var(--signal-900);
  --shadow-soft:
    0 18px 44px color-mix(in srgb, var(--signal-900) 10%, transparent),
    0 2px 6px color-mix(in srgb, var(--signal-900) 6%, transparent);
}

/* ==========================================================================
   5. DARK THEME — semantic overrides only
   ========================================================================== */

[data-theme="dark"] {
  color-scheme: dark;

  --surface-page: var(--ink-950);
  --surface-raised: var(--ink-800);
  --surface-sunken: var(--ink-900);
  --surface-alt: var(--ink-900);
  --surface-warm: var(--ink-900);        /* sand has no dark equivalent */
  --surface-warm-deep: var(--ink-800);
  --surface-inverse: var(--paper);
  --surface-accent-subtle: var(--signal-900);
  --surface-accent-muted: var(--signal-900);
  --surface-accent-strong: var(--signal-400);
  --surface-code: var(--ink-950);

  --text-primary: var(--ink-50);         /* 18.02:1 on ink-950 */
  --text-secondary: var(--ink-300);      /*  9.43:1 */
  --text-muted: var(--ink-400);          /*  5.61:1 */
  --text-disabled: var(--ink-500);
  --text-inverse: var(--ink-950);
  --text-accent: var(--signal-300);      /* 11.00:1 */
  --text-on-accent: var(--ink-950);      /*  8.12:1 on signal-400 */
  --text-link: var(--signal-300);
  --text-link-hover: var(--signal-200);
  --text-success: var(--signal-300);
  --text-warning: var(--warning-300);    /* 11.85:1 */
  --text-error: var(--error-300);        /*  7.20:1 */
  --text-copper: var(--copper-400);      /*  7.20:1 */

  --border-subtle: var(--ink-800);
  --border-default: var(--ink-700);
  --border-interactive: var(--ink-400);
  --border-strong: var(--ink-300);
  --border-accent: var(--signal-400);
  --border-warm: var(--ink-700);
  --border-error: var(--error-300);
  --border-warning: var(--warning-300);

  --action-primary-bg: var(--signal-400);
  --action-primary-bg-hover: var(--signal-300);
  --action-primary-bg-active: var(--signal-200);
  --action-primary-text: var(--ink-950);

  --action-secondary-bg: transparent;
  --action-secondary-bg-hover: var(--ink-800);
  --action-secondary-bg-active: var(--ink-700);
  --action-secondary-border: var(--ink-400);
  --action-secondary-border-hover: var(--ink-300);
  --action-secondary-text: var(--ink-50);

  --action-disabled-bg: var(--ink-700);
  --action-disabled-text: var(--ink-400);

  --color-focus: var(--signal-400);      /* 8.12:1 on ink-950 */

  --field-bg: var(--ink-800);
  --field-bg-disabled: var(--ink-900);
  --field-border: var(--ink-400);
  --field-border-hover: var(--ink-300);
  --field-border-focus: var(--signal-400);
  --field-text: var(--ink-50);
  --field-placeholder: var(--ink-400);

  --chip-neutral-bg: var(--ink-800);
  --chip-neutral-text: var(--ink-200);
  --chip-brand-bg: var(--signal-900);
  --chip-brand-text: var(--signal-300);   /* 7.70:1 */
  --chip-warning-bg: #2e1f01;
  --chip-warning-text: var(--warning-300);
  --chip-error-bg: #2e0a08;
  --chip-error-text: var(--error-300);
  --chip-copper-bg: #2e1305;
  --chip-copper-text: var(--copper-400);

  --chart-1: var(--signal-400);
  --chart-2: var(--copper-400);
  --chart-3: var(--ink-300);
  --chart-4: var(--signal-200);
  --chart-5: var(--warning-300);
  --chart-grid: var(--ink-800);
  --chart-axis: var(--ink-400);

  /* Dark surfaces swallow shadows — borders do the elevation work instead */
  --elevation-card: none;
  --elevation-card-hover: none;
  --elevation-raised: none;
  --elevation-overlay: 0 16px 48px rgba(0, 0, 0, 0.6);

  /* Warm surfaces in the dark theme: the same intent, deep and quiet. */
  --surface-mint: color-mix(in srgb, var(--signal-900) 55%, var(--ink-950));
  --surface-peach: color-mix(in srgb, var(--copper-700) 22%, var(--ink-950));
  --surface-sand: var(--ink-900);
  --tint-mint: var(--signal-900);
  --tint-peach: color-mix(in srgb, var(--copper-700) 45%, var(--ink-900));
  --tint-sand: var(--ink-800);
  --tint-sun: color-mix(in srgb, var(--warning-700) 40%, var(--ink-900));
  --text-on-tint: var(--signal-200);
  --dot-mint: var(--signal-700);
  --dot-peach: var(--copper-700);
  --shape-opacity: 0.45;
  --gradient-hero:
    radial-gradient(44rem 30rem at 6% 0%, color-mix(in srgb, var(--signal-900) 80%, var(--ink-950)), transparent 70%),
    radial-gradient(40rem 28rem at 96% 4%, color-mix(in srgb, var(--copper-700) 26%, var(--ink-950)), transparent 70%),
    var(--ink-950);
  --gradient-mint: linear-gradient(160deg, var(--signal-900) 0%, color-mix(in srgb, var(--signal-900) 40%, var(--ink-950)) 45%, var(--ink-950) 100%);
  --gradient-peach: linear-gradient(160deg, color-mix(in srgb, var(--copper-700) 30%, var(--ink-950)) 0%, var(--ink-900) 60%, color-mix(in srgb, var(--signal-900) 45%, var(--ink-950)) 100%);
  --gradient-sand: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-950) 100%);
  --shadow-soft: 0 16px 40px color-mix(in srgb, var(--ink-950) 70%, transparent);
}

/* Respect the OS preference when no explicit choice has been stored. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --surface-page: var(--ink-950);
    --surface-raised: var(--ink-800);
    --surface-sunken: var(--ink-900);
    --surface-alt: var(--ink-900);
    --surface-warm: var(--ink-900);
    --surface-warm-deep: var(--ink-800);
    --surface-inverse: var(--paper);
    --surface-accent-subtle: var(--signal-900);
    --surface-accent-muted: var(--signal-900);
    --surface-accent-strong: var(--signal-400);

    --text-primary: var(--ink-50);
    --text-secondary: var(--ink-300);
    --text-muted: var(--ink-400);
    --text-disabled: var(--ink-500);
    --text-inverse: var(--ink-950);
    --text-accent: var(--signal-300);
    --text-on-accent: var(--ink-950);
    --text-link: var(--signal-300);
    --text-link-hover: var(--signal-200);
    --text-success: var(--signal-300);
    --text-warning: var(--warning-300);
    --text-error: var(--error-300);
    --text-copper: var(--copper-400);

    --border-subtle: var(--ink-800);
    --border-default: var(--ink-700);
    --border-interactive: var(--ink-400);
    --border-strong: var(--ink-300);
    --border-accent: var(--signal-400);
    --border-warm: var(--ink-700);

    --action-primary-bg: var(--signal-400);
    --action-primary-bg-hover: var(--signal-300);
    --action-primary-bg-active: var(--signal-200);
    --action-primary-text: var(--ink-950);
    --action-secondary-bg-hover: var(--ink-800);
    --action-secondary-bg-active: var(--ink-700);
    --action-secondary-border: var(--ink-400);
    --action-secondary-border-hover: var(--ink-300);
    --action-secondary-text: var(--ink-50);
    --action-disabled-bg: var(--ink-700);
    --action-disabled-text: var(--ink-400);

    --color-focus: var(--signal-400);

    --field-bg: var(--ink-800);
    --field-bg-disabled: var(--ink-900);
    --field-border: var(--ink-400);
    --field-border-hover: var(--ink-300);
    --field-border-focus: var(--signal-400);
    --field-text: var(--ink-50);
    --field-placeholder: var(--ink-400);

    --chip-neutral-bg: var(--ink-800);
    --chip-neutral-text: var(--ink-200);
    --chip-brand-bg: var(--signal-900);
    --chip-brand-text: var(--signal-300);

    --chart-1: var(--signal-400);
    --chart-2: var(--copper-400);
    --chart-3: var(--ink-300);
    --chart-grid: var(--ink-800);
    --chart-axis: var(--ink-400);

    --elevation-card-hover: none;
    --elevation-raised: none;

    /* Warm surfaces in the dark theme: the same intent, deep and quiet. */
    --surface-mint: color-mix(in srgb, var(--signal-900) 55%, var(--ink-950));
    --surface-peach: color-mix(in srgb, var(--copper-700) 22%, var(--ink-950));
    --surface-sand: var(--ink-900);
    --tint-mint: var(--signal-900);
    --tint-peach: color-mix(in srgb, var(--copper-700) 45%, var(--ink-900));
    --tint-sand: var(--ink-800);
    --tint-sun: color-mix(in srgb, var(--warning-700) 40%, var(--ink-900));
    --text-on-tint: var(--signal-200);
    --dot-mint: var(--signal-700);
    --dot-peach: var(--copper-700);
    --shape-opacity: 0.45;
    --gradient-hero:
      radial-gradient(44rem 30rem at 6% 0%, color-mix(in srgb, var(--signal-900) 80%, var(--ink-950)), transparent 70%),
      radial-gradient(40rem 28rem at 96% 4%, color-mix(in srgb, var(--copper-700) 26%, var(--ink-950)), transparent 70%),
      var(--ink-950);
    --gradient-mint: linear-gradient(160deg, var(--signal-900) 0%, color-mix(in srgb, var(--signal-900) 40%, var(--ink-950)) 45%, var(--ink-950) 100%);
    --gradient-peach: linear-gradient(160deg, color-mix(in srgb, var(--copper-700) 30%, var(--ink-950)) 0%, var(--ink-900) 60%, color-mix(in srgb, var(--signal-900) 45%, var(--ink-950)) 100%);
    --gradient-sand: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-950) 100%);
    --shadow-soft: 0 16px 40px color-mix(in srgb, var(--ink-950) 70%, transparent);
  }
}

/* ==========================================================================
   6. RESPONSIVE OVERRIDES
   ========================================================================== */

@media (min-width: 768px) {
  :root {
    --gutter: 1.5rem;       /* 24px */
    --page-padding: 1.5rem;
    --section-y: var(--space-24);
    --section-y-lg: var(--space-32);
  }
}

@media (min-width: 1280px) {
  :root {
    --page-padding: 2.5rem; /* 40px */
    --section-y: var(--space-32);
    --section-y-lg: var(--space-40);
  }
}

/* ==========================================================================
   7. BASE
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--text-h1); line-height: var(--leading-h1); letter-spacing: var(--tracking-h1); font-weight: var(--weight-bold); }
h2 { font-size: var(--text-h2); line-height: var(--leading-h2); letter-spacing: var(--tracking-h2); font-weight: var(--weight-bold); }
h3 { font-size: var(--text-h3); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); font-weight: var(--weight-semibold); }
h4 { font-size: var(--text-h4); line-height: var(--leading-h4); letter-spacing: var(--tracking-h4); font-weight: var(--weight-semibold); }

p { margin: 0 0 var(--space-5); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: var(--text-code);
}

/* Every numeral that represents a measurement. */
.metric,
.tabular,
table td.numeric,
table th.numeric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.metric {
  font-size: var(--text-metric);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-h2);
  font-weight: var(--weight-bold);
}

.eyebrow {
  font-size: var(--text-eyebrow);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-eyebrow);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  color: var(--text-accent);
}

a { color: var(--text-link); }
/* Not the link-shaped WooCommerce buttons (cart "Proceed to checkout"): a bare
   a:hover outranks WordPress's :where()-wrapped button hover and painted them
   dark on dark. The :where() keeps this rule at a:hover's own weight, so the
   theme's .co-btn--primary:hover still sets its text colour (2026-10-07). */
a:where(:not(.wp-element-button)):hover { color: var(--text-link-hover); }

/* Prose links are always underlined — colour alone fails WCAG 1.4.1. */
.prose a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose a:hover { text-decoration-thickness: 2px; }

.prose { max-width: var(--measure); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

::selection {
  background: var(--signal-200);
  color: var(--ink-950);
}

img, svg, video { display: block; max-width: 100%; height: auto; }

hr {
  border: 0;
  border-top: var(--border-width) solid var(--border-subtle);
  margin: var(--space-12) 0;
}

/* Layout helpers ---------------------------------------------------------- */

.container       { width: 100%; max-width: var(--container);       margin-inline: auto; padding-inline: var(--page-padding); }
.container--prose{ width: 100%; max-width: var(--container-prose); margin-inline: auto; padding-inline: var(--page-padding); }
.container--wide { width: 100%; max-width: var(--container-wide);  margin-inline: auto; padding-inline: var(--page-padding); }

.section    { padding-block: var(--section-y); }
.section--lg{ padding-block: var(--section-y-lg); }

.section--alt     { background: var(--surface-alt); }
.section--warm    { background: var(--surface-warm); }
.section--inverse { background: var(--ink-950); color: var(--ink-50); }
.section--inverse h1,
.section--inverse h2,
.section--inverse h3,
.section--inverse h4 { color: var(--ink-50); }
.section--inverse .eyebrow { color: var(--signal-300); }

/* Skip link --------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100%;
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-5);
  background: var(--action-primary-bg);
  color: var(--action-primary-text);
  border-radius: var(--radius-md);
  font-weight: var(--weight-semibold);
  transition: top var(--duration-fast) var(--ease);
}
.skip-link:focus { top: var(--space-4); }

/* Reduced motion ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}