/* =========================================================
   LILY GRAY — Design Tokens
   Singular by Design.
   ========================================================= */

:root {
  /* ---------- Palette ---------- */
  --pearl-cream:        #F6F0E6;   /* main canvas */
  --pearl-cream-soft:   #FBF6EC;   /* slightly lifted surface */
  --pearl-cream-deep:   #EFE7D8;   /* section shift */

  --stone-gray:         #3B3A36;   /* primary text */
  --stone-gray-soft:    #6E6B64;   /* secondary text */
  --stone-gray-mute:    #9A958B;   /* tertiary text / rules */

  --muted-sage:         #A8B39B;   /* supporting accent */
  --muted-sage-soft:    #C9D0BE;
  --muted-sage-deep:    #7F8A74;   /* sage panels on about / footer */

  /* Brushed champagne gold — more presence than before */
  --gold:               #B89360;
  --gold-soft:          #D7B883;
  --gold-deep:          #8F6F42;
  --gold-line:          #C9A874;
  --gold-gradient: linear-gradient(
    135deg,
    #C9A874 0%,
    #E3C693 30%,
    #B89360 60%,
    #D7B883 100%
  );

  --ink:                #2A2925;
  --white:              #FFFFFF;
  --overlay:            rgba(43, 41, 37, 0.55);

  /* ---------- Typography ---------- */
  --font-serif: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Italiana", "Cormorant Garamond", serif;

  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-64: 4rem;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  --ls-wide:    0.22em;
  --ls-wider:   0.32em;
  --ls-normal:  0.01em;

  /* ---------- Spacing ---------- */
  --s-2:  0.125rem;
  --s-4:  0.25rem;
  --s-6:  0.375rem;
  --s-8:  0.5rem;
  --s-12: 0.75rem;
  --s-16: 1rem;
  --s-20: 1.25rem;
  --s-24: 1.5rem;
  --s-32: 2rem;
  --s-40: 2.5rem;
  --s-48: 3rem;
  --s-56: 3.5rem;
  --s-64: 4rem;
  --s-80: 5rem;
  --s-96: 6rem;
  --s-120: 7.5rem;

  /* ---------- Layout ---------- */
  --container: 1280px;
  --container-narrow: 960px;
  --container-wide:   1440px;
  --gutter: clamp(1rem, 3vw, 2rem);

  /* ---------- Radii ---------- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-1: 0 1px 2px rgba(59, 58, 54, 0.04),
              0 2px 6px rgba(59, 58, 54, 0.04);
  --shadow-2: 0 6px 18px rgba(59, 58, 54, 0.06);
  --shadow-gold: 0 6px 20px rgba(184, 147, 96, 0.18);

  /* ---------- Borders ---------- */
  --border-soft:  1px solid rgba(59, 58, 54, 0.08);
  --border-gold:  1px solid var(--gold-line);
  --rule-gold:    1px solid var(--gold-soft);

  /* ---------- Motion ---------- */
  --ease:   cubic-bezier(.2, .7, .2, 1);
  --dur-1:  160ms;
  --dur-2:  260ms;
  --dur-3:  420ms;
}

/* Breakpoints used in main.css:
   sm: 480px, md: 720px, lg: 1024px, xl: 1280px
*/