/* ==========================================================================
   Design tokens — the single place to re-skin the site.
   Every colour, size, radius and timing in main.css reads from here.
   See docs/design-system.md for the rationale and contrast ratios.
   ========================================================================== */

:root {
  /* ---- Palette (primitives) -------------------------------------------
     Warm greige and mocha after hilltopsuitesmilos.com, lifted to a lighter,
     near-white ground at the client's request. "Sea glass" is reserved for
     OKKIO and the map. */
  --salt: #f8f6f2;        /* page ground */
  --shell: #fcfbf9;       /* raised surfaces */
  --linen: #f1ede6;       /* alternate band */
  --sand: #e6dfd4;        /* hairlines, quiet fills */
  --greige: #dfdad7;      /* Hilltop's ground, used for deep bands */
  --taupe: #927d72;       /* decorative accent — large type & non-text only (3.6:1) */
  --mocha: #675850;       /* primary actions & links (6.2:1 on salt) */
  --mocha-deep: #4f433d;  /* hover / pressed */
  --ink: #2a2623;         /* body text (14:1) */
  --ink-soft: #5d5550;    /* secondary text (6.9:1) */
  --sea: #3e6b73;         /* OKKIO + map pins (5.5:1) */
  --sea-mist: #dde8e7;    /* map water */
  --white: #ffffff;
  --black: #0f0d0c;

  /* ---- Semantic colours ------------------------------------------------ */
  --color-bg: var(--salt);
  --color-surface: var(--shell);
  --color-band: var(--linen);
  --color-band-deep: var(--greige);
  --color-text: var(--ink);
  --color-muted: var(--ink-soft);
  --color-line: color-mix(in srgb, var(--mocha) 16%, transparent);
  --color-line-strong: color-mix(in srgb, var(--mocha) 32%, transparent);
  --color-accent: var(--mocha);
  --color-accent-hover: var(--mocha-deep);
  --color-on-accent: var(--white);
  --color-decor: var(--taupe);
  --color-okkio: var(--sea);
  --color-focus: #1f5c66;
  --color-scrim: rgb(20 16 14 / 0.46);
  --color-glass: rgb(252 251 249 / 0.72);

  /* ---- Typography -------------------------------------------------------
     Display: Noto Serif Display (thin, high contrast — full Greek support).
     Text:    Manrope (humanist sans — full Greek support). */
  --font-display: "Noto Serif Display", "Times New Roman", serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;

  --weight-display: 300;
  --weight-body: 400;
  --weight-strong: 600;

  /* Fluid type scale — 360px → 1440px viewport */
  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --step--1: clamp(0.83rem, 0.80rem + 0.14vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.19vw, 1.13rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.37vw, 1.45rem);
  --step-2: clamp(1.44rem, 1.28rem + 0.72vw, 1.95rem);
  --step-3: clamp(1.73rem, 1.45rem + 1.24vw, 2.6rem);
  --step-4: clamp(2.07rem, 1.62rem + 2.01vw, 3.45rem);
  --step-5: clamp(2.49rem, 1.78rem + 3.14vw, 4.6rem);
  --step-6: clamp(2.7rem, 1.75rem + 4.2vw, 5.6rem);

  --leading-tight: 1.04;
  --leading-snug: 1.2;
  --leading-body: 1.7;
  --tracking-display: -0.02em;
  --tracking-caps: 0.18em;

  /* ---- Space (fluid) ----------------------------------------------------- */
  --space-3xs: clamp(0.25rem, 0.23rem + 0.1vw, 0.31rem);
  --space-2xs: clamp(0.5rem, 0.46rem + 0.19vw, 0.63rem);
  --space-xs: clamp(0.75rem, 0.69rem + 0.28vw, 0.94rem);
  --space-s: clamp(1rem, 0.93rem + 0.37vw, 1.25rem);
  --space-m: clamp(1.5rem, 1.39rem + 0.56vw, 1.88rem);
  --space-l: clamp(2rem, 1.85rem + 0.74vw, 2.5rem);
  --space-xl: clamp(3rem, 2.78rem + 1.11vw, 3.75rem);
  --space-2xl: clamp(4rem, 3.44rem + 2.78vw, 6.25rem);
  --space-3xl: clamp(6rem, 4.89rem + 5.56vw, 10rem);
  --space-section: clamp(5.5rem, 3.9rem + 8vw, 11rem);

  /* ---- Layout ------------------------------------------------------------ */
  --container: 1320px;
  --container-narrow: 880px;
  --container-prose: 64ch;
  --gutter: clamp(1rem, 0.4rem + 3vw, 3.5rem);
  --header-h: clamp(4.25rem, 3.8rem + 1.4vw, 5.5rem);

  /* ---- Shape -------------------------------------------------------------
     20px is Hilltop's radius; everything else scales from it. */
  --radius-xs: 6px;
  --radius-s: 12px;
  --radius-m: 20px;
  --radius-l: 28px;
  --radius-xl: 40px;
  --radius-pill: 999px;

  /* ---- Elevation --------------------------------------------------------- */
  --shadow-soft: 0 1px 2px rgb(42 38 35 / 0.04), 0 8px 30px rgb(42 38 35 / 0.06);
  --shadow-lift: 0 2px 6px rgb(42 38 35 / 0.06), 0 24px 60px rgb(42 38 35 / 0.12);

  /* ---- Motion ------------------------------------------------------------
     Slow and soft, after pathosprivatevillas.com. JS reads these too. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --dur-quick: 0.35s;
  --dur-base: 0.7s;
  --dur-slow: 1.2s;
  --dur-page: 0.9s;

  --z-header: 50;
  --z-dock: 60;
  --z-menu: 70;
  --z-dialog: 90;
  --z-veil: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-quick: 0.01s;
    --dur-base: 0.01s;
    --dur-slow: 0.01s;
    --dur-page: 0.01s;
  }
}