/* ============================================================
   PRELUDE PAINTING — Design Tokens
   All CSS custom properties live here.
   Edit this file to retheme the entire site.
   ============================================================ */

:root {

  /* ── Brand Colors ── */
  --navy:          #1c2b4a;
  --navy-mid:      #243358;
  --navy-dark:     #111827;
  --slate:         #5c6b8a;
  --silver:        #9aa3b4;
  --gold:          #c9a96e;
  --gold-light:    #e8d5b0;
  --gold-dark:     #a8884f;

  /* ── Neutrals ── */
  --cream:         #f7f5f2;
  --warm-white:    #fdfcfb;
  --off-white:     #f2f0ec;
  --border:        rgba(28, 43, 74, 0.10);
  --border-light:  rgba(28, 43, 74, 0.06);

  /* ── Text ── */
  --text:          #2e2e2e;
  --text-mid:      #4a4a4a;
  --text-light:    #6b6b6b;
  --text-muted:    #9b9b9b;

  /* ── Shadows ── */
  --shadow-sm:     0 2px 12px rgba(28, 43, 74, 0.07);
  --shadow:        0 4px 32px rgba(28, 43, 74, 0.10);
  --shadow-md:     0 8px 40px rgba(28, 43, 74, 0.14);
  --shadow-lg:     0 16px 64px rgba(28, 43, 74, 0.18);
  --shadow-xl:     0 32px 80px rgba(28, 43, 74, 0.22);

  /* ── Typography ── */
  --font-display:  'Cormorant Garamond', Georgia, serif;
  --font-body:     'DM Sans', 'Helvetica Neue', sans-serif;

  --text-xs:       0.6875rem;   /* 11px */
  --text-sm:       0.8125rem;   /* 13px */
  --text-base:     1rem;        /* 16px */
  --text-md:       1.125rem;    /* 18px */
  --text-lg:       1.25rem;     /* 20px */
  --text-xl:       1.5rem;      /* 24px */
  --text-2xl:      2rem;        /* 32px */
  --text-3xl:      2.5rem;      /* 40px */
  --text-4xl:      3.25rem;     /* 52px */
  --text-5xl:      4.5rem;      /* 72px */

  /* ── Spacing ── */
  --space-1:       4px;
  --space-2:       8px;
  --space-3:       12px;
  --space-4:       16px;
  --space-5:       20px;
  --space-6:       24px;
  --space-8:       32px;
  --space-10:      40px;
  --space-12:      48px;
  --space-16:      64px;
  --space-20:      80px;
  --space-24:      96px;
  --space-28:      112px;

  /* ── Layout ── */
  --max-width:     1240px;
  --gutter:        clamp(20px, 4vw, 48px);
  --nav-height:    72px;
  --topbar-height: 38px;

  /* ── Borders ── */
  --radius-sm:     2px;
  --radius:        4px;
  --radius-md:     8px;
  --radius-lg:     16px;
  --radius-full:   9999px;

  /* ── Transitions ── */
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 180ms;
  --duration:      320ms;
  --duration-slow: 560ms;
  --transition:    var(--duration) var(--ease);

  /* ── Z-index scale ── */
  --z-base:        1;
  --z-above:       10;
  --z-header:      100;
  --z-mobile-menu: 200;
  --z-modal:       300;
  --z-chat:        400;
  --z-toast:       500;
}

/* ── Dark mode tokens (optional future use) ── */
@media (prefers-color-scheme: dark) {
  /* intentionally not auto-dark — brand requires light cream aesthetic */
}