/* ============================================================================
   HOUSE OF COLORS — DESIGN TOKENS
   Colour  : houseofcolors.in (sampled) + Reflections 66 brochure
   Type    : General Sans (Fontshare, free) — the Muse & Maison typeface
   Structure/rhythm : assetzproperty.com/museandmaison
   Edit ONLY this file to restyle the site. Nothing below hardcodes a value.
   ============================================================================ */

/* ---------- Fonts (self-hosted, no external requests) ---------- */
@font-face{font-family:'General Sans';src:url('../fonts/GeneralSans-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('../fonts/GeneralSans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('../fonts/GeneralSans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('../fonts/GeneralSans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{

  /* ---------- COLOUR — roles, not names ---------- */

  /* Grounds — the white ↔ cream alternation is the page rhythm */
  --ground        : #FFFFFF;
  --ground-cream  : #FBF7EF;   /* primary alternate section ground */
  --ground-cream-2: #F6F4EE;   /* second cream, for adjacent cream sections */
  --ground-sand   : #F0ECE6;   /* card fill on cream */
  --ground-dark   : #1C2E26;   /* HoC deep forest green — their site theme colour */
  --ground-dark-2 : #1B2E20;   /* the hero graphic green */

  /* Brand */
  --brand         : #1C2E26;   /* forest green — primary */
  --brand-soft    : #26332A;   /* fluted panel ground */
  --brand-rib     : #3E5140;   /* fluted panel ribs */
  --sage          : #93B68B;   /* the ENQUIRY edge tab */
  --terracotta    : #B37B64;   /* HoC's declared accent — warm clay */
  --sun           : #F5831F;   /* the sunburst in the logo. Use sparingly. */

  /* Ink */
  --ink           : #14201A;   /* headings on light */
  --ink-body      : #384038;   /* body copy on light */
  --ink-soft      : #6C6C6C;   /* captions, meta */
  --ink-faint     : #8A8A85;
  --ink-on-dark   : #F5F3EE;
  --ink-on-dark-s : #C3CDC2;

  /* Lines & fills */
  --line          : #D2D0C9;
  --line-soft     : #E6E3DC;
  --line-on-dark  : rgba(245,243,238,.18);
  --overlay       : linear-gradient(to top, rgba(12,20,15,.90) 0%, rgba(12,20,15,.55) 38%, rgba(12,20,15,0) 78%);

  /* States */
  --focus         : #93B68B;

  /* ---------- TYPE ---------- */
  --font          : 'General Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Modular scale, 1.25 — matches Muse's 12/14/16/20/24/32/40/50 */
  --t-label       : .625rem;   /* 10 — eyebrow/label, the only uppercase in the system */
  --t-micro       : .75rem;    /* 12 */
  --t-small       : .875rem;   /* 14 — the workhorse small size on Muse */
  --t-body        : 1rem;      /* 16 */
  --t-lead        : 1.125rem;  /* 18 */
  --t-h4          : 1.25rem;   /* 20 */
  --t-h3          : 1.5rem;    /* 24 */
  --t-h2          : clamp(1.75rem, 1.2rem + 1.8vw, 2rem);      /* 28 → 32 */
  --t-h1          : clamp(2rem, 1.3rem + 3vw, 2.5rem);         /* 32 → 40 */
  --t-display     : clamp(2.25rem, 1.4rem + 4vw, 3.25rem);     /* 36 → 52 hero only */

  --lh-tight      : 1.15;
  --lh-heading    : 1.2;      /* muse: 40px/48px = 1.2 */
  --lh-body       : 1.6;
  --lh-relaxed    : 1.75;

  --w-light       : 300;
  --w-regular     : 400;
  --w-medium      : 500;
  --w-semi        : 600;

  --track-label   : .14em;     /* the ONLY tracking in the system */

  /* ---------- SPACE — 4px base ---------- */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem;  --s-8: 2rem;    --s-10: 2.5rem;
  --s-12: 3rem;   --s-16: 4rem;   --s-20: 5rem;   --s-24: 6rem;

  /* Section rhythm — Muse breathes; don't compress these */
  --section-y     : clamp(3.5rem, 2rem + 6vw, 6.5rem);
  --section-y-tight: clamp(2.5rem, 1.5rem + 4vw, 4rem);

  /* ---------- LAYOUT ---------- */
  --page-max      : 1240px;
  --page-pad      : clamp(1.25rem, .5rem + 3vw, 3.5rem);
  --gap           : clamp(1.25rem, .8rem + 1.6vw, 2.25rem);

  /* ---------- SHAPE ---------- */
  --r-sm          : 8px;
  --r            : 12px;   /* default card */
  --r-md          : 16px;
  --r-lg          : 20px;  /* large image cards */
  --r-pill        : 999px;

  --shadow-card   : 0 1px 2px rgba(20,32,26,.04), 0 8px 24px rgba(20,32,26,.06);
  --shadow-lift   : 0 2px 6px rgba(20,32,26,.06), 0 18px 44px rgba(20,32,26,.10);

  /* ---------- MOTION — Muse is restrained. Keep it that way. ---------- */
  --ease          : cubic-bezier(.22,.61,.36,1);
  --dur-fast      : .18s;
  --dur           : .3s;
  --dur-slow      : .6s;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}