/* =========================================================================
   Jasun Filtration — Design System Tokens
   Source of truth mirroring DESIGN.md Sections 2–6
   ========================================================================= */

:root {
  /* ---------- Section 2.2 — Reference layer (raw palette) ---------- */
  /* Internal only — components NEVER read --ref-* values directly      */
  --ref-ink: #181D26;
  --ref-ink-active: #0D1218;
  --ref-ink-hover: #2A2F38;

  --ref-red-500: #E32E25;

  --ref-coral-800: #AA2D00;
  --ref-cream-100: #F5E9D4;
  --ref-blue-300: #BDDCEF;

  --ref-blue-50: #EBF4FE;
  --ref-blue-100: #DBEAFE;
  --ref-blue-600: #1B61C9;
  --ref-blue-700: #1A3866;
  --ref-blue-800: #254FAD;

  --ref-white: #FFFFFF;
  --ref-gray-50: #F8FAFC;
  --ref-gray-100: #E0E2E6;
  --ref-gray-300: #DDDDDD;
  --ref-gray-400: #9297A0;
  --ref-gray-500: #41454D;
  --ref-gray-700: #333840;

  --ref-success-bg: #E7F6E9;
  --ref-success-fg: #006400;
  --ref-success-border: #39BF45;
  --ref-warning-bg: #FEF3C7;
  --ref-warning-fg: #B45309;
  --ref-warning-border: #F59E0B;
  --ref-danger-bg: #FEE2E2;
  --ref-danger-fg: #B91C1C;
  --ref-danger-border: #DC2626;
  --ref-info-bg: #DBEAFE;
  --ref-info-fg: #254FAD;
  --ref-info-border: #458FFF;

  --ref-ink-60: rgba(24, 29, 38, 0.60);
  --ref-ink-40: rgba(24, 29, 38, 0.40);
  --ref-blur-sm: blur(4px);
  --ref-blur-md: blur(12px);
}

