/* ==========================================================================
   FEMIBRANDED — DESIGN TOKENS
   A restrained system: one ink, one paper, one gold. Everything else is
   a tint of those three. Change a value here and it moves everywhere.
   ========================================================================== */

:root {
  /* ---- color: ink & paper ---- */
  --ink: #0a0a0a;
  --ink-1: #111110;
  --ink-2: #161513;
  --paper: #f6f3ee;
  --paper-dim: #e9e4da;

  /* ---- color: the one accent ---- */
  --gold: #c9a24a;
  --gold-light: #e8c96a;
  --gold-dim: #8a6a1a;

  /* text-on-ink opacities (use instead of inventing new grays) */
  --on-ink-100: var(--paper);
  --on-ink-70: rgba(246, 243, 238, 0.72);
  --on-ink-50: rgba(246, 243, 238, 0.52);
  --on-ink-35: rgba(246, 243, 238, 0.35);
  --on-ink-20: rgba(246, 243, 238, 0.14);
  --on-ink-10: rgba(246, 243, 238, 0.07);

  /* text-on-paper opacities */
  --on-paper-100: var(--ink);
  --on-paper-70: rgba(10, 10, 10, 0.68);
  --on-paper-50: rgba(10, 10, 10, 0.48);
  --on-paper-20: rgba(10, 10, 10, 0.14);

  /* ---- type ---- */
  --serif: 'Cormorant Garamond', 'Iowan Old Style', serif;
  --sans: 'Outfit', -apple-system, 'Segoe UI', sans-serif;

  --text-2xs: 0.6875rem;   /* 11px — micro labels */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md: 1.125rem;     /* 18px */
  --text-lg: 1.375rem;     /* 22px */

  --display-xs: clamp(1.9rem, 1.5rem + 1.8vw, 2.6rem);
  --display-sm: clamp(2.4rem, 1.7rem + 3vw, 3.6rem);
  --display-md: clamp(2.8rem, 1.6rem + 4.6vw, 5rem);
  --display-lg: clamp(3rem, 1vw + 6vh + 2.4rem, 6.5rem);

  /* ---- space (4px base) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --gutter: clamp(1.5rem, 1.1rem + 1.6vw, 3rem);
  --section-y: clamp(5rem, 3rem + 6vw, 8.5rem);
  --container: 1240px;
  --container-narrow: 860px;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 0.2s;
  --dur-2: 0.4s;
  --dur-3: 0.7s;

  /* ---- misc ---- */
  --hairline: 1px solid var(--on-ink-10);
  --nav-h: 84px;
}

@media (max-width: 768px) {
  :root { --nav-h: 72px; }
}