/* ============================================================================
   THE OASIS — Design System Tokens
   A Florida-garden community: warm, honest, sun-soaked, never pretentious.
   Palette inspired by: late-afternoon stucco, palm shadow, Gulf horizon,
   sun-bleached terracotta. Type pairs an editorial serif with grounded sans.
   ============================================================================ */

:root {
  /* ------------------------------- Palette ------------------------------- */
  /* Earth & stucco - the buildings themselves */
  --oasis-stucco:        #E8DBC4;   /* warm putty, the main building paint */
  /* (Terracotta/clay primitives removed — site is fully blue.) */
  --oasis-shell:         #F5EFE3;   /* near-white, used for surfaces */
  --oasis-paper:         #FBF7EE;   /* warm off-white, body background */

  /* Foliage - the live oaks and palms */
  --oasis-palm:          #4A6B3C;   /* deep palm-leaf green */
  --oasis-palm-light:    #7A9A66;   /* sun-on-leaf */
  --oasis-moss:          #2E3F25;   /* shadow under the oak */

  /* Water & sky - Clearwater, the Gulf, the pool */
  --oasis-navy:          #16365A;   /* deep editorial navy — primary brand */
  --oasis-navy-deep:     #0E2742;   /* even deeper, for hover states */
  --oasis-gulf:          #1E5592;   /* mid-blue from the original brand */
  --oasis-gulf-light:    #4E86C2;   /* sky reflection */
  --oasis-pool:          #6FB1C2;   /* pool-water teal */
  --oasis-sky:           #DBE9F0;   /* haze blue */

  /* Neutrals - the late-afternoon shadow palette */
  --oasis-ink:           #1B1A17;   /* primary text — not pure black, warmer */
  --oasis-ink-soft:      #3A3833;   /* secondary text */
  --oasis-ash:           #6E6960;   /* tertiary text / lines */
  --oasis-mist:          #C9C3B8;   /* dividers, hairlines */
  --oasis-bone:          #EBE5D9;   /* tonal surfaces */

  /* Functional aliases
     Navy is the dominant brand color — used on buttons, hovers, dark sections,
     and the editorial details. Terracotta becomes --warm: a secondary accent
     reserved for script flourishes, prices, "Popular" ribbons. */
  --bg:                  var(--oasis-paper);
  --bg-elev:             var(--oasis-shell);
  --bg-dark:             var(--oasis-navy);
  --ink:                 var(--oasis-ink);
  --ink-soft:            var(--oasis-ink-soft);
  --line:                var(--oasis-mist);
  --accent:              var(--oasis-navy);
  --accent-deep:         var(--oasis-navy-deep);
  /* Secondary brand accent — the original Oasis mid-blue, used for script
     flourishes, prices, "Popular" ribbons. Distinct from the deep navy
     so callouts still pop, but in-family blue, never terracotta. */
  --warm:                var(--oasis-gulf);
  --warm-deep:           var(--oasis-navy-deep);
  /* Lighter warm tint reserved for dark surfaces. Pool teal (#6FB1C2) was
     readable against pure navy but disappeared against the bright patches
     in hero photos (concrete, sky, light foliage). Bumped to sky (#DBE9F0)
     — a near-white pale blue that holds contrast against ANY photo while
     still reading as the "warm" brand accent (cooler family, still distinct
     from --oasis-paper body text). */
  --warm-on-dark:        var(--oasis-sky);
  --leaf:                var(--oasis-palm);
  --water:               var(--oasis-gulf);

  /* ------------------------------- Type --------------------------------- */
  /* Editorial serif for display + sans for body. Slow + steady, no fads. */
  --font-wordmark: "DM Serif Display", "Fraunces", Georgia, serif;
  --font-display:  "Fraunces", "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:     "Inter", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:     "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --font-script:   "Caveat", "Marck Script", cursive;

  /* Modular scale — ZEN PASS. Tighter ratio (~1.18), even smaller display
     caps. Body bumped to 1.10rem for editorial readability. Every step is
     now within ~3.5x of body at the largest display — no whiplash.
     The site should feel composed, not shouting. */
  --step--2: clamp(0.74rem, 0.72rem + 0.08vw, 0.80rem);
  --step--1: clamp(0.88rem, 0.85rem + 0.12vw, 0.96rem);
  --step-0:  clamp(1.05rem, 1.02rem + 0.16vw, 1.18rem);    /* body */
  --step-1:  clamp(1.18rem, 1.12rem + 0.26vw, 1.32rem);
  --step-2:  clamp(1.32rem, 1.24rem + 0.38vw, 1.52rem);
  --step-3:  clamp(1.52rem, 1.40rem + 0.55vw, 1.80rem);
  --step-4:  clamp(1.75rem, 1.58rem + 0.78vw, 2.18rem);
  --step-5:  clamp(2.00rem, 1.78rem + 1.05vw, 2.60rem);    /* was 3.25 */
  --step-6:  clamp(2.32rem, 2.02rem + 1.42vw, 3.12rem);    /* was 4.10 */
  --step-7:  clamp(2.70rem, 2.30rem + 1.85vw, 3.75rem);    /* was 5.40 */

  --lh-tight:   1.02;
  --lh-display: 1.08;
  --lh-snug:    1.22;
  --lh-body:    1.55;
  --lh-loose:   1.70;

  --tracking-display:    -0.038em;  /* hero/title type at huge sizes */
  --tracking-tight:      -0.025em;
  --tracking-snug:       -0.012em;
  --tracking-normal:      0;
  --tracking-loose:       0.04em;
  --tracking-wide:        0.18em;
  --tracking-extra-wide:  0.32em;   /* eyebrows + wordmark sub */
  --tracking-mega-wide:   0.48em;   /* ticker marquee */

  /* ------------------------------- Space -------------------------------- */
  /* Fluid spacing scale that breathes with the viewport */
  --space-3xs: clamp(0.25rem, 0.23rem + 0.10vw, 0.32rem);
  --space-2xs: clamp(0.50rem, 0.45rem + 0.20vw, 0.65rem);
  --space-xs:  clamp(0.75rem, 0.68rem + 0.30vw, 1.00rem);
  --space-s:   clamp(1.00rem, 0.90rem + 0.40vw, 1.30rem);
  --space-m:   clamp(1.50rem, 1.35rem + 0.70vw, 2.10rem);
  --space-l:   clamp(2.20rem, 1.90rem + 1.20vw, 3.20rem);
  --space-xl:  clamp(3.20rem, 2.70rem + 2.00vw, 5.00rem);
  --space-2xl: clamp(4.50rem, 3.60rem + 3.50vw, 8.00rem);
  --space-3xl: clamp(6.50rem, 5.00rem + 5.50vw, 12.00rem);

  /* Page rhythm */
  --container-max: 1440px;
  --content-max:   72ch;
  --gutter:        clamp(1.25rem, 0.50rem + 3vw, 3.50rem);

  /* ------------------------------- Form --------------------------------- */
  --radius-xs: 4px;
  --radius-s:  8px;
  --radius-m:  14px;
  --radius-l:  24px;
  --radius-pill: 999px;

  /* ------------------------------- Light -------------------------------- */
  /* Shadows simulate late-afternoon palm-leaf shadow — soft & warm */
  --shadow-1: 0 1px 2px rgba(28, 24, 18, 0.04), 0 2px 6px rgba(28, 24, 18, 0.04);
  --shadow-2: 0 4px 12px rgba(28, 24, 18, 0.06), 0 12px 28px rgba(28, 24, 18, 0.06);
  --shadow-3: 0 8px 24px rgba(28, 24, 18, 0.10), 0 24px 56px rgba(28, 24, 18, 0.08);
  --shadow-hover: 0 12px 36px rgba(30, 85, 146, 0.12), 0 32px 72px rgba(30, 85, 146, 0.10);

  /* ------------------------------- 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);

  --dur-fast:  180ms;
  --dur-med:   420ms;
  --dur-slow:  720ms;
  --dur-epic:  1200ms;

  /* ------------------------------- Z layer ------------------------------ */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-nav:     500;
  --z-modal:   1000;
  --z-cursor:  9999;

  /* ------------------------------- Asset path --------------------------- */
  --img: "./public/images/library/";
}

