/* ==========================================================================
   Pearl Island Tours — Design Tokens
   The single source of truth for colour, type, space, radii, shadow, motion.
   Nothing else in the stylesheet set should hard-code a raw value.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------
     1. PALETTE — raw brand ramps
     Built from the three logo colours:
       forest  #227026   gold  #B8860B   pearl white
     --------------------------------------------------------------- */

  /* Forest green — primary brand colour, used for structure and depth */
  --palette-forest-950: #07200D;
  --palette-forest-900: #0B2E12;
  --palette-forest-800: #123F19;
  --palette-forest-700: #19551F;
  --palette-forest-600: #227026; /* brand green */
  --palette-forest-500: #2E8A33;
  --palette-forest-300: #8EC191;
  --palette-forest-200: #C7E0C8;
  --palette-forest-100: #E4F0E5;
  --palette-forest-50:  #F2F8F3;

  /* Antique gold — the single accent, reserved for calls to action */
  --palette-gold-800: #6E5006;
  --palette-gold-700: #8A6508; /* AA on white — used for gold text + CTA fill */
  --palette-gold-600: #A5780A;
  --palette-gold-500: #B8860B; /* brand gold */
  --palette-gold-400: #D3A229;
  --palette-gold-200: #EBD9A6;
  --palette-gold-100: #F6ECD4;
  --palette-gold-50:  #FBF6E8;

  /* Pearl white + neutral greys */
  --palette-pearl:      #FBFAF7; /* brand "pearl white" */
  --palette-white:      #FFFFFF;
  --palette-grey-50:    #F5F5F2;
  --palette-grey-100:   #EDEDE8;
  --palette-grey-200:   #DFDFD8;
  --palette-grey-300:   #C6C7BE;
  --palette-grey-500:   #8A8D85;
  --palette-grey-600:   #6B6F68;
  --palette-grey-700:   #4C514B;
  --palette-grey-900:   #1C211D;

  /* ---------------------------------------------------------------
     2. SEMANTIC COLOUR — what the palette is actually used for
     --------------------------------------------------------------- */
  --color-brand:            var(--palette-forest-600);
  --color-brand-dark:       var(--palette-forest-800);
  --color-brand-darkest:    var(--palette-forest-950);
  --color-accent:           var(--palette-gold-500);
  --color-accent-strong:    var(--palette-gold-700);

  --color-surface:          var(--palette-white);
  --color-surface-alt:      var(--palette-pearl);
  --color-surface-muted:    var(--palette-grey-50);
  --color-surface-tint:     var(--palette-forest-50);
  --color-surface-inverse:  var(--palette-forest-900);

  --color-text:             var(--palette-grey-900);
  --color-text-muted:       var(--palette-grey-700);
  --color-text-subtle:      var(--palette-grey-600);
  --color-text-inverse:     var(--palette-white);
  --color-text-inverse-muted: rgba(255, 255, 255, 0.78);

  --color-border:           var(--palette-grey-200);
  --color-border-strong:    var(--palette-grey-300);
  --color-border-inverse:   rgba(255, 255, 255, 0.18);

  --color-focus:            var(--palette-gold-500);

  /* Image / hero scrims */
  --scrim-hero: linear-gradient(
    100deg,
    rgba(7, 32, 13, 0.92) 0%,
    rgba(7, 32, 13, 0.78) 38%,
    rgba(7, 32, 13, 0.34) 68%,
    rgba(7, 32, 13, 0.46) 100%
  );
  --scrim-card: linear-gradient(
    to top,
    rgba(7, 32, 13, 0.88) 0%,
    rgba(7, 32, 13, 0.52) 42%,
    rgba(7, 32, 13, 0.06) 100%
  );
  --scrim-band: linear-gradient(
    to right,
    rgba(7, 32, 13, 0.88) 0%,
    rgba(7, 32, 13, 0.70) 55%,
    rgba(7, 32, 13, 0.55) 100%
  );

  /* ---------------------------------------------------------------
     3. TYPOGRAPHY
     --------------------------------------------------------------- */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: var(--font-sans);
  --font-heading: var(--font-sans);

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Fluid type scale — min at 360px, max at 1440px */
  --text-eyebrow:  0.75rem;
  --text-xs:       0.8125rem;
  --text-sm:       0.9375rem;
  --text-base:     1.0625rem;
  --text-md:       clamp(1.0625rem, 1.01rem + 0.25vw, 1.1875rem);
  --text-lg:       clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  --text-xl:       clamp(1.375rem, 1.25rem + 0.55vw, 1.625rem);
  --text-2xl:      clamp(1.625rem, 1.4rem + 0.95vw, 2.125rem);
  --text-3xl:      clamp(2rem, 1.63rem + 1.6vw, 2.875rem);
  --text-4xl:      clamp(2.375rem, 1.72rem + 2.8vw, 3.9rem);

  --leading-tight: 1.12;
  --leading-snug: 1.28;
  --leading-normal: 1.5;
  --leading-relaxed: 1.68;

  --tracking-tight: -0.022em;
  --tracking-snug: -0.012em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-eyebrow: 0.15em;

  --measure-narrow: 36ch;
  --measure: 62ch;
  --measure-wide: 74ch;

  /* ---------------------------------------------------------------
     4. SPACE — 4px base
     --------------------------------------------------------------- */
  --space-2xs: 0.25rem;   /*  4 */
  --space-xs:  0.5rem;    /*  8 */
  --space-sm:  0.75rem;   /* 12 */
  --space-md:  1rem;      /* 16 */
  --space-lg:  1.5rem;    /* 24 */
  --space-xl:  2rem;      /* 32 */
  --space-2xl: 2.5rem;    /* 40 */
  --space-3xl: 3.5rem;    /* 56 */
  --space-4xl: 5rem;      /* 80 */
  --space-5xl: 7rem;      /* 112 */

  /* Vertical rhythm for full sections */
  --section-space: clamp(3.5rem, 2.2rem + 5.4vw, 6.5rem);
  --section-space-lg: clamp(4.5rem, 2.8rem + 7vw, 8rem);

  /* ---------------------------------------------------------------
     5. LAYOUT
     --------------------------------------------------------------- */
  --container-max: 1200px;
  --container-narrow: 860px;
  --container-gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
  --header-height: 76px;
  --header-height-compact: 64px;

  /* ---------------------------------------------------------------
     6. RADII — small, conservative
     --------------------------------------------------------------- */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------
     7. SHADOW — soft, low-contrast
     --------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(11, 46, 18, 0.06);
  --shadow-sm: 0 2px 6px rgba(11, 46, 18, 0.07);
  --shadow-md: 0 6px 20px rgba(11, 46, 18, 0.09);
  --shadow-lg: 0 16px 44px rgba(11, 46, 18, 0.13);
  --shadow-xl: 0 28px 70px rgba(7, 32, 13, 0.2);
  --shadow-focus: 0 0 0 3px rgba(184, 134, 11, 0.45);

  /* ---------------------------------------------------------------
     8. MOTION
     --------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 260ms;
  --duration-slow: 520ms;

  /* ---------------------------------------------------------------
     9. ELEVATION ORDER
     --------------------------------------------------------------- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 50;
  --z-header: 100;
  --z-overlay: 200;
}