/* ===========================================================================
   Oloitiko — design tokens
   "Long Grass": desaturated interface, saturated photography.
   The UI is deliberately low-chroma so a lion at golden hour is the brightest
   object on any screen. One accent only.
   =========================================================================== */

:root {
  /* ---------------------------------------------------------------- colour */
  --ink:          #1C1B18;
  --ink-70:       #56534C;
  --ink-50:       #7A766D;

  --green-950:    #12211A;
  --green-900:    #172C22;
  --green-800:    #1F3A2E;
  --green-700:    #2A4A3A;
  --green-600:    #3A5A4A;
  --green-300:    #8FA79A;

  --ivory:        #FAF7F1;
  --ivory-deep:   #F5F0E7;
  --sand:         #EFE7D9;
  --sand-deep:    #E5DACA;
  --stone:        #D6CFC4;
  --stone-soft:   #E8E2D8;

  --brown-700:    #6B5A47;
  --brown-500:    #8C7A64;

  --clay:         #B4562B;
  --clay-dark:    #8E4322;
  --clay-soft:    #D98A63;
  --clay-wash:    #F6EAE3;

  --white:        #FFFFFF;

  /* semantic */
  --bg:           var(--ivory);
  --bg-alt:       var(--sand);
  --text:         var(--ink);
  --text-muted:   var(--brown-700);
  --rule:         var(--stone);
  --accent:       var(--clay);

  --ok:           #2F6B4F;
  --warn:         #9A6B12;
  --danger:       #A33B2A;

  /* ------------------------------------------------------------ typography */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;

  /* Fluid scale — 320px to 1600px viewport */
  --step--2:  clamp(0.694rem, 0.68rem + 0.07vw,  0.75rem);
  --step--1:  clamp(0.833rem, 0.80rem + 0.16vw,  0.938rem);
  --step-0:   clamp(1rem,     0.96rem + 0.21vw,  1.125rem);
  --step-1:   clamp(1.2rem,   1.13rem + 0.35vw,  1.406rem);
  --step-2:   clamp(1.44rem,  1.33rem + 0.55vw,  1.758rem);
  --step-3:   clamp(1.728rem, 1.55rem + 0.85vw,  2.197rem);
  --step-4:   clamp(2.074rem, 1.81rem + 1.28vw,  2.747rem);
  --step-5:   clamp(2.488rem, 2.10rem + 1.88vw,  3.433rem);
  --step-6:   clamp(2.986rem, 2.43rem + 2.71vw,  4.292rem);
  --step-7:   clamp(3.583rem, 2.79rem + 3.86vw,  5.364rem);

  --lh-tight:   1.06;
  --lh-display: 1.12;
  --lh-heading: 1.22;
  --lh-body:    1.65;
  --lh-loose:   1.75;

  --tracking-display: -0.022em;
  --tracking-tight:   -0.012em;
  --tracking-wide:     0.06em;
  --tracking-caps:     0.14em;

  /* ---------------------------------------------------------------- space */
  --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 rhythm — the single most important spacing decision on the site */
  --section-y:       clamp(4.5rem, 9vw, 8.5rem);
  --section-y-tight: clamp(3rem, 6vw, 5.5rem);

  /* --------------------------------------------------------------- layout */
  --wrap:        86rem;   /* 1376px */
  --wrap-wide:   102rem;
  --wrap-text:   44rem;   /* ~68ch — the reading measure */
  --wrap-narrow: 34rem;
  --gutter:      clamp(1.25rem, 4vw, 3.5rem);

  --grid-gap:    clamp(1.25rem, 2.5vw, 2.25rem);

  /* --------------------------------------------------------------- shape */
  /* Restraint: almost nothing is rounded. Luxury is square and precise. */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-pill: 999px;

  --border-hair: 1px solid var(--rule);

  /* --------------------------------------------------------------- motion */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  180ms;
  --dur-base:  320ms;
  --dur-slow:  700ms;
  --dur-image: 900ms;

  /* --------------------------------------------------------------- depth */
  /* Shadows are used almost nowhere. These exist for overlays only. */
  --shadow-menu:  0 24px 60px -24px rgba(18, 33, 26, 0.28);
  --shadow-panel: 0 2px 28px -12px rgba(18, 33, 26, 0.22);
  --shadow-lift:  0 18px 42px -22px rgba(18, 33, 26, 0.4);

  --z-header: 100;
  --z-mega:   110;
  --z-drawer: 120;
  --z-modal:  200;
  --z-toast:  300;

  --header-h: 5.25rem;
}

@media (max-width: 900px) {
  :root { --header-h: 4.25rem; }
}

/* Dark sections invert the token set rather than re-specifying components. */
.on-dark {
  --text:       var(--ivory);
  --text-muted: var(--green-300);
  --rule:       rgba(250, 247, 241, 0.18);
  --bg:         var(--green-950);
}