/* ==========================================================================
   Supreme Bed & Linen — Design Tokens
   Direction: "Night Luxury" — midnight blue + gold, cream linen surfaces.
   Palette derived from the brand logo (gold crescent moon) and brand blue/yellow.
   ========================================================================== */

:root {
  /* --- Brand core --- */
  /* Royal-blue scale, tuned lighter and harmonised with the logo cobalt (#012DB5) */
  --navy-950: #0b2650;   /* deepest */
  --navy-900: #123f7e;   /* primary dark surface — clearly blue, lighter than midnight */
  --navy-800: #1a51a0;   /* raised dark surface */
  --navy-700: #2f66b0;   /* borders on dark */
  --blue-500: #4a90d9;   /* brand sky blue accent */
  --blue-300: #9cc3ec;

  --gold-700: #9c7b2e;
  --gold-500: #c9a24b;   /* primary gold */
  --gold-400: #d8b866;
  --gold-300: #e7cf8f;
  --yellow:   #f4c945;   /* bright brand highlight, used sparingly */

  --cream-50:  #faf7f0;  /* lightest linen */
  --cream-100: #f4efe4;  /* primary light surface */
  --cream-200: #ebe3d3;  /* raised light surface */
  --cream-300: #ddd2ba;  /* light border */

  --ink-900: #101a26;    /* headings on light */
  --ink-700: #2b3a4a;    /* body on light */
  --ink-500: #5a6875;    /* muted on light */

  /* --- Semantic surfaces --- */
  --surface-dark: var(--navy-900);
  --surface-dark-raised: var(--navy-800);
  --surface-light: var(--cream-100);
  --surface-light-raised: var(--cream-50);

  --text-on-dark: #eaf1f8;
  --text-on-dark-muted: #a9bdd2;
  --text-on-light: var(--ink-700);
  --text-heading-light: var(--ink-900);

  --accent: var(--gold-500);
  --accent-strong: var(--gold-400);

  /* --- Typography --- */
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs:   clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --text-sm:   clamp(0.84rem, 0.8rem + 0.15vw, 0.92rem);
  --text-base: clamp(0.98rem, 0.94rem + 0.2vw, 1.06rem);
  --text-lg:   clamp(1.12rem, 1.05rem + 0.35vw, 1.3rem);
  --text-xl:   clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
  --text-2xl:  clamp(2rem, 1.6rem + 1.8vw, 3rem);
  --text-3xl:  clamp(2.6rem, 1.9rem + 3.2vw, 4.6rem);
  --text-hero: clamp(3.2rem, 2rem + 5.4vw, 7rem);

  --tracking-wide: 0.14em;
  --tracking-wider: 0.24em;

  /* --- Spacing / rhythm --- */
  --space-1: 0.375rem;
  --space-2: 0.75rem;
  --space-3: 1.125rem;
  --space-4: 1.75rem;
  --space-5: 2.75rem;
  --space-6: 4rem;
  --space-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --container: 1200px;
  --container-wide: 1360px;

  /* --- Radii --- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* --- Shadows / depth --- */
  --shadow-sm: 0 2px 8px rgba(6, 15, 28, 0.08);
  --shadow-md: 0 14px 40px -18px rgba(6, 15, 28, 0.35);
  --shadow-lg: 0 40px 80px -30px rgba(6, 15, 28, 0.55);
  --shadow-gold: 0 18px 50px -20px rgba(201, 162, 75, 0.5);

  /* --- Motion --- */
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 620ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* --- Layout helpers --- */
  --header-h: 76px;
}