/* ==========================================================================
   Dholera — Design Tokens
   Visual direction: "Earthy Luxury"
   Warm off-white · deep forest green · muted gold · serif display + clean sans
   ========================================================================== */

:root {
  /* ---- Color: surfaces ------------------------------------------------- */
  --c-bg:            #FAF8F4;   /* warm off-white — page base            */
  --c-bg-alt:        #F1ECE2;   /* alternating section band              */
  --c-bg-sink:       #EDE6D8;   /* inset cards / table stripes           */
  --c-surface:       #FFFFFF;   /* raised cards                          */

  /* ---- Color: ink --------------------------------------------------- */
  --c-ink:           #1C1B18;   /* primary text                         */
  --c-ink-soft:      #5A574F;   /* secondary text                       */
  --c-ink-faint:     #8B877C;   /* captions, meta                       */

  /* ---- Color: brand ------------------------------------------------- */
  --c-brand:         #123A2E;   /* deep forest green — primary          */
  --c-brand-mid:     #1E5240;   /* hover / lighter green                */
  --c-brand-deep:    #0E1F1A;   /* dark sections / footer               */

  /* ---- Color: accent (gold — used sparingly) ---------------------- */
  --c-accent:        #C6A15B;
  --c-accent-strong: #B08D45;   /* accent hover                         */
  --c-accent-soft:   #E7D8B8;   /* gold tint background                 */

  /* ---- Color: lines & states ------------------------------------- */
  --c-line:          #DED8CB;   /* hairline borders                     */
  --c-line-strong:   #C9C1AF;
  --c-available:     #2F7D5D;   /* master-plan: plot available          */
  --c-sold:          #B7ADA0;   /* master-plan: plot sold               */
  --c-hold:          --c-accent;

  /* ---- On-dark overrides (apply .on-dark) ------------------------ */
  --c-ondark-ink:      #F3EFE6;
  --c-ondark-ink-soft: #B9C3BB;
  --c-ondark-line:     rgba(243, 239, 230, 0.16);

  /* ---- Typography ---------------------------------------------------- */
  --font-display: "Fraunces", "Cormorant Garamond", "Iowan Old Style",
                  "Palatino Linotype", Georgia, serif;
  --font-body:    "Inter", "Satoshi", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale — clamp(min, preferred, max) */
  --step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.89rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.22vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.10rem + 0.45vw, 1.50rem);
  --step-2:  clamp(1.45rem, 1.28rem + 0.80vw, 2.00rem);
  --step-3:  clamp(1.75rem, 1.45rem + 1.45vw, 2.75rem);
  --step-4:  clamp(2.10rem, 1.60rem + 2.45vw, 3.75rem);
  --step-5:  clamp(2.55rem, 1.75rem + 3.90vw, 5.00rem);
  --step-6:  clamp(3.00rem, 1.80rem + 6.00vw, 6.75rem);

  --lh-tight:   1.08;
  --lh-snug:    1.25;
  --lh-body:    1.65;
  --tracking-caps: 0.14em;

  /* ---- Spacing (4px base) ---------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;    --sp-11: 11rem;

  /* Section rhythm */
  --section-y: clamp(3.5rem, 2.5rem + 5vw, 8rem);

  /* ---- Layout ---------------------------------------------------- */
  --w-wide: 1280px;
  --w-mid:  1040px;
  --w-text: 68ch;
  --gutter: clamp(1.25rem, 0.75rem + 2.5vw, 3rem);

  /* ---- Radius -------------------------------------------------- */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* ---- Shadow ------------------------------------------------- */
  --shadow-ambient: 0 1px 2px rgba(28, 27, 24, 0.04),
                    0 8px 24px rgba(28, 27, 24, 0.06);
  --shadow-lift:    0 2px 6px rgba(28, 27, 24, 0.08),
                    0 20px 48px rgba(28, 27, 24, 0.14);

  /* ---- Motion ---------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 500ms;
  --dur-fast: 220ms;

  /* ---- Chrome ---------------------------------------------------- */
  --header-h: 68px;
  color-scheme: light;
}

@media (min-width: 768px) {
  :root { --header-h: 84px; }
}