/* ==========================================================================
   SPUR HOMES — Design Tokens
   Palette sampled directly from the Ultimate 2BHK Planning Guide (brand PDF).
   Single source of truth: never hardcode a hex outside this file.
   ========================================================================== */

:root {
  /* --- Brand: olive / forest green ------------------------------------- */
  --olive-950: #1F2117;
  --olive-900: #2E3021;
  --olive-800: #3E4130;
  --olive-700: #4C4F38;
  --olive-600: #5C5F43; /* primary brand green (PDF banner) */
  --olive-500: #6F7254;
  --olive-400: #8A8D72;
  --olive-300: #AFB29B;
  --olive-200: #D2D4C6;
  --olive-100: #E9EAE2;
  --olive-50:  #F3F4EE;

  /* --- Warm neutrals ---------------------------------------------------- */
  --cream-50:  #FFFDF9;
  --cream-100: #FAF8F3;
  --cream-200: #F5F3EE; /* page background (PDF page stock) */
  --sand-300:  #EFEAE0;
  --sand-400:  #E4DED2; /* beige cards */
  --sand-500:  #D6CFC0;

  --ink-900: #1B1C16;
  --ink-800: #23241E; /* primary foreground */
  --ink-700: #3A3B33;
  --ink-600: #55564C;
  --ink-500: #6B6C62; /* muted body copy — 4.8:1 on cream */
  --ink-400: #8C8D83;
  --ink-300: #B4B5AC;

  /* --- Accent: muted gold ----------------------------------------------- */
  --gold-700: #8A6A2F; /* accessible gold for text — 4.6:1 on cream */
  --gold-600: #A98244;
  --gold-500: #C4A46A;
  --gold-200: #EADFC7;

  /* --- Feedback --------------------------------------------------------- */
  --success-700: #2F6B46;
  --success-100: #E4F0E8;
  --danger-700:  #A43A2C;
  --danger-100:  #F8E7E4;

  /* --- Semantic roles --------------------------------------------------- */
  --color-bg:            var(--cream-200);
  --color-bg-elevated:   var(--cream-50);
  --color-bg-sunken:     var(--sand-300);
  --color-surface:       #FFFFFF;
  --color-fg:            var(--ink-800);
  --color-fg-muted:      var(--ink-500);
  --color-fg-subtle:     var(--ink-400);
  --color-fg-on-dark:    var(--cream-100);
  --color-primary:       var(--olive-600);
  --color-primary-hover: var(--olive-700);
  --color-on-primary:    #FFFFFF;
  --color-accent:        var(--gold-700);
  --color-border:        rgba(35, 36, 30, 0.10);
  --color-border-strong: rgba(35, 36, 30, 0.18);
  --color-ring:          var(--olive-600);

  /* --- Typography -------------------------------------------------------- */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale — clamp(min, preferred, max) */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   clamp(1.0625rem, 0.2vw + 1rem, 1.125rem);
  --text-lg:   clamp(1.125rem, 0.4vw + 1rem, 1.3125rem);
  --text-xl:   clamp(1.375rem, 0.8vw + 1.1rem, 1.75rem);
  --text-2xl:  clamp(1.75rem, 1.4vw + 1.3rem, 2.375rem);
  --text-3xl:  clamp(2.125rem, 2.4vw + 1.4rem, 3.25rem);
  --text-4xl:  clamp(2.5rem, 4vw + 1.2rem, 4.5rem);
  --text-5xl:  clamp(3rem, 6.2vw + 0.8rem, 6.5rem);

  --leading-tight: 1.06;
  --leading-snug:  1.24;
  --leading-body:  1.65;
  --tracking-tight: -0.03em;
  --tracking-wide:  0.14em;

  /* --- Spacing (spacious rhythm, 4px base) ------------------------------- */
  --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-10: 8rem;
  --space-11: 10rem;

  /* Vertical rhythm between page sections */
  --section-y: clamp(4.5rem, 9vw, 10rem);

  /* --- Radii ------------------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-2xl: 44px;
  --radius-pill: 999px;

  /* --- Elevation (warm-tinted, never pure black) ------------------------- */
  --shadow-xs: 0 1px 2px rgba(35, 36, 30, 0.05);
  --shadow-sm: 0 2px 8px rgba(35, 36, 30, 0.06);
  --shadow-md: 0 10px 30px -12px rgba(35, 36, 30, 0.18);
  --shadow-lg: 0 24px 60px -20px rgba(35, 36, 30, 0.24);
  --shadow-xl: 0 40px 100px -32px rgba(35, 36, 30, 0.30);
  --shadow-glow: 0 20px 60px -24px rgba(92, 95, 67, 0.45);

  /* --- Liquid glass ------------------------------------------------------ */
  --glass-tint:        rgba(255, 253, 249, 0.62);
  --glass-tint-strong: rgba(255, 253, 249, 0.86);
  --glass-tint-dark:   rgba(46, 48, 33, 0.55);
  --glass-border:      rgba(255, 255, 255, 0.65);
  --glass-border-dark: rgba(255, 255, 255, 0.18);
  --glass-blur: 20px;
  --glass-saturate: 1.6;

  /* --- Motion ------------------------------------------------------------ */
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 420ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Layout ------------------------------------------------------------ */
  --container-max: 1280px;
  --container-wide: 1480px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --nav-h: 76px;

  /* --- Z-index scale ------------------------------------------------------ */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-nav: 200;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
}

@media (max-width: 767px) {
  :root { --nav-h: 64px; }
}