/* ═══════════════════════════════════════════════════════
   STILLNESS — DESIGN TOKENS
   All variables that define the design system
   ═══════════════════════════════════════════════════════ */

/* ── Font fallbacks with size-adjust (prevent CLS) ───── */
@font-face {
  font-family: 'Cormorant Garamond Fallback';
  src: local('Georgia');
  size-adjust: 96%;
  ascent-override: 88%;
  descent-override: 22%;
  line-gap-override: 0%;
  font-weight: 300 500;
}
@font-face {
  font-family: 'DM Sans Fallback';
  src: local('system-ui'), local('-apple-system');
  size-adjust: 102%;
  ascent-override: 94%;
  descent-override: 24%;
  line-gap-override: 0%;
  font-weight: 300 500;
}

:root {
  /* ── Colors ─────────────────────────────────────────── */
  --bg-base:          #F5F3EF;
  --bg-warm:          #EDE9E1;
  --bg-section-alt:   #F0EBE2;
  --bg-dark:          #1A1714;
  --bg-dark-2:        #231F1B;

  --cream:            #FAF8F4;
  --ivory:            #F2EDE4;

  --accent:           #C8956C;
  --accent-dark:      #A8754C;
  --accent-light:     #DFB898;
  --accent-pale:      rgba(200, 149, 108, 0.10);
  --accent-glow:      rgba(200, 149, 108, 0.22);

  --text-primary:     #1C1917;
  --text-secondary:   #6B6560;
  --text-muted:       #A09891;
  --text-inverse:     #FAF8F4;

  /* ── Glass System ────────────────────────────────────── */
  --glass-bg:          rgba(255, 255, 255, 0.10);
  --glass-bg-medium:   rgba(255, 255, 255, 0.15);
  --glass-bg-heavy:    rgba(255, 255, 255, 0.22);
  --glass-bg-dark:     rgba(26, 23, 20, 0.55);

  --glass-border:      rgba(255, 255, 255, 0.22);
  --glass-border-soft: rgba(255, 255, 255, 0.12);
  --glass-border-warm: rgba(200, 149, 108, 0.20);

  --glass-shadow:
    0 8px 40px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  --glass-shadow-hover:
    0 20px 60px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --glass-shadow-accent:
    0 12px 40px rgba(200, 149, 108, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.50);

  /* ── Blur ────────────────────────────────────────────── */
  --blur-sm:   blur(12px) saturate(160%);
  --blur-md:   blur(20px) saturate(170%);
  --blur-lg:   blur(28px) saturate(180%);
  --blur-xl:   blur(40px) saturate(190%);

  /* ── Radius ──────────────────────────────────────────── */
  --r-sm:      10px;
  --r-md:      16px;
  --r-lg:      22px;
  --r-xl:      28px;
  --r-2xl:     36px;
  --r-pill:    100px;

  /* ── Typography ──────────────────────────────────────── */
  --font-display: 'Cormorant Garamond', 'Cormorant Garamond Fallback', Georgia, serif;
  --font-body:    'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;

  /* ── Spacing ─────────────────────────────────────────── */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;
  --space-3xl:  96px;

  /* ── Motion ──────────────────────────────────────────── */
  --ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in:     cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:    200ms;
  --dur-base:    350ms;
  --dur-slow:    500ms;
  --dur-slower:  700ms;

  /* ── Z-index ─────────────────────────────────────────── */
  --z-bg:      -1;
  --z-base:     0;
  --z-raise:    10;
  --z-nav:      100;
  --z-modal:    200;
  --z-toast:    300;
}