/* ============================================================================
   Chassidish Choir — Design tokens
   Palette is taken from the client's own two logo files. Do not invent colors:
   add a token here and use the token.
   ========================================================================== */

:root {
  /* ---- Plum / aubergine (from the seal's scrollwork + border) ------------- */
  --plum-950: #150C1B; /* page background, deepest */
  --plum-900: #1C1122;
  --plum-800: #2A1B33; /* the plan's base plum */
  --plum-700: #3A2545;
  --plum-600: #4B3159;

  /* ---- Gold (from the horizontal wordmark's gradient) --------------------- */
  --gold-700: #8C6520;
  --gold-600: #A6772A;
  --gold-500: #B8892F; /* line work, borders */
  --gold-400: #CFA84F;
  --gold-300: #E3C877; /* headings, links */
  --gold-200: #EBD79A;
  --gold-100: #F2E3B3; /* highlights */

  /* ---- Blush copper (the seal's stone face) — the "loud" accent ----------- */
  --blush-200: #F0D2C4;
  --blush-300: #E8B9A6;
  --blush-400: #DA9689;
  --blush-500: #C9736A;

  /* ---- Neutrals ---------------------------------------------------------- */
  --cream: #F5E6C0; /* body copy on dark */
  --paper: #FBF6EA; /* the one light section */
  --paper-2: #F2E9D6;
  --ink: #241528; /* body copy on light */

  /* ---- Semantic ---------------------------------------------------------- */
  --bg: var(--plum-950);
  --bg-raised: var(--plum-900);
  --fg: var(--cream);
  --fg-dim: rgba(245, 230, 192, 0.62);
  --fg-faint: rgba(245, 230, 192, 0.38);
  --accent: var(--gold-300);
  --rule: rgba(184, 137, 47, 0.28);
  --rule-soft: rgba(245, 230, 192, 0.12);

  /* ---- Gradients (the wordmark's own gold sweep) -------------------------- */
  --grad-gold: linear-gradient(
    100deg,
    var(--gold-600) 0%,
    var(--gold-300) 22%,
    var(--gold-100) 42%,
    var(--gold-400) 62%,
    var(--gold-200) 82%,
    var(--gold-600) 100%
  );
  --grad-stone: linear-gradient(
    170deg,
    var(--paper) 0%,
    var(--blush-200) 45%,
    var(--blush-400) 78%,
    var(--blush-500) 100%
  );
  --grad-veil: linear-gradient(
    180deg,
    rgba(21, 12, 27, 0.05) 0%,
    rgba(21, 12, 27, 0.55) 55%,
    rgba(21, 12, 27, 0.96) 100%
  );

  /* ---- Type -------------------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Garamond, "Times New Roman", serif;
  --font-ui: "Jost", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;

  /* Fluid scale — clamp(min, preferred, max). 320px → 1600px viewport. */
  --t-display: clamp(3.25rem, 1.6rem + 8.2vw, 9rem);
  --t-h1: clamp(2.5rem, 1.4rem + 5.4vw, 6rem);
  --t-h2: clamp(2rem, 1.25rem + 3.6vw, 4.25rem);
  --t-h3: clamp(1.4rem, 1.1rem + 1.5vw, 2.25rem);
  --t-lead: clamp(1.05rem, 0.98rem + 0.5vw, 1.375rem);
  --t-body: clamp(0.98rem, 0.94rem + 0.24vw, 1.09rem);
  --t-small: 0.875rem;
  --t-label: 0.72rem; /* the wide-tracked gold eyebrow */

  --track-label: 0.34em;
  --track-nav: 0.12em;

  /* ---- Space ------------------------------------------------------------- */
  --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;
  --section-y: clamp(4.5rem, 3rem + 7vw, 9.5rem);

  /* ---- Layout ------------------------------------------------------------ */
  --page-max: 1280px;
  --page-pad: clamp(1.15rem, 0.6rem + 2.6vw, 3.5rem);
  --measure: 62ch;
  --header-h: 76px;

  /* ---- Shape ------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* ---- Depth ------------------------------------------------------------- */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.28);
  --shadow: 0 18px 46px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 34px 90px rgba(0, 0, 0, 0.55);
  --glow-gold: 0 0 0 1px rgba(184, 137, 47, 0.4), 0 14px 44px rgba(184, 137, 47, 0.18);

  /* ---- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 620ms;

  --z-bg: 0;
  --z-content: 10;
  --z-header: 100;
  --z-menu: 110;
  --z-modal: 200;
}

/* The one light surface. Put this on a <section> to flip the whole thing. */
.on-paper {
  --bg: var(--paper);
  --bg-raised: var(--paper-2);
  --fg: var(--ink);
  --fg-dim: rgba(36, 21, 40, 0.66);
  --fg-faint: rgba(36, 21, 40, 0.4);
  --accent: var(--gold-700);
  --rule: rgba(140, 101, 32, 0.28);
  --rule-soft: rgba(36, 21, 40, 0.1);
  background: var(--bg);
  color: var(--fg);
}