/* ============================================================================
   RESET — opinionated, with the modern niceties already baked
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; tab-size: 4; }
html:focus-within { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: "kern", "liga", "calt", "ss01";
  overflow-x: hidden;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  font-weight: 480;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-snug);
  font-feature-settings: "kern", "liga", "calt", "ss01", "ss02";
  text-wrap: balance;
}
:where(p) { text-wrap: pretty; max-width: var(--content-max); }
::selection { background: var(--accent); color: var(--oasis-paper); }

/* Reduced-motion: drop all animation immediately */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Utility helpers used across pages */
.u-container { width: 100%; max-width: var(--container-max); padding-inline: var(--gutter); margin-inline: auto; }
.u-flow > * + * { margin-top: var(--space-m); }
.u-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 500;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--accent-deep);
}
.u-eyebrow::before {
  content: ""; width: 28px; height: 1px; background: currentColor;
}
.u-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Heading utility — used liberally */
.h-display {
  font-family: var(--font-display);
  font-weight: 380;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-snug);
}
.h-display em, .h-script {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 500;
  color: var(--warm);
  /* Restrained: script sits smaller than the serif body word, not bigger.
     Used as a quiet flourish, not a visual headline competitor. */
  font-size: 0.82em;
  letter-spacing: -0.005em;
}