/* ==========================================================================
   variables.css — design tokens
   Single source of truth for colour, type, spacing, motion and layering.
   Palette and type extracted from the live site (Elementor globals) so the
   rebuild matches the design management asked to preserve.
   ========================================================================== */

:root {
  /* ---------- Brand colour ---------- */
  --c-primary: #1c2c34;          /* deep slate — header, footer, dark sections */
  --c-primary-900: #131f26;
  --c-primary-700: #263a44;
  --c-secondary: #aa998a;         /* warm taupe — the dominant accent */
  --c-secondary-600: #96856f;
  --c-secondary-300: #cab7a7;     /* sand */
  --c-mist: #e6e1e1;
  --c-navy: #02264e;

  /* ---------- Neutrals ---------- */
  --c-text: #5c5c5c;
  --c-heading: #1c2c34;
  --c-muted: #8a8a8a;
  --c-line: #e4e0da;
  --c-bg: #ffffff;
  --c-bg-alt: #faf8f5;
  --c-bg-sand: #f4efe8;
  --c-white: #ffffff;
  --c-black: #111111;

  /* ---------- Functional ---------- */
  --c-focus: #aa998a;
  --c-error: #a3342b;
  --c-success: #2f6b4f;
  --c-overlay: rgba(28, 44, 52, .55);
  --c-overlay-strong: rgba(19, 31, 38, .78);

  /* ---------- Typography ---------- */
  /* Lora — a contemporary serif with moderate contrast and brushed curves.
     Its even stroke weight holds up at small sizes where a Didone's hairlines
     would break up, so headings stay readable rather than merely decorative.
     Karla — a humanist grotesque with genuinely idiosyncratic letterforms,
     warm at text sizes. */
  --f-display: "Lora", Georgia, "Times New Roman", serif;
  --f-body: "Karla", "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale — 320px to 1600px */
  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-base: clamp(0.9375rem, 0.9rem + 0.19vw, 1.0625rem);
  --fs-lg:   clamp(1.0625rem, 1rem + 0.31vw, 1.25rem);
  --fs-h4:   clamp(1.125rem, 1.05rem + 0.38vw, 1.375rem);
  --fs-h3:   clamp(1.375rem, 1.2rem + 0.75vw, 1.875rem);
  --fs-h2:   clamp(1.625rem, 1.25rem + 1.6vw, 2.5rem);      /* max 40px */
  --fs-h1:   clamp(1.875rem, 1.4rem + 2.1vw, 2.875rem);    /* max 46px */
  --fs-hero: clamp(2rem, 1.35rem + 3.1vw, 3.125rem);      /* max 50px — hard ceiling */

  --lh-tight: 1.06;
  --lh-heading: 1.2;
  --lh-body: 1.7;

  --ls-eyebrow: 0.32em;
  --ls-button: 0.18em;
  --ls-nav: 0.12em;

  --fw-light: 400;   /* Lora floor — 300 would synthesise */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- Spacing ---------- */
  --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: 6rem;

  /* Vertical rhythm between full-width sections */
  --section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --section-y-sm: clamp(2.5rem, 1.5rem + 4vw, 5rem);

  /* ---------- Layout ---------- */
  --container: 1290px;
  --container-narrow: 900px;
  --container-wide: 1600px;
  --gutter: clamp(1.125rem, 0.7rem + 2vw, 2.5rem);
  --grid-gap: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);

  --header-h: 92px;
  --header-h-scrolled: 74px;

  /* ---------- Shape ---------- */
  --r-none: 0;
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-pill: 999px;
  --r-circle: 50%;

  --bw: 1px;
  --border: var(--bw) solid var(--c-line);

  /* ---------- Elevation ---------- */
  --sh-sm: 0 1px 3px rgba(28, 44, 52, .07);
  --sh-md: 0 6px 22px rgba(28, 44, 52, .09);
  --sh-lg: 0 18px 50px rgba(28, 44, 52, .14);
  --sh-header: 0 2px 18px rgba(28, 44, 52, .10);

  /* ---------- Motion ---------- */
  --e-out: cubic-bezier(.22, .61, .36, 1);
  --e-in-out: cubic-bezier(.65, .05, .36, 1);
  --e-soft: cubic-bezier(.4, 0, .2, 1);

  --t-fast: 180ms;
  --t-base: 320ms;
  --t-slow: 620ms;
  --t-reveal: 900ms;

  /* ---------- Aspect ratios ---------- */
  --ar-hero: 16 / 9;
  --ar-card: 4 / 3;
  --ar-room: 3 / 2;
  --ar-portrait: 3 / 4;
  --ar-square: 1 / 1;
  --ar-wide: 21 / 9;

  /* Caps a standalone photo so it fits one viewport on any device */
  --media-max-h: 82svh;

  /* ---------- Layers ---------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-float: 300;
  --z-drawer: 400;
  --z-overlay: 500;
  --z-modal: 600;
  --z-toast: 700;
  --z-loader: 900;
}

/* Larger rhythm once there is room for it */
@media (min-width: 1200px) {
  :root {
    --header-h: 116px;
    --header-h-scrolled: 88px;
  }
}