/* =====================================================================
   CEYLON UNCOVERED — DESIGN TOKENS
   The single source of truth for colour, type, space, radius, shadow
   and motion. Nothing else in the CSS should hard-code these values.
   ===================================================================== */

:root {
  /* -------------------------------------------------------------
     1. COLOUR — PALETTE
     Brand: Primary Green #1B5E20, Accent Yellow #FFC107,
            warm light canvas #F9FBE7.
     ------------------------------------------------------------- */

  /* Green ramp — built around the brand primary (green-700) */
  --color-green-900: #0d3311;
  --color-green-800: #124417;
  --color-green-700: #1b5e20;  /* BRAND PRIMARY */
  --color-green-600: #2e7d32;
  --color-green-500: #43a047;
  --color-green-400: #66bb6a;
  --color-green-200: #c5e1a5;
  --color-green-100: #dcedc8;
  --color-green-50:  #f1f8e9;

  /* Yellow ramp — built around the brand accent (yellow-500) */
  --color-yellow-700: #c67c00;
  --color-yellow-600: #ffa000;
  --color-yellow-500: #ffc107;  /* BRAND ACCENT */
  --color-yellow-400: #ffd454;
  --color-yellow-300: #ffe082;
  --color-yellow-100: #fff8e1;

  /* Warm neutrals — greened slightly so they sit with the brand */
  --color-ink-900: #121a13;
  --color-ink-800: #1e291f;
  --color-ink-700: #304032;
  --color-ink-600: #4a5c4d;
  --color-ink-500: #65776a;
  --color-ink-400: #8a9a8e;
  --color-ink-300: #b4c0b7;
  --color-ink-200: #d8e0d9;
  --color-ink-100: #eaefe8;
  --color-white:   #ffffff;

  /* -------------------------------------------------------------
     2. COLOUR — SEMANTIC ROLES
     Use these in components, not the raw ramps above.
     ------------------------------------------------------------- */
  --color-canvas:        #f9fbe7;  /* page background (warm light tint) */
  --color-canvas-sunk:   #f2f6dd;  /* alternating / recessed bands      */
  --color-surface:       var(--color-white);
  --color-surface-muted: var(--color-green-50);
  --color-surface-dark:  var(--color-green-900);

  --color-text:          var(--color-ink-800);
  --color-text-muted:    var(--color-ink-600);
  --color-text-subtle:   var(--color-ink-500);
  --color-text-on-dark:  #eef4ea;
  --color-text-on-dark-muted: #bccdbe;

  --color-primary:        var(--color-green-700);
  --color-primary-hover:  var(--color-green-800);
  --color-primary-soft:   var(--color-green-100);
  --color-accent:         var(--color-yellow-500);
  --color-accent-hover:   var(--color-yellow-600);
  --color-accent-soft:    var(--color-yellow-100);

  /* Yellow never carries body text on light backgrounds (too low a
     contrast ratio) — this is the readable "yellow" for that case. */
  --color-accent-text:    var(--color-yellow-700);

  --color-border:        #e2e8dc;
  --color-border-strong: var(--color-ink-300);
  --color-border-on-dark: rgba(255, 255, 255, 0.18);

  --color-focus: var(--color-yellow-500);

  /* Brand-tinted scrims for text over photography */
  --scrim-bottom: linear-gradient(
    to top,
    rgba(13, 51, 17, 0.92) 0%,
    rgba(13, 51, 17, 0.72) 28%,
    rgba(13, 51, 17, 0.18) 62%,
    rgba(13, 51, 17, 0) 100%
  );
  --scrim-full: linear-gradient(
    to bottom,
    rgba(13, 51, 17, 0.55) 0%,
    rgba(13, 51, 17, 0.28) 45%,
    rgba(13, 51, 17, 0.78) 100%
  );
  --scrim-card: linear-gradient(
    to top,
    rgba(13, 51, 17, 0.88) 0%,
    rgba(13, 51, 17, 0.35) 55%,
    rgba(13, 51, 17, 0) 100%
  );

  /* The half-height hero is wide and bright, so the copy side needs
     its own horizontal scrim on top of the vertical one. */
  --scrim-hero-vertical: linear-gradient(
    to bottom,
    rgba(13, 51, 17, 0.34) 0%,
    rgba(13, 51, 17, 0.14) 50%,
    rgba(13, 51, 17, 0.58) 100%
  );
  /* Narrow screens stack the hero copy down the middle of the frame,
     where the vertical scrim is at its lightest — this one stays dark
     the whole way down. */
  --scrim-hero-vertical-strong: linear-gradient(
    to bottom,
    rgba(13, 51, 17, 0.46) 0%,
    rgba(13, 51, 17, 0.54) 50%,
    rgba(13, 51, 17, 0.78) 100%
  );
  --scrim-hero-side: linear-gradient(
    to right,
    rgba(13, 51, 17, 0.74) 0%,
    rgba(13, 51, 17, 0.46) 44%,
    rgba(13, 51, 17, 0.1) 78%,
    rgba(13, 51, 17, 0) 100%
  );

  /* -------------------------------------------------------------
     3. TYPOGRAPHY
     ------------------------------------------------------------- */
  --font-display: "Plus Jakarta Sans", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-body:    "Open Sans", "Segoe UI", Tahoma, system-ui, sans-serif;

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

  /* Fluid type scale — min at 360px viewport, max at 1280px */
  --text-xs:   0.75rem;                                 /* 12px  */
  --text-sm:   0.875rem;                                /* 14px  */
  --text-base: 1rem;                                    /* 16px  */
  --text-md:   clamp(1.0625rem, 0.25vw + 1rem, 1.125rem);
  --text-lg:   clamp(1.125rem, 0.5vw + 1rem, 1.3125rem);
  --text-xl:   clamp(1.3125rem, 0.9vw + 1.05rem, 1.625rem);
  --text-2xl:  clamp(1.5rem, 1.4vw + 1.1rem, 2.125rem);
  --text-3xl:  clamp(1.875rem, 2.4vw + 1.2rem, 2.875rem);
  --text-4xl:  clamp(2.25rem, 3.6vw + 1.25rem, 4rem);
  --text-5xl:  clamp(2.75rem, 5.2vw + 1.2rem, 5.25rem);

  --leading-tight:   1.08;
  --leading-snug:    1.22;
  --leading-normal:  1.45;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.022em;
  --tracking-snug:   -0.012em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-widest: 0.16em;

  --measure-narrow: 38ch;
  --measure:        62ch;
  --measure-wide:   76ch;

  /* -------------------------------------------------------------
     4. SPACE — 4px base, used for both gaps and rhythm
     ------------------------------------------------------------- */
  --space-2xs: 0.25rem;   /*  4px */
  --space-xs:  0.5rem;    /*  8px */
  --space-sm:  0.75rem;   /* 12px */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2rem;      /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */
  --space-4xl: 6rem;      /* 96px */
  --space-5xl: 8rem;      /* 128px */

  /* Vertical rhythm between full sections */
  --section-y:       clamp(4rem, 8vw, 8.5rem);
  --section-y-tight: clamp(3rem, 5vw, 5rem);

  /* -------------------------------------------------------------
     5. LAYOUT
     ------------------------------------------------------------- */
  --container-max:   1240px;
  --container-wide:  1440px;
  --container-text:  720px;
  --gutter:          clamp(1.25rem, 4vw, 3rem);
  --header-height:   76px;

  /* Hero band: half the viewport on phones and tablets, a fixed taller
     band from desktop up, where there is room for the two-column layout. */
  --hero-min-height:         50svh;
  --hero-min-height-desktop: 700px;

  /* -------------------------------------------------------------
     6. RADIUS
     ------------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   32px;
  --radius-2xl:  44px;
  --radius-pill: 999px;

  /* -------------------------------------------------------------
     7. SHADOW — warm-green tinted, never neutral grey
     ------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(18, 26, 19, 0.06);
  --shadow-sm: 0 2px 8px rgba(18, 26, 19, 0.07);
  --shadow-md: 0 8px 24px -6px rgba(18, 26, 19, 0.14);
  --shadow-lg: 0 20px 48px -12px rgba(18, 26, 19, 0.22);
  --shadow-xl: 0 36px 80px -20px rgba(13, 51, 17, 0.34);
  --shadow-accent: 0 12px 28px -8px rgba(255, 160, 0, 0.45);
  --shadow-inset-line: inset 0 0 0 1px var(--color-border);

  /* -------------------------------------------------------------
     8. MOTION
     ------------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   160ms;
  --duration-base:   280ms;
  --duration-slow:   520ms;
  --duration-slower: 900ms;


  /* -------------------------------------------------------------
     9. INTERACTIVE ISLAND MAP
     Palette taken from the printed tourist maps in /assets/images:
     pale sea, soft green land, warm route lines, accent markers.
     ------------------------------------------------------------- */
  --map-sea:         #eaf4f6;
  --map-sea-deep:    #dbeaef;
  --map-wave:        #b4d4de;
  --map-land-top:    #ecf6dc;
  --map-land-bottom: #c9e3a8;
  --map-hill:        #a9cf83;
  --map-coast:       var(--color-green-700);
  --map-coast-halo:  #ffffff;
  --map-route:       #c67c00;
  --map-city:        var(--color-green-700);
  --map-zone-core:   rgba(255, 193, 7, 0.85);
  --map-zone-edge:   rgba(255, 193, 7, 0);
  --map-pin:         var(--color-yellow-500);
  --map-pin-ring:    var(--color-green-900);
  --map-pin-idle:    #8fb27a;

  /* -------------------------------------------------------------
     10. Z-INDEX
     ------------------------------------------------------------- */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-header:  200;
  --z-overlay: 300;
  --z-modal:   400;
}

/* Honour the OS "reduce motion" setting by collapsing durations. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   1ms;
    --duration-base:   1ms;
    --duration-slow:   1ms;
    --duration-slower: 1ms;
  }
}