/* ============================================================
   DESIGN TOKENS — Avon Protection Web Proposal
   ============================================================
   OKLCH-based color system with tinted neutrals.
   No pure black or pure white.
   ============================================================ */

:root {
   /* ----------------------------------------------------------
     BRAND COLOURS — Avon Protection
     Tinted toward brand navy hue (230°) for cohesion.
     ---------------------------------------------------------- */
   --color-brand-grey: oklch(0.52 0.02 240);
   --color-brand-grey-light: oklch(0.60 0.015 240);
   --color-brand-grey-dark: oklch(0.40 0.025 240);
   --color-brand-navy: oklch(0.22 0.04 240);

   /* Surface hierarchy (dark, navy-tinted) */
   --color-surface-0: oklch(0.13 0.012 240);
   --color-surface-1: oklch(0.16 0.01 240);
   --color-surface-2: oklch(0.19 0.008 240);
   --color-surface-3: oklch(0.22 0.008 240);
   --color-surface-4: oklch(0.26 0.008 240);

   /* Text hierarchy */
   --color-text-primary: oklch(0.93 0.005 240);
   --color-text-secondary: oklch(0.78 0.008 240);
   --color-text-tertiary: oklch(0.58 0.01 240);
   --color-text-muted: oklch(0.45 0.012 240);

   /* Borders */
   --color-border-subtle: oklch(0.25 0.008 240);
   --color-border-default: oklch(0.32 0.01 240);
   --color-border-emphasis: oklch(0.45 0.015 240);

   /* Semantic — neutral greys */
   --color-success: oklch(0.72 0.00 0);
   --color-warning: oklch(0.72 0.00 0);
   --color-danger: oklch(0.55 0.00 0);
   --color-info: oklch(0.62 0.00 0);

   /* Option colours — neutral */
   --color-option-1: oklch(0.78 0.005 240);
   --color-option-2: oklch(0.68 0.005 240);

   /* Accent — subtle white/grey */
   --color-accent: oklch(0.45 0.005 240);

   /* ----------------------------------------------------------
     TYPOGRAPHY
     Manrope (geometric humanist) + Source Serif 4 (refined serif)
     ---------------------------------------------------------- */
   --font-heading: 'Outfit', sans-serif;
   --font-body: 'Inter', sans-serif;
   --font-mono: 'Inter', sans-serif;
   --font-label: 'Outfit', sans-serif;

   /* Scale: 1.333 (perfect fourth) */
   --fs-display: clamp(3rem, 5.5vw, 5.2rem);
   --fs-h1: clamp(2rem, 3.2vw, 3rem);
   --fs-h2: clamp(1.6rem, 2.4vw, 2.2rem);
   --fs-h3: clamp(1.25rem, 1.7vw, 1.5rem);
   --fs-h4: clamp(1.05rem, 1.3vw, 1.2rem);
   --fs-body: clamp(0.95rem, 1.05vw, 1.05rem);
   --fs-body-lg: clamp(1.05rem, 1.2vw, 1.15rem);
   --fs-small: clamp(0.85rem, 0.9vw, 0.9rem);
   --fs-caption: clamp(0.72rem, 0.78vw, 0.78rem);

   --fw-regular: 400;
   --fw-medium: 500;
   --fw-semibold: 600;
   --fw-bold: 700;
   --fw-extrabold: 800;

   --lh-tight: 1.1;
   --lh-snug: 1.3;
   --lh-normal: 1.7;
   --lh-relaxed: 1.85;

   /* ----------------------------------------------------------
     SPACING — varied for rhythm
     ---------------------------------------------------------- */
   --space-xs: 0.25rem;
   --space-sm: 0.5rem;
   --space-md: 1rem;
   --space-lg: 1.5rem;
   --space-xl: 2rem;
   --space-2xl: 3rem;
   --space-3xl: 4.5rem;
   --space-4xl: 6rem;
   --space-5xl: 9rem;
   --space-6xl: 12rem;

   /* Document layout */
   --sidebar-width: 240px;
   --content-max-width: 680px;
   --content-wide-width: 1040px;

   /* ----------------------------------------------------------
     RADII
     ---------------------------------------------------------- */
   --radius-sm: 3px;
   --radius-md: 6px;
   --radius-lg: 10px;
   --radius-xl: 14px;
   --radius-full: 9999px;

   /* ----------------------------------------------------------
     SHADOWS — tinted toward navy
     ---------------------------------------------------------- */
   --shadow-sm: 0 1px 2px oklch(0.1 0.02 240 / 0.3);
   --shadow-md: 0 4px 12px oklch(0.1 0.02 240 / 0.35);
   --shadow-lg: 0 12px 32px oklch(0.08 0.02 240 / 0.4);

   /* ----------------------------------------------------------
     TRANSITIONS
     ---------------------------------------------------------- */
   --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
   --duration-fast: 120ms;
   --duration-normal: 300ms;
   --duration-slow: 500ms;
   --duration-reveal: 700ms;

   /* ----------------------------------------------------------
     Z-INDEX
     ---------------------------------------------------------- */
   --z-base: 1;
   --z-sidebar: 50;
   --z-progress: 100;
   --z-gate: 200;
}