/* ==========================================================================
   AURELINE — Design Tokens
   Single source of truth for color, type, spacing, radius, shadow, motion.
   ========================================================================== */

:root {
  /* ---- Color: core palette ---- */
  --black: #0a0a0a;
  --charcoal: #161616;
  --charcoal-2: #1f1f1f;
  --white: #ffffff;
  --ivory: #f7f5f1;
  --ivory-2: #efeae2;

  --gold: #c6a35d;
  --gold-light: #e6cd99;
  --gold-dark: #9c7d40;

  /* ---- Color: neutrals / text ---- */
  --gray-900: #121212;
  --gray-800: #262626;
  --gray-700: #404040;
  --gray-600: #5c5c5c;
  --gray-500: #7a7a7a;
  --gray-400: #a3a3a3;
  --gray-300: #cfcccc;
  --gray-200: #e6e3df;
  --gray-100: #f2f0ec;

  /* ---- Semantic color roles ---- */
  --color-bg: var(--white);
  --color-bg-alt: var(--ivory);
  --color-bg-dark: var(--black);
  --color-bg-dark-alt: var(--charcoal);
  --color-text: var(--gray-900);
  --color-text-muted: var(--gray-600);
  --color-text-on-dark: var(--ivory);
  --color-text-on-dark-muted: var(--gray-400);
  --color-border: var(--gray-200);
  --color-border-dark: rgba(255, 255, 255, 0.12);
  --color-accent: var(--gold);
  --color-accent-light: var(--gold-light);

  /* ---- Typography ---- */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-display-xl: clamp(2.75rem, 2rem + 3.4vw, 5.5rem);
  --fs-display-lg: clamp(2.25rem, 1.7rem + 2.4vw, 4rem);
  --fs-display-md: clamp(1.875rem, 1.5rem + 1.6vw, 3rem);
  --fs-display-sm: clamp(1.5rem, 1.3rem + 0.9vw, 2.1rem);
  --fs-xl: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-lg: 1.125rem;
  --fs-base: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.6;
  --lh-relaxed: 1.8;

  --ls-tight: -0.02em;
  --ls-wide: 0.08em;
  --ls-wider: 0.18em;

  /* ---- Spacing (8pt scale) ---- */
  --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;

  --section-pad-y: clamp(4.5rem, 3.5rem + 4vw, 9rem);
  --section-pad-y-sm: clamp(3rem, 2.5rem + 2vw, 5rem);

  /* ---- Layout ---- */
  --container-max: 1320px;
  --container-narrow: 860px;
  --container-pad: clamp(1.25rem, 1rem + 2vw, 3rem);

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 2px 8px rgba(10, 10, 10, 0.06);
  --shadow-md: 0 12px 32px rgba(10, 10, 10, 0.10);
  --shadow-lg: 0 24px 64px rgba(10, 10, 10, 0.16);
  --shadow-gold: 0 8px 24px rgba(198, 163, 93, 0.28);

  /* ---- Motion ---- */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 200ms;
  --duration-med: 420ms;
  --duration-slow: 800ms;

  /* ---- Z-index ---- */
  --z-nav: 100;
  --z-announcement: 101;
  --z-overlay: 200;
  --z-modal: 300;
}

/* Scale down the large end of the spacing scale on small screens — these
   values drive section padding and hero margins, and left unchanged they
   read as oversized gaps once the viewport narrows. */
@media (max-width: 640px) {
  :root {
    --space-7: 2rem;
    --space-8: 2.5rem;
    --space-9: 3rem;
    --space-10: 4rem;
    --space-11: 5rem;
  }
}