@layer theme {
  :root {
    /* ===================================================================
       Section 2.3 — Semantic core
       =================================================================== */
    --color-ink: var(--ref-ink);
    --color-brand: var(--ref-red-500);
    --color-link: var(--ref-blue-600);
    --color-purchase: var(--color-ink);

    /* ===================================================================
       Section 2.4 — Page surfaces
       =================================================================== */
    --surface-canvas: var(--ref-white);
    --surface-soft: var(--ref-gray-50);
    --surface-blue-soft: var(--ref-blue-50);
    --surface-strong: var(--ref-gray-100);

    /* ===================================================================
       Section 2.5 — Voltage surfaces (full-bleed only)
       =================================================================== */
    --surface-dark: var(--ref-ink);
    --surface-coral: var(--ref-coral-800);
    --surface-cream: var(--ref-cream-100);
    --surface-blue-band: var(--ref-blue-300);

    /* ===================================================================
       Section 2.6 — Text colours
       =================================================================== */
    --text-primary: var(--ref-ink);
    --text-body: var(--ref-gray-700);
    --text-muted: var(--ref-gray-500);
    --text-disabled: var(--ref-gray-400);
    --text-on-dark: var(--ref-white);
    --text-on-cream: var(--text-primary);
    --text-on-brand: var(--ref-white);
    --text-link: var(--color-link);
    --text-link-hover: var(--ref-blue-700);
    --text-price-sale: var(--text-primary);

    /* ===================================================================
       Section 2.7 — Border colours
       =================================================================== */
    --border-hairline: var(--ref-gray-300);
    --border-strong: var(--ref-gray-400);
    --border-focus: var(--ref-blue-600);
    --border-info: var(--ref-info-border);

    /* ===================================================================
       Section 2.8 — Semantic states
       =================================================================== */
    --state-success-bg: var(--ref-success-bg);
    --state-success-fg: var(--ref-success-fg);
    --state-success-border: var(--ref-success-border);
    --state-warning-bg: var(--ref-warning-bg);
    --state-warning-fg: var(--ref-warning-fg);
    --state-warning-border: var(--ref-warning-border);
    --state-danger-bg: var(--ref-danger-bg);
    --state-danger-fg: var(--ref-danger-fg);
    --state-danger-border: var(--ref-danger-border);
    --state-info-bg: var(--ref-info-bg);
    --state-info-fg: var(--ref-info-fg);
    --state-info-border: var(--ref-info-border);

    /* ===================================================================
       Section 2.9 — Hover and active variants
       =================================================================== */
    --button-primary-bg: var(--color-ink);
    --button-primary-bg-hover: var(--ref-ink-hover);
    --button-primary-bg-active: var(--ref-ink-active);
    --button-secondary-bg: var(--surface-canvas);
    --button-secondary-bg-hover: var(--surface-soft);
    --button-secondary-bg-active: var(--ref-gray-100);
    --button-tertiary-fg: var(--color-link);
    --button-tertiary-fg-hover: var(--ref-blue-700);
    --card-border-hover: var(--border-strong);

    /* ===================================================================
       Section 2.11 — Overlays
       =================================================================== */
    --color-overlay-strong: var(--ref-ink-60);
    --color-overlay-subtle: var(--ref-ink-40);
    --backdrop-modal-bg: var(--color-overlay-strong);
    --backdrop-modal-blur: var(--ref-blur-md);
    --backdrop-drawer-bg: var(--color-overlay-subtle);
    --backdrop-drawer-blur: var(--ref-blur-sm);

    /* ===================================================================
       Section 3 — Typography
       =================================================================== */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --type-display-xl: clamp(2.5rem, 5vw + 1rem, 4rem);
    --type-display-lg: clamp(2rem, 4vw + 0.75rem, 3.25rem);
    --type-display-md: clamp(1.625rem, 3vw + 0.625rem, 2.5rem);
    --type-h1: clamp(1.5rem, 2vw + 0.5rem, 2rem);
    --type-h2: clamp(1.25rem, 1.5vw + 0.5rem, 1.625rem);
    --type-h3: 1.25rem;
    --type-h4: 1.125rem;
    --type-title-md: 1.125rem;
    --type-title-sm: 1rem;
    --type-label-md: 0.875rem;
    --type-label-sm: 0.75rem;
    --type-button: 0.9375rem;
    --type-body-md: 1rem;
    --type-body-sm: 0.875rem;
    --type-caption: 0.75rem;
    --type-legal: 0.8125rem;

    --type-product-title: 1rem;
    --type-product-title-small: 0.875rem;
    --type-price-large: 1.75rem;
    --type-price-default: 1.125rem;
    --type-price-small: 0.875rem;
    --type-strike-large: 1.5rem;
    --type-strike-default: 1rem;
    --type-strike-small: 0.8125rem;

    --lh-display: 1.1;
    --lh-heading: 1.2;
    --lh-title: 1.35;
    --lh-body: 1.55;
    --lh-body-tight: 1.4;
    --lh-caption: 1.4;
    --ls-default: 0;
    --ls-uppercase: 0.04em;

    /* ===================================================================
       Section 4 — Spacing
       =================================================================== */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    --spacing-section: clamp(3rem, 6vw + 1rem, 6rem);
    --spacing-section-compact: clamp(2rem, 4vw + 0.5rem, 4rem);
    --spacing-section-spacious: clamp(4rem, 8vw + 1rem, 8rem);
    --spacing-hero: clamp(2.5rem, 5vw + 0.5rem, 5rem);
    --container-padding: clamp(1rem, 3vw + 0.5rem, 3rem);

    --spacing-block: var(--space-12);
    --spacing-block-compact: var(--space-8);
    --spacing-stack-xs: var(--space-1);
    --spacing-stack-sm: var(--space-2);
    --spacing-stack-md: var(--space-4);
    --spacing-stack-lg: var(--space-6);
    --spacing-stack-xl: var(--space-8);
    --spacing-inline-xs: var(--space-1);
    --spacing-inline-sm: var(--space-2);
    --spacing-inline-md: var(--space-3);
    --spacing-inline-lg: var(--space-4);

    --spacing-card-padding: var(--space-6);
    --spacing-card-padding-lg: var(--space-8);
    --spacing-card-padding-xl: var(--space-12);
    --spacing-button-padding-x: var(--space-5);
    --spacing-button-padding-y: var(--space-3);
    --spacing-button-padding-x-sm: var(--space-4);
    --spacing-button-padding-y-sm: var(--space-2);
    --spacing-input-padding-x: var(--space-4);
    --spacing-input-padding-y: var(--space-3);

    --container-narrow: 40rem;
    --container-default: 75rem;
    --container-wide: 96rem; /* 1536px — wide marketing/hero bands. (Retuned from 90rem on 2026-05-29 for the PLP table; data-dense pages now use --container-data.) */
    --container-data: 112rem; /* 1792px — data-dense pages: PLP/PDP variant tables, comparison views. See TOKEN-CHANGELOG 2026-06-03. */
    --container-full: 100%;

    --grid-gutter: var(--space-6);
    --grid-gutter-sm: var(--space-4);

    /* ===================================================================
       Section 5 — Tables
       =================================================================== */
    --table-row-height: 2.75rem;
    --table-row-height-mobile: 3.5rem;
    --table-header-height: 3.5rem;
    --table-cell-padding-x: var(--space-4);
    --table-cell-padding-y: var(--space-3);
    --table-header-bg: var(--surface-soft);
    --table-row-bg: var(--surface-canvas);
    --table-row-bg-alt: var(--surface-soft);
    --table-row-bg-hover: var(--surface-soft);
    --table-row-bg-selected: var(--surface-blue-soft);
    --table-divider: var(--border-hairline);
    --table-header-underline: var(--border-strong);

    /* ===================================================================
       Section 6.1 — Radius
       =================================================================== */
    --radius-xs: 0.125rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 0.75rem;
    --radius-full: 9999px;

    /* ===================================================================
       Section 6.3 — Elevation
       =================================================================== */
    --elevation-flat: none;
    --elevation-hairline: 0 0 0 0.5px rgba(24, 29, 38, 0.10);
    --elevation-raised: 0 1px 2px rgba(24, 29, 38, 0.04);
    --elevation-floating: 0 4px 12px rgba(24, 29, 38, 0.08);
    --elevation-modal: 0 16px 48px rgba(24, 29, 38, 0.12);
  }
}

/* =========================================================================
   Base reset + body defaults
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--type-body-md);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11";
}
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--text-link-hover); }
code, pre { font-family: var(--font-mono); }

/* Focus rings — Section 2.10 R8 — mandatory, 2px outer, 2px offset */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}