/* ==========================================================================
   KERKINI BOAT — DESIGN TOKENS
   --------------------------------------------------------------------------
   This is the single source of truth for the visual language of the site.
   Change a value here and it propagates everywhere. Nothing else in the
   codebase should hard-code a colour, a font size, a spacing value or a
   duration — always reference a token.

   CONTENTS
     1. Colour primitives  (raw palette — do not use directly in components)
     2. Semantic colours   (use THESE in components)
     3. Typography
     4. Spacing & layout
     5. Radii, borders, shadows
     6. Motion
     7. Z-index scale

   ACCESSIBILITY NOTE
     Every foreground/background pair defined in §2 has been verified to meet
     WCAG 2.2 AA (4.5:1 for body text, 3:1 for large text and UI boundaries).
     If you change a colour, re-check the pair before shipping.
   ========================================================================== */

:root {
  /* ======================================================================
     1. COLOUR PRIMITIVES — "Earth & Lake"
     ----------------------------------------------------------------------
     Drawn from Lake Kerkini itself: the deep teal of the water at dawn, the
     mist over Mt. Belles, the reed beds, the wet clay of the shoreline and
     the warm timber of the traditional boat.
     ====================================================================== */

  /* Water — from deepest to lightest */
  --p-deep:      #0E3A3F;   /* deep water; primary brand dark   */
  --p-lake:      #12585F;   /* lake                              */
  --p-lake-mid:  #1B7C86;   /* sunlit shallows                   */
  --p-shallow:   #4FA3AC;   /* shallow water                     */
  --p-mist:      #A8CBCF;   /* morning mist                      */
  --p-foam:      #DCEAEA;   /* foam                              */

  /* Earth — warm neutrals and clay */
  --p-ink:       #1F1C17;   /* warm near-black; body copy        */
  --p-bark:      #4A3F33;   /* secondary copy                    */
  --p-stone:     #6B6055;   /* tertiary / captions               */
  --p-clay:      #A0512A;   /* terracotta accent                 */
  --p-clay-deep: #8A4423;   /* accent on light-warm surfaces     */
  --p-clay-lt:   #C97F52;   /* accent on mid surfaces / graphics  */
  --p-clay-pale: #E9B892;   /* accent TEXT on dark surfaces
                               (6.9:1 on --p-deep, 5.3:1 on the
                               lightest point of .access-panel)   */
  --p-sand:      #E7DCC9;   /* sandbank; section fill            */
  --p-sand-lt:   #F2EAE0;   /* pale sand                         */
  --p-paper:     #FBF8F3;   /* page background                   */
  --p-white:     #FFFFFF;

  /* Reed beds — supporting green */
  --p-reed:      #5F6E3E;
  --p-reed-lt:   #93A46C;

  /* Status */
  --p-success:   #2F6B4F;
  --p-error:     #9B2C22;

  /* ======================================================================
     2. SEMANTIC COLOURS — use these in components
     ====================================================================== */

  /* Surfaces */
  --c-bg:              var(--p-paper);
  --c-bg-subtle:       var(--p-sand-lt);
  --c-bg-sand:         var(--p-sand);
  --c-bg-inverse:      var(--p-deep);
  --c-bg-inverse-alt:  var(--p-lake);
  --c-surface:         var(--p-white);

  /* Text on light surfaces */
  --c-text:            var(--p-ink);      /* 16.0:1 on --c-bg */
  --c-text-muted:      var(--p-bark);     /*  9.7:1 on --c-bg */
  --c-text-subtle:     var(--p-stone);    /*  5.8:1 on --c-bg */
  --c-heading:         var(--p-deep);     /* 11.7:1 on --c-bg */

  /* Text on dark surfaces */
  --c-text-inverse:        var(--p-white);   /* 12.4:1 on --c-bg-inverse */
  --c-text-inverse-muted:  var(--p-mist);    /*  7.1:1 on --c-bg-inverse */

  /* Brand / interactive */
  --c-primary:          var(--p-lake);
  --c-primary-hover:    var(--p-deep);
  --c-primary-contrast: var(--p-white);
  --c-accent:           var(--p-clay);
  --c-accent-hover:     var(--p-clay-deep);
  --c-accent-contrast:  var(--p-white);
  --c-accent-on-sand:   var(--p-clay-deep); /* 5.3:1 on --c-bg-sand */
  --c-accent-on-dark:   var(--p-clay-pale);

  /* Links */
  --c-link:        var(--p-lake);
  --c-link-hover:  var(--p-clay-deep);

  /* Lines & edges */
  --c-border:         #E2D8C6;
  --c-border-strong:  #C9BCA4;
  --c-border-inverse: rgba(255, 255, 255, .22);

  /* Focus ring — must stay >= 3:1 against every surface it lands on */
  --c-focus:         var(--p-clay-deep);
  --c-focus-inverse: var(--p-shallow);

  /* Feedback */
  --c-success: var(--p-success);
  --c-error:   var(--p-error);

  /* Accessibility badge — used to mark ΑμεΑ / accessible features */
  --c-access-bg:     #0B4A6E;
  --c-access-text:   var(--p-white);

  /* ======================================================================
     3. TYPOGRAPHY
     ----------------------------------------------------------------------
     Alegreya   — display serif. Full Greek + Latin. Warm, calligraphic.
     Commissioner — UI/body sans. Full Greek + Latin. Neutral humanist.
     Both are self-hosted variable fonts (see fonts.css).
     ====================================================================== */

  --font-display: 'Alegreya', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body:    'Commissioner', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Fluid type scale — 1.25 ratio at mobile, opening to ~1.333 at desktop.
     Every step is clamp(min, preferred, max) so text scales with the viewport
     without ever needing a media query. */
  --fs-2xs: clamp(0.75rem,  0.73rem + 0.10vw, 0.8125rem);
  --fs-xs:  clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --fs-sm:  clamp(0.9375rem, 0.91rem + 0.14vw, 1rem);
  --fs-md:  clamp(1.0625rem, 1.03rem + 0.18vw, 1.1875rem);
  --fs-lg:  clamp(1.1875rem, 1.13rem + 0.28vw, 1.375rem);
  --fs-xl:  clamp(1.375rem,  1.28rem + 0.48vw, 1.75rem);
  --fs-2xl: clamp(1.625rem,  1.46rem + 0.82vw, 2.25rem);
  --fs-3xl: clamp(1.9375rem, 1.66rem + 1.39vw, 2.9375rem);
  --fs-4xl: clamp(2.25rem,   1.80rem + 2.25vw, 3.8125rem);
  --fs-5xl: clamp(2.625rem,  1.90rem + 3.63vw, 5rem);

  /* Weights (variable-font axis values) */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-black:     800;

  /* Line heights */
  --lh-tight:   1.08;
  --lh-snug:    1.22;
  --lh-heading: 1.16;
  --lh-normal:  1.42;
  --lh-relaxed: 1.68;
  --lh-loose:   1.8;

  /* Letter spacing */
  --ls-tighter: -0.022em;
  --ls-tight:   -0.012em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-wider:   0.10em;
  --ls-widest:  0.18em;

  /* Measure — optimal reading width */
  --measure:        66ch;
  --measure-narrow: 46ch;
  --measure-wide:   78ch;

  /* ======================================================================
     4. SPACING & LAYOUT
     ====================================================================== */

  --sp-3xs: 0.25rem;   /*  4px */
  --sp-2xs: 0.5rem;    /*  8px */
  --sp-xs:  0.75rem;   /* 12px */
  --sp-sm:  1rem;      /* 16px */
  --sp-md:  1.5rem;    /* 24px */
  --sp-lg:  2rem;      /* 32px */
  --sp-xl:  3rem;      /* 48px */
  --sp-2xl: 4rem;      /* 64px */
  --sp-3xl: 6rem;      /* 96px */
  --sp-4xl: 8rem;      /* 128px */

  /* Fluid vertical rhythm for page sections */
  --section-y:       clamp(3.5rem, 2.2rem + 6.5vw, 8rem);
  --section-y-tight: clamp(2.5rem, 1.7rem + 4vw,   5rem);

  /* Container widths */
  --container:        76rem;   /* 1216px — default page width */
  --container-wide:   88rem;   /* 1408px — galleries, wide media */
  --container-narrow: 48rem;   /*  768px — long-form prose */
  --gutter: clamp(1.125rem, 0.7rem + 2.1vw, 2.5rem);

  /* Grid */
  --grid-gap:       clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  --grid-gap-tight: clamp(0.75rem, 0.6rem + 0.8vw, 1.25rem);

  /* Header */
  --header-h:         4.5rem;
  --header-h-compact: 3.75rem;

  /* ======================================================================
     5. RADII, BORDERS, SHADOWS
     ====================================================================== */

  --r-xs:   3px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-full: 999px;

  --bw: 1px;

  /* Shadows are warm-tinted (never neutral grey) so they sit inside the
     earth palette rather than on top of it. */
  --sh-xs: 0 1px 2px rgba(31, 28, 23, .06);
  --sh-sm: 0 2px 6px rgba(31, 28, 23, .07), 0 1px 2px rgba(31, 28, 23, .05);
  --sh-md: 0 6px 18px rgba(31, 28, 23, .09), 0 2px 6px rgba(31, 28, 23, .05);
  --sh-lg: 0 16px 40px rgba(31, 28, 23, .12), 0 4px 12px rgba(31, 28, 23, .06);
  --sh-xl: 0 28px 68px rgba(14, 58, 63, .18), 0 8px 20px rgba(31, 28, 23, .08);

  /* ======================================================================
     6. MOTION
     ----------------------------------------------------------------------
     Durations are consumed by both CSS transitions and the GSAP timelines
     (read via getComputedStyle in animations.js) so motion stays consistent
     across the whole site. All of it collapses to 0 under
     `prefers-reduced-motion: reduce`.
     ====================================================================== */

  --dur-instant: 80ms;
  --dur-fast:    180ms;
  --dur-base:    280ms;
  --dur-slow:    520ms;
  --dur-slower:  820ms;
  --dur-reveal:  1000ms;

  --ease-out:   cubic-bezier(.22, .61, .36, 1);
  --ease-in:    cubic-bezier(.55, .06, .68, .19);
  --ease-inout: cubic-bezier(.65, .05, .36, 1);
  --ease-soft:  cubic-bezier(.25, .46, .45, .94);

  /* Scroll-reveal defaults */
  --reveal-y:    28px;
  --reveal-stag: 0.09;

  /* ======================================================================
     7. Z-INDEX SCALE
     ====================================================================== */

  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-sticky:    100;
  --z-header:    200;
  --z-drawer:    300;
  --z-overlay:   400;
  --z-modal:     500;
  --z-toast:     600;
  --z-skiplink:  900;
}

/* ==========================================================================
   REDUCED MOTION
   Collapse every duration to a near-zero value. Because the GSAP layer reads
   these same tokens, this one block quiets both CSS and JS animation.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast:    1ms;
    --dur-base:    1ms;
    --dur-slow:    1ms;
    --dur-slower:  1ms;
    --dur-reveal:  1ms;
    --reveal-y:    0px;
    --reveal-stag: 0;
  }
}

/* ==========================================================================
   FORCED COLORS (Windows High Contrast Mode)
   ========================================================================== */
@media (forced-colors: active) {
  :root {
    --c-border:        CanvasText;
    --c-border-strong: CanvasText;
    --c-focus:         Highlight;
    --c-focus-inverse: Highlight;
  }
}