/* ==========================================================================
   HॐME PG — Design tokens
   Direction: warm editorial residential. Palette sampled from the real
   assets — the slate-stone logo roundel, the copper Om, the grey concrete
   facade, and the bougainvillea on the roof terrace.
   ========================================================================== */

:root {
  /* --- Ground & surface ------------------------------------------------ */
  --c-paper:        oklch(96.8% 0.008 85);    /* warm bone, page ground     */
  --c-paper-deep:   oklch(93.5% 0.012 82);    /* recessed bands             */
  --c-surface:      oklch(99.2% 0.004 85);    /* cards, raised panels       */

  /* --- Ink -------------------------------------------------------------- */
  --c-ink:          oklch(21% 0.008 60);      /* headings, primary text     */
  --c-ink-soft:     oklch(45% 0.010 62);      /* body copy                  */
  --c-ink-mute:     oklch(60% 0.010 65);      /* captions, meta             */

  /* --- Brand ------------------------------------------------------------ */
  --c-copper:       oklch(58% 0.130 55);      /* the Om — primary accent    */
  --c-copper-deep:  oklch(48% 0.120 50);      /* hover / pressed            */
  --c-copper-wash:  oklch(94% 0.030 68);      /* tinted fills               */

  --c-slate:        oklch(46% 0.028 235);     /* logo stone                 */
  --c-slate-deep:   oklch(27% 0.022 232);     /* dark sections              */
  --c-slate-wash:   oklch(93% 0.012 232);

  --c-bougain:      oklch(52% 0.170 000);     /* roof terrace flowers       */

  /* --- Lines & shadow ---------------------------------------------------- */
  --c-rule:         oklch(85% 0.010 75);
  --c-rule-soft:    oklch(90% 0.008 75);
  --shadow-sm:  0 1px 2px oklch(21% 0.008 60 / .06),
                0 2px 6px oklch(21% 0.008 60 / .04);
  --shadow-md:  0 2px 4px oklch(21% 0.008 60 / .05),
                0 8px 24px oklch(21% 0.008 60 / .08);
  --shadow-lg:  0 4px 8px oklch(21% 0.008 60 / .06),
                0 24px 60px oklch(21% 0.008 60 / .12);

  /* --- Type ------------------------------------------------------------- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:    0.75rem;
  --text-sm:    0.8125rem;
  --text-base:  clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  --text-lg:    clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --text-xl:    clamp(1.375rem, 1.25rem + 0.55vw, 1.75rem);
  --text-2xl:   clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);
  --text-3xl:   clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
  --text-hero:  clamp(2.75rem, 1.7rem + 4.4vw, 6rem);

  --leading-tight: 1.04;
  --leading-snug:  1.22;
  --leading-body:  1.62;

  /* Optical tracking — display type tightens, small caps open up */
  --track-display: -0.022em;
  --track-tight:   -0.012em;
  --track-eyebrow:  0.16em;

  /* --- Rhythm ------------------------------------------------------------ */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-section: clamp(4rem, 2.5rem + 6vw, 8.5rem);

  --measure: 62ch;
  --shell: 1220px;
  --shell-wide: 1440px;
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3.5rem);

  /* --- Form ------------------------------------------------------------- */
  --radius-sm: 3px;
  --radius:    6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* --- Motion ------------------------------------------------------------ */
  --dur-fast:   140ms;
  --dur:        260ms;
  --dur-slow:   520ms;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Dark sections invert tokens rather than hardcoding colours downstream. */
.on-dark {
  --c-paper:      var(--c-slate-deep);
  --c-paper-deep: oklch(23% 0.020 232);
  --c-surface:    oklch(32% 0.022 232);
  --c-ink:        oklch(97% 0.006 85);
  --c-ink-soft:   oklch(84% 0.010 220);
  --c-ink-mute:   oklch(70% 0.014 225);
  --c-rule:       oklch(38% 0.020 232);
  --c-rule-soft:  oklch(34% 0.020 232);
  --c-copper:     oklch(74% 0.130 62);
  --c-copper-deep: oklch(82% 0.110 68);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
}