/* ============================================================
   IJI Home Group — design tokens
   Source of truth: docs/ui/property-websites.md §1.6
   Brand colours are also exposed as WordPress presets in theme.json;
   this file adds the tokens WordPress has no preset for (grid, motion,
   controls, feedback colours) and aliases the semantic roles.
   ============================================================ */
:root {
  /* — 1. Brand primitives — */
  --iji-forest-relic:#666847; --iji-stone-ash:#4F4944; --iji-soft-veil:#EDECE9;
  --iji-autumn-flame:#9F6249; --iji-sandy-pearl:#D8C3A8; --iji-cloud-whisper:#DFDFD9;
  --iji-forest-700:#585A3D; --iji-forest-800:#4A4C32; --iji-flame-700:#8A5540;
  --iji-stone-900:#3F3A36;   --iji-sand-600:#C9B296;
  --iji-neutral-500:#8A887F; --iji-neutral-400:#B8B4AE; --iji-muted-700:#6E655E;

  /* — Functional layer (outside the brand palette) — */
  --iji-error:#8C3128; --iji-error-surface:#F7EDEB;
  --iji-success:#3F5C43; --iji-success-surface:#ECF1EC;

  /* — 2. Semantic roles — */
  --color-bg:var(--iji-soft-veil);
  --color-bg-alt:#F5F4F2;
  --color-surface:#FFFFFF;
  --color-surface-warm:var(--iji-sandy-pearl);
  --color-surface-dark:var(--iji-stone-ash);
  --color-surface-brand:var(--iji-forest-relic);
  --color-heading:var(--iji-stone-ash);
  --color-text:var(--iji-stone-ash);
  --color-text-muted:var(--iji-muted-700);
  --color-text-on-dark:var(--iji-soft-veil);
  --color-accent:var(--iji-autumn-flame);
  --color-accent-ink:var(--iji-flame-700);
  --color-border:var(--iji-cloud-whisper);
  --color-border-strong:var(--iji-neutral-500);
  --color-focus:var(--iji-stone-ash);
  --color-focus-offset:#FFFFFF;
  --color-overlay:rgba(63,58,54,0.42);
  /* Deepened once real photography landed: the original 0.55 was tuned against
     dark placeholder blocks, and light interiors — white bedding, pale walls —
     left the headline and lead barely legible over it. */
  /* Deepened 03.09: the Eighth Sense and Body Sense renders are far brighter than
     the video heroes this was tuned for — the headline measured 1.88:1 against the
     brightest areas, under the 3:1 floor for large text. */
  --color-overlay-scrim:linear-gradient(180deg, rgba(63,58,54,0.08) 0%, rgba(63,58,54,0.34) 34%, rgba(63,58,54,0.62) 62%, rgba(63,58,54,0.86) 100%);
  --color-disabled-bg:#E4E2DE;
  --color-disabled-ink:var(--iji-neutral-400);

  /* — 3. Typography — */
  --font-heading:"Tenor Sans", Georgia, serif;
  --font-body:"Jost", -apple-system, "Segoe UI", system-ui, sans-serif;
  --fs-display:clamp(2.125rem, 1.1rem + 4.6vw, 3.75rem);   /* 34 → 60 */
  --fs-h1:clamp(1.75rem, 1.05rem + 3.1vw, 2.75rem);        /* 28 → 44 */
  --fs-h2:clamp(1.5rem, 1.15rem + 1.6vw, 2rem);            /* 24 → 32 */
  --fs-h3:clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem);         /* 20 → 24 */
  --fs-h4:clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);       /* 17 → 19 */
  --fs-lead:clamp(1.0625rem, 0.95rem + 0.5vw, 1.1875rem);  /* 17 → 19 */
  --fs-body:clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);      /* 16 → 17 */
  --fs-small:clamp(0.875rem, 0.84rem + 0.16vw, 0.9375rem); /* 14 → 15 */
  --fs-caption:clamp(0.75rem, 0.72rem + 0.13vw, 0.8125rem);/* 12 → 13 */
  --fs-quote:clamp(1.25rem, 0.95rem + 1.3vw, 1.5rem);      /* 20 → 24 */
  --lh-tight:1.08; --lh-heading:1.2; --lh-body:1.65; --lh-relaxed:1.75;
  --tracking-caption:0.08em; --tracking-display:-0.008em;
  --measure-text:68ch; --measure-display:24ch;

  /* — 4. Grid and spacing — */
  --grid-cols:4; --grid-gutter:16px; --page-gutter:20px; --content-max:1280px;
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  --space-11:160px;
  --section-y:var(--space-8);      /* 64 mobile */
  --card-pad:20px;

  /* WordPress-facing aliases (used from theme.json) */
  --iji-page-gutter:var(--page-gutter);
  --iji-section-y:var(--section-y);

  /* — 5. Radii, shadows, motion — */
  --radius-none:0; --radius-xs:2px; --radius-pill:999px;
  --shadow-none:none;
  --shadow-overlay:0 8px 24px rgba(79,73,68,0.12);
  --shadow-focus:0 0 0 2px var(--color-focus-offset), 0 0 0 4px var(--color-focus);
  --dur-micro:150ms; --dur-ui:200ms; --dur-overlay:280ms; --dur-enter:400ms;
  --ease-out:cubic-bezier(0.22,0.61,0.36,1);
  --ease-in:cubic-bezier(0.55,0.06,0.68,0.19);
  --ease-inout:cubic-bezier(0.45,0.05,0.55,0.95);

  /* — 6. Touch targets — */
  --tap-min:44px; --control-h-sm:40px; --control-h-md:48px; --control-h-lg:56px;
}

@media (min-width:768px){ :root{ --grid-cols:8;  --grid-gutter:20px; --page-gutter:32px;
  --section-y:88px; --card-pad:24px; } }
@media (min-width:1024px){ :root{ --grid-cols:12; --grid-gutter:24px; --page-gutter:40px; } }
@media (min-width:1280px){ :root{ --page-gutter:48px; --section-y:120px; --card-pad:32px; } }
@media (min-width:1920px){ :root{ --grid-gutter:32px; --content-max:1440px; } }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation-duration:1ms !important; animation-iteration-count:1 !important;
    transition-duration:1ms !important; scroll-behavior:auto !important; }
  [data-anim] { transform:none !important; opacity:1 !important; }
}