/* ==========================================================================
   Aurora Court — Design tokens
   Brand colours sourced from the live site (auroracourt.com.my):
     --main-color   #fe4e37  (live stylesheet :root)
     --footer-color #1c1c1c  (live stylesheet :root)
     Logo gold      #a08038 / #f8d858 (sampled from logo_nav.png)
   ========================================================================== */

:root {
  /* ---- Brand ---- */
  --color-coral: #fe4e37;          /* live primary brand colour */
  --color-coral-600: #d93a22;      /* AA-safe for white text (4.6:1) */
  --color-coral-700: #b8321c;      /* hover / pressed */
  --color-coral-50: #fff1ee;

  --color-gold: #c9a24e;           /* logo gold, for use on dark */
  --color-gold-light: #e6cd86;     /* logo highlight, softened */
  --color-bronze: #7a5f26;         /* gold darkened for text on light (5.6:1) */
  --color-bronze-500: #8a6d2f;     /* icons, rules */

  /* ---- Neutrals ---- */
  --color-ink: #1c1c1c;            /* live footer colour */
  --color-ink-800: #24211e;
  --color-ink-700: #2f2b27;
  --color-text: #2b2723;
  --color-muted: #5f5850;
  --color-subtle: #8c847a;
  --color-line: #e6dfd4;
  --color-sand: #f1ebe1;
  --color-cream: #faf7f2;
  --color-white: #ffffff;

  --color-on-dark: #f6f1e8;
  --color-on-dark-muted: #b5ada3;

  /* ---- Typography ---- */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-body: "Jost", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --fs-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h3: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --fs-h2: clamp(2.125rem, 1.6rem + 2.4vw, 3.5rem);
  --fs-h1: clamp(2.75rem, 1.8rem + 4.6vw, 6rem);

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.7;

  --tracking-eyebrow: 0.22em;

  /* ---- Spacing (8px 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: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-12: 6rem;

  --section-pad: clamp(4rem, 8vw, 8rem);
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --container: 1240px;
  --container-narrow: 760px;

  /* ---- Shape & depth ---- */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(28, 24, 20, 0.06), 0 2px 8px rgba(28, 24, 20, 0.04);
  --shadow: 0 10px 30px -12px rgba(28, 24, 20, 0.18), 0 4px 10px -6px rgba(28, 24, 20, 0.08);
  --shadow-lg: 0 30px 60px -20px rgba(28, 24, 20, 0.28), 0 10px 20px -10px rgba(28, 24, 20, 0.12);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur: 280ms;
  --dur-slow: 700ms;

  --nav-h: 76px;
  --z-nav: 100;
  --z-float: 90;
  --z-modal: 200;
}

@media (min-width: 1024px) {
  :root { --nav-h: 88px; }
}