/* ============================================================
   DESIGN TOKENS — Avon Protection
   ============================================================
   Update these variables with Avon Protection's brand colours,
   typography, and spacing to theme the entire presentation.
   ============================================================ */

:root {
   /* ----------------------------------------------------------
     BRAND COLOURS — Avon Protection
     ---------------------------------------------------------- */
   --color-brand-grey: #5B6770;
   /* Avon Protection brand grey */
   --color-brand-grey-light: #7A8490;
   --color-brand-grey-dark: #454E55;
   --color-brand-white: #FFFFFF;
   /* Avon Protection brand white */
   --color-brand-navy: #081F2C;   /* Avon Protection navy */

   /* Mapped tokens (used throughout the presentation) */
   --color-primary: #0A0A0A;      /* Black — primary background */
   --color-primary-light: #141414;
   --color-secondary: #FFFFFF;
   /* Brand white */
   --color-secondary-light: #F8F9FA;
   --color-accent: #5B6770;       /* Brand grey as accent */
   --color-accent-light: #7A8490;

   /* Neutrals */
   --color-white: #FFFFFF;
   --color-off-white: #F8F9FA;
   --color-gray-100: #E9ECEF;
   --color-gray-200: #DEE2E6;
   --color-gray-300: #CED4DA;
   --color-gray-400: #ADB5BD;
   --color-gray-500: #6C757D;
   --color-gray-600: #495057;
   --color-gray-700: #343A40;
   --color-gray-800: #212529;
   --color-black: #0A0A0A;

   /* Semantic */
   --color-success: #06D6A0;
   --color-warning: #FFD166;
   --color-danger: #EF476F;

   /* Tier colours (Good / Better / Best) */
   --color-tier-good:    #A6AEBF;
   --color-tier-better:  #5682B1;
   --color-tier-best:    #0B8457;

   /* ----------------------------------------------------------
     GRADIENTS
     ---------------------------------------------------------- */
   --gradient-primary: linear-gradient(135deg, #0A0A0A 0%, #111111 100%);
   --gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
   --gradient-hero: linear-gradient(160deg, #0A0A0A 0%, #0F0F0F 50%, #141414 100%);

   /* ----------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------- */
   --font-heading: 'Outfit', sans-serif;
   --font-body: 'Inter', sans-serif;

   --fs-display: clamp(2.8rem, 5vw, 5rem);
   --fs-h1: clamp(2rem, 3.5vw, 3.5rem);
   --fs-h2: clamp(1.5rem, 2.5vw, 2.5rem);
   --fs-h3: clamp(1.25rem, 2vw, 1.75rem);
   --fs-body: clamp(1rem, 1.2vw, 1.15rem);
   --fs-small: clamp(0.85rem, 1vw, 0.95rem);
   --fs-caption: clamp(0.75rem, 0.9vw, 0.85rem);

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

   --lh-tight: 1.1;
   --lh-normal: 1.65;
   --lh-relaxed: 1.8;

   /* ----------------------------------------------------------
     SPACING
     ---------------------------------------------------------- */
   --space-xs: 0.25rem;
   --space-sm: 0.5rem;
   --space-md: 1rem;
   --space-lg: 1.5rem;
   --space-xl: 2rem;
   --space-2xl: 3rem;
   --space-3xl: 4rem;
   --space-4xl: 6rem;

   /* ----------------------------------------------------------
     BORDERS & RADII
     ---------------------------------------------------------- */
   --radius-sm: 4px;
   --radius-md: 8px;
   --radius-lg: 16px;
   --radius-xl: 24px;
   --radius-full: 9999px;

   --border-thin: 1px solid var(--color-gray-200);
   --border-accent: 2px solid var(--color-accent);

   /* ----------------------------------------------------------
     SHADOWS
     ---------------------------------------------------------- */
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
   --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.18);
   --shadow-xl: 0 16px 50px rgba(0, 0, 0, 0.25);
   --shadow-glow: 0 0 30px rgba(0, 180, 216, 0.3);

   /* ----------------------------------------------------------
     TRANSITIONS
     ---------------------------------------------------------- */
   --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-in-out: cubic-bezier(0.87, 0, 0.13, 1);
   --duration-fast: 150ms;
   --duration-normal: 400ms;
   --duration-slow: 600ms;
   --duration-slide: 800ms;

   /* ----------------------------------------------------------
     Z-INDEX SCALE
     ---------------------------------------------------------- */
   --z-base: 1;
   --z-nav: 100;
   --z-overlay: 200;
   --z-modal: 300;
   --z-progress: 400;
}