/* ==========================================================================
   MIGOMBANI HOMESTAY — DESIGN TOKENS
   --------------------------------------------------------------------------
   Every colour, size, easing and shadow used anywhere on the site is
   declared here. Components never hard-code a hex value.

   Palette is sampled directly from the logo:
     forest  #0E4230   the wordmark, palm and waves
     banana  #F5C243   the fruit
     bloom   #A81E58   the banana flower
   ========================================================================== */

:root {
  /* ── Brand ramps ─────────────────────────────────────────────────────── */
  --forest-950: #04140E;
  --forest-900: #062017;
  --forest-800: #082C1F;
  --forest-700: #0E4230;     /* ← the logo green */
  --forest-600: #14573E;
  --forest-500: #1B6E4E;
  --forest-400: #2A8E67;
  --forest-300: #4FB189;
  --forest-200: #8FD3B7;
  --forest-100: #C8EBDC;
  --forest-50:  #E9F7F0;

  --banana-700: #8A6604;
  --banana-600: #B98A0C;
  --banana-500: #E0A81A;
  --banana-400: #F5C243;     /* ← the logo yellow */
  --banana-300: #FBD87A;
  --banana-200: #FDEBB6;
  --banana-100: #FEF6E0;

  --bloom-700: #6E1039;
  --bloom-600: #8B1849;
  --bloom-500: #A81E58;      /* ← the logo magenta */
  --bloom-400: #C74A7E;
  --bloom-300: #E48CAE;
  --bloom-100: #FBE7EF;

  /* Warm neutrals — paper, not grey */
  --sand-50:  #FCFAF6;
  --sand-100: #F6F2EA;
  --sand-200: #EBE5D9;
  --sand-300: #DBD3C3;
  --sand-400: #B9AF9B;
  --sand-500: #8C8371;
  --sand-600: #665F51;

  /* ── Semantic: LIGHT (default) ───────────────────────────────────────── */
  --bg:            var(--sand-50);
  --bg-alt:        var(--sand-100);
  --bg-deep:       var(--forest-900);
  --surface:       #FFFFFF;
  --surface-2:     var(--sand-100);
  --surface-sunk:  var(--sand-200);

  --ink:           #0A1C14;
  --ink-2:         #35473E;
  --ink-3:         #5B6E64;   /* 5.3:1 on white — safe for 11px metadata */
  --ink-invert:    #F4FAF6;

  --line:          color-mix(in oklab, var(--forest-700) 14%, transparent);
  --line-strong:   color-mix(in oklab, var(--forest-700) 26%, transparent);

  --brand:         var(--forest-700);
  --brand-hover:   var(--forest-600);
  --on-brand:      #FFFFFF;

  --accent:        var(--banana-400);
  --accent-strong: var(--banana-600);   /* surfaces only — too light for small text */
  --accent-ink:    #7A5A03;             /* 6.2:1 on cream — the token for gold TEXT */
  --on-accent:     var(--forest-950);

  --pop:           var(--bloom-500);
  --on-pop:        #FFFFFF;

  --ok:            #1B7F4C;
  --warn:          #B26B00;
  --danger:        #B3261E;

  /* Glass */
  --glass-bg:      color-mix(in oklab, #FFFFFF 62%, transparent);
  --glass-bg-2:    color-mix(in oklab, #FFFFFF 80%, transparent);
  --glass-line:    color-mix(in oklab, #FFFFFF 70%, transparent);
  --glass-blur:    18px;

  /* Aurora blobs behind sections */
  --aurora-1: color-mix(in oklab, var(--forest-300) 55%, transparent);
  --aurora-2: color-mix(in oklab, var(--banana-300) 55%, transparent);
  --aurora-3: color-mix(in oklab, var(--bloom-300) 40%, transparent);

  /* Scrims over photography */
  --scrim-top:    linear-gradient(to bottom, rgb(4 20 14 / .55), rgb(4 20 14 / 0) 45%);
  --scrim-bottom: linear-gradient(to top, rgb(4 20 14 / .88), rgb(4 20 14 / .35) 38%, rgb(4 20 14 / 0) 72%);

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-display: 'Bodoni Moda', 'Didot', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:    'Jost', 'Futura', 'Century Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

  /* Fluid scale — 320px → 1440px viewport */
  --fs-3xs:  0.6875rem;                                  /* 11 */
  --fs-2xs:  0.75rem;                                    /* 12 */
  --fs-xs:   0.8125rem;                                  /* 13 */
  --fs-sm:   0.875rem;                                   /* 14 */
  --fs-base: 1rem;                                       /* 16 */
  --fs-md:   clamp(1.0625rem, 0.30vw + 1.00rem, 1.1875rem);
  --fs-lg:   clamp(1.1875rem, 0.55vw + 1.06rem, 1.4375rem);
  --fs-xl:   clamp(1.375rem, 1.00vw + 1.15rem, 1.875rem);
  --fs-2xl:  clamp(1.75rem, 1.85vw + 1.35rem, 2.75rem);
  --fs-3xl:  clamp(2.125rem, 3.10vw + 1.45rem, 3.875rem);
  --fs-4xl:  clamp(2.5rem, 5.10vw + 1.35rem, 5.5rem);
  --fs-hero: clamp(2.5rem, 7.20vw + 0.85rem, 7.5rem);

  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-body:  1.62;
  --lh-loose: 1.75;

  --ls-tight:  -0.022em;
  --ls-normal: 0;
  --ls-wide:   0.06em;
  --ls-label:  0.18em;

  /* ── Space (design-system density: standard) ─────────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  2.5rem;
  --sp-8:  3rem;
  --sp-9:  4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;
  --sp-12: 8rem;

  --section-y: clamp(4rem, 8vw, 8.5rem);
  --gutter:    clamp(1.125rem, 4vw, 3rem);
  --maxw:      78rem;
  --maxw-wide: 92rem;
  --maxw-text: 40rem;

  /* ── Radii ───────────────────────────────────────────────────────────── */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-2xl:  44px;
  --r-pill: 999px;

  /* ── Elevation — green-tinted, never neutral grey ────────────────────── */
  --sh-xs: 0 1px 2px rgb(6 32 23 / .06);
  --sh-sm: 0 2px 8px -2px rgb(6 32 23 / .10), 0 1px 2px rgb(6 32 23 / .05);
  --sh-md: 0 10px 28px -10px rgb(6 32 23 / .18), 0 2px 6px rgb(6 32 23 / .06);
  --sh-lg: 0 24px 60px -20px rgb(6 32 23 / .26), 0 4px 12px rgb(6 32 23 / .07);
  --sh-xl: 0 44px 96px -32px rgb(6 32 23 / .34), 0 8px 20px rgb(6 32 23 / .08);
  --sh-glow: 0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent),
             0 12px 40px -12px color-mix(in oklab, var(--accent) 55%, transparent);

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --e-out:   cubic-bezier(.22, 1, .36, 1);       /* expo-ish out   */
  --e-inout: cubic-bezier(.65, 0, .35, 1);
  --e-spring:cubic-bezier(.34, 1.56, .64, 1);    /* slight overshoot */
  --e-soft:  cubic-bezier(.4, 0, .2, 1);

  --t-fast:  150ms;
  --t-base:  260ms;
  --t-slow:  460ms;
  --t-reveal:760ms;

  --header-h: 76px;
  --z-base: 1; --z-raise: 10; --z-sticky: 100; --z-header: 500;
  --z-drawer: 800; --z-modal: 900; --z-toast: 1000;
}

/* ==========================================================================
   DARK — the default after dusk, and the mode this brand was built for
   ========================================================================== */
:root[data-theme='dark'] {
  --bg:            #050F0B;
  --bg-alt:        #071A13;
  --bg-deep:       #030B08;
  --surface:       #0A2118;
  --surface-2:     #0D2A1E;
  --surface-sunk:  #061510;

  --ink:           #E8F5EE;
  --ink-2:         #A9C3B6;
  --ink-3:         #6E8B7E;
  --ink-invert:    #04140E;

  --line:          color-mix(in oklab, var(--forest-200) 16%, transparent);
  --line-strong:   color-mix(in oklab, var(--forest-200) 30%, transparent);

  --brand:         var(--forest-300);
  --brand-hover:   var(--forest-200);
  --on-brand:      #03130D;

  --accent:        var(--banana-400);
  --accent-strong: var(--banana-300);
  --accent-ink:    var(--banana-300);
  --on-accent:     #1A1204;

  --pop:           var(--bloom-400);
  --on-pop:        #23050F;

  --ok:            #4FD08B;
  --warn:          #F0B94A;
  --danger:        #FF8A80;

  --glass-bg:      color-mix(in oklab, #0A2118 66%, transparent);
  --glass-bg-2:    color-mix(in oklab, #0A2118 84%, transparent);
  --glass-line:    color-mix(in oklab, var(--forest-200) 18%, transparent);

  --aurora-1: color-mix(in oklab, var(--forest-400) 50%, transparent);
  --aurora-2: color-mix(in oklab, var(--banana-500) 32%, transparent);
  --aurora-3: color-mix(in oklab, var(--bloom-500) 34%, transparent);

  --sh-xs: 0 1px 2px rgb(0 0 0 / .40);
  --sh-sm: 0 2px 10px -2px rgb(0 0 0 / .55);
  --sh-md: 0 12px 32px -12px rgb(0 0 0 / .70);
  --sh-lg: 0 28px 68px -24px rgb(0 0 0 / .80);
  --sh-xl: 0 48px 110px -36px rgb(0 0 0 / .86);
}

/* Follow the operating system unless the visitor has chosen for themselves. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg:            #050F0B;
    --bg-alt:        #071A13;
    --bg-deep:       #030B08;
    --surface:       #0A2118;
    --surface-2:     #0D2A1E;
    --surface-sunk:  #061510;

    --ink:           #E8F5EE;
    --ink-2:         #A9C3B6;
    --ink-3:         #6E8B7E;
    --ink-invert:    #04140E;

    --line:          color-mix(in oklab, var(--forest-200) 16%, transparent);
    --line-strong:   color-mix(in oklab, var(--forest-200) 30%, transparent);

    --brand:         var(--forest-300);
    --brand-hover:   var(--forest-200);
    --on-brand:      #03130D;

    --accent:        var(--banana-400);
    --accent-strong: var(--banana-300);
    --accent-ink:    var(--banana-300);
    --on-accent:     #1A1204;

    --pop:           var(--bloom-400);
    --on-pop:        #23050F;

    --ok:            #4FD08B;
    --warn:          #F0B94A;
    --danger:        #FF8A80;

    --glass-bg:      color-mix(in oklab, #0A2118 66%, transparent);
    --glass-bg-2:    color-mix(in oklab, #0A2118 84%, transparent);
    --glass-line:    color-mix(in oklab, var(--forest-200) 18%, transparent);

    --aurora-1: color-mix(in oklab, var(--forest-400) 50%, transparent);
    --aurora-2: color-mix(in oklab, var(--banana-500) 32%, transparent);
    --aurora-3: color-mix(in oklab, var(--bloom-500) 34%, transparent);

    --sh-xs: 0 1px 2px rgb(0 0 0 / .40);
    --sh-sm: 0 2px 10px -2px rgb(0 0 0 / .55);
    --sh-md: 0 12px 32px -12px rgb(0 0 0 / .70);
    --sh-lg: 0 28px 68px -24px rgb(0 0 0 / .80);
    --sh-xl: 0 48px 110px -36px rgb(0 0 0 / .86);
  }
}

/* Sections that are always dark regardless of theme (photo bands, footer). */
.on-dark {
  --ink:        #E8F5EE;
  --ink-2:      #B9CFC4;
  --ink-3:      #8AA79A;
  --surface:    rgb(255 255 255 / .06);
  --surface-2:  rgb(255 255 255 / .10);
  --line:       rgb(255 255 255 / .16);
  --line-strong:rgb(255 255 255 / .30);
  --brand:      var(--forest-200);
  --glass-bg:   rgb(255 255 255 / .08);
  --glass-bg-2: rgb(6 32 23 / .55);
  --glass-line: rgb(255 255 255 / .18);
  color: var(--ink);
}