/* =============================================================================
   EXTRAORDINARY SAFARIS — DESIGN TOKENS
   Vanquish Brand Design
   All colour, typography, spacing, and motion values live here.
   Every other CSS file consumes these variables — never hardcode values.
============================================================================= */

:root {

  /* -------------------------------------------------------------------------
     COLOUR PALETTE
  -------------------------------------------------------------------------- */

  /* Core surfaces */
  --color-ground:        #0E0C0A;   /* Deepest background — main canvas          */
  --color-surface-1:     #161310;   /* Cards, panels — one step up                */
  --color-surface-2:     #1E1A16;   /* Hover states, elevated cards               */
  --color-surface-3:     #262018;   /* Borders, dividers, subtle separators       */

  /* Text */
  --color-text-primary:  #F0EBE3;   /* Parchment white — headings, primary body   */
  --color-text-secondary:#B8AA99;   /* Muted — captions, meta, secondary labels   */
  --color-text-tertiary: #7A6E61;   /* Hints, placeholders, disabled states       */

  /* Accent — Ember */
  --color-ember:         #8B3A2A;   /* Primary accent — CTAs, highlights          */
  --color-ember-light:   #A8473A;   /* Hover state on ember elements              */
  --color-ember-pale:    #3D1A12;   /* Subtle ember tint for backgrounds          */

  /* Gold — secondary accent, use sparingly */
  --color-gold:          #C9A55A;   /* Decorative lines, icon accents             */
  --color-gold-muted:    #7A6234;   /* Subtle gold for borders                    */

  /* Parchment — for inverted light sections if needed */
  --color-parchment:     #F8F6F2;
  --color-parchment-dark:#E8E2D8;

  /* Utility */
  --color-border:        rgba(240, 235, 227, 0.08);   /* Default border           */
  --color-border-strong: rgba(240, 235, 227, 0.16);   /* Hover/focus borders      */
  --color-overlay:       rgba(14, 12, 10, 0.72);      /* Image overlays           */
  --color-overlay-heavy: rgba(14, 12, 10, 0.88);      /* Hero overlay             */

  /* Status */
  --color-success:       #4A7C59;
  --color-error:         #8B3A2A;

  /* -------------------------------------------------------------------------
     TYPOGRAPHY
  -------------------------------------------------------------------------- */

  /* Font families */
  --font-display:  'Quine', 'Georgia', serif;          /* Headlines, hero text    */
  --font-body:     'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

  /* Type scale — fluid where needed */
  --text-xs:    0.6875rem;   /*  11px */
  --text-sm:    0.8125rem;   /*  13px */
  --text-base:  1rem;        /*  16px */
  --text-md:    1.125rem;    /*  18px */
  --text-lg:    1.25rem;     /*  20px */
  --text-xl:    1.5rem;      /*  24px */
  --text-2xl:   2rem;        /*  32px */
  --text-3xl:   2.75rem;     /*  44px */
  --text-4xl:   3.75rem;     /*  60px */
  --text-5xl:   5rem;        /*  80px */
  --text-6xl:   6.5rem;      /* 104px */

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;
  --leading-loose:   2;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.2em;

  /* Font weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;

  /* -------------------------------------------------------------------------
     SPACING
  -------------------------------------------------------------------------- */

  --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 */
  --space-48:  12rem;      /* 192px */

  /* Section vertical padding */
  --section-padding-y: clamp(4rem, 8vw, 8rem);

  /* -------------------------------------------------------------------------
     LAYOUT
  -------------------------------------------------------------------------- */

  --container-max:       1440px;
  --container-wide:      1280px;
  --container-default:   1120px;
  --container-narrow:     720px;
  --container-padding-x: clamp(1.25rem, 5vw, 4rem);

  /* -------------------------------------------------------------------------
     BORDERS & RADII
  -------------------------------------------------------------------------- */

  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* -------------------------------------------------------------------------
     SHADOWS
  -------------------------------------------------------------------------- */

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.6);
  --shadow-xl:  0 24px 64px rgba(0,0,0,0.7);

  /* -------------------------------------------------------------------------
     MOTION
  -------------------------------------------------------------------------- */

  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-base:   280ms;
  --duration-slow:   480ms;
  --duration-slower: 800ms;

  /* -------------------------------------------------------------------------
     NAV
  -------------------------------------------------------------------------- */

  --nav-height: 80px;
  --nav-height-scrolled: 64px;

  /* -------------------------------------------------------------------------
     Z-INDEX SCALE
  -------------------------------------------------------------------------- */

  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-nav:      300;
  --z-modal:    400;
  --z-toast:    500;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0ms;
    --duration-base:   0ms;
    --duration-slow:   0ms;
    --duration-slower: 0ms;
  }
}