/* ============================================================
   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(59.31% 0.00007 271.152);
  --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);

  /* Highlight stack — for emphasis */
  --color-stack-1: #A8ADE0;
  --color-stack-2: #E09358;
  --color-stack-3: #7DB580;
  --color-stack-4: #6DBAA9;

  /* Solution identity colours */
  --color-solution-1: #5B8DEF;   /* Solution A blue */
  --color-solution-2: #95BF47;   /* Solution B green (recommended) */
  /* ----------------------------------------------------------
     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: 16px;
  --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: 860px;
  --content-wide-width: 1200px;

  /* ----------------------------------------------------------
     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;
}