/* ============================================================
   LUMOS — Design Tokens
   Breakpoints:
     --bp-sm  : ≤ 480px   (small phones)
     --bp-md  : ≤ 768px   (phone / tablet portrait)
     --bp-lg  : ≤ 1024px  (tablet landscape)
     --bp-xl  : ≤ 1280px  (small desktop)
   ============================================================ */

:root {
  /* Brand Colors */
  --ivory:      #F5EFE6;
  --bone:       #EAE2D4;
  --ink:        #1A1714;
  --champagne:  #C8A96A;
  --rose-nude:  #D9B5A6;
  --shadow:     rgba(26, 23, 20, 0.08);

  /* Typography */
  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'Manrope', sans-serif;

  /* Spacing — desktop */
  --section-pad-v: 120px;
  --section-pad-h: 60px;
  --section-gap:   72px;

  /* Motion */
  --ease-luxury:   cubic-bezier(0.4, 0, 0.2, 1);
  --duration-slow: 600ms;
  --duration-mid:  400ms;
  --duration-fast: 300ms;

  /* Borders */
  --border-champ:        1px solid rgba(200, 169, 106, 0.3);
  --border-champ-strong: 1px solid rgba(200, 169, 106, 0.5);

  /* Z-index layers */
  --z-grain: 9999;
  --z-nav:    100;
  --z-modal:  200;
}

/* Tablet landscape */
@media (max-width: 1024px) {
  :root {
    --section-pad-v: 96px;
    --section-pad-h: 40px;
    --section-gap:   56px;
  }
}

/* Tablet portrait / large phone */
@media (max-width: 768px) {
  :root {
    --section-pad-v: 72px;
    --section-pad-h: 24px;
    --section-gap:   40px;
  }
}

/* Small phone */
@media (max-width: 480px) {
  :root {
    --section-pad-v: 60px;
    --section-pad-h: 20px;
    --section-gap:   32px;
  }
}