/* ============================================================================
   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);
  /* ⚠️ R8-15c — WAS 0.38, WHICH IS 3.10:1 ON THE PLUM AND FAILS. One token put
     EIGHT pieces of text under the readable floor on all 10 pages — including
     the footer copyright and the Privacy LINK, which is the one that matters:
     a link nobody can read is a link nobody clicks. Also the form placeholders,
     the media counts and the scroll cue. 0.55 measures 5.14:1 and is still
     plainly faint against the 14.7:1 body cream. */
  --fg-faint: rgba(245, 230, 192, 0.55);
  --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;

  /* ⭐ ROUND 4 — the site now carries TYPED Yiddish, which it never did before.
     Everything Hebrew on the page until now was ARTWORK: the wordmark, the round
     seal, and the ארגינעל. היימיש. פראפעסיאנאל. line, all cut out of the
     client's own logo files. The site was settled as English-only twice. Items
     6, 7, 11, 13 and 16 reverse that, so for the first time a real Hebrew face
     is needed — and neither Cormorant Garamond nor Jost carries a single Hebrew
     glyph, so without this both would silently fall back to whatever the OS
     happens to have. On Windows that is Arial; on iOS it is Arial Hebrew. Two
     different sites.

     Frank Ruhl Libre is the choice for one reason above the others: it is a
     high-contrast Hebrew SERIF, and the site's display face is a high-contrast
     Latin serif. Set side by side they read as one typographic voice rather
     than as a translation bolted on. It also ships 300 through 900, so the same
     family covers the hero line, the About body and the section headings
     without a second Hebrew family joining the page.

     The fallbacks are named rather than left to `serif` on purpose: "David
     Libre" is the closest metric relative, then the two system Hebrew serifs. */
  --font-yi: "Frank Ruhl Libre", "David Libre", "Times New Roman", "Arial Hebrew", "Narkisim", 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);
  /* ⭐ ROUND 5 — R5-6. "This one also is too small… everything got smaller?"
     He flagged the Explore box copy and the booking contact row. Measured, both
     were 12.48px on a page whose body text is 17.44px — 28% smaller than
     everything around them, and the SAME size in two unrelated components,
     which is what made it a pattern rather than two bugs.

     --t-small was a FLAT 0.875rem: 14px on a phone and still 14px on a 2258px
     monitor, while every other size on the site is fluid. That is the whole
     reason small text looked fine on his phone and wrong on his desktop.
     It is fluid now, and it is the size for anything that is a real sentence.

     --t-mini is new: for DATA that is legitimately secondary — a duration, a
     page count, a tag. Small, but no longer 12px.

     --t-label stays the smallest on purpose. The wide-tracked uppercase
     eyebrows (—— ABOUT, —— EXPLORE) are signposts, not reading matter; making
     them body-sized would turn a quiet device into a shout. Nudged only. */
  --t-small: clamp(0.9rem, 0.86rem + 0.22vw, 1.02rem); /* 14.4 → 16.3px */
  --t-mini: clamp(0.8rem, 0.77rem + 0.17vw, 0.9rem); /* 12.8 → 14.4px */
  --t-label: clamp(0.72rem, 0.7rem + 0.09vw, 0.78rem); /* 11.5 → 12.5px */

  --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 ------------------------------------------------------------ */
  /* ⭐ ROUND 5 — R5-4. "This one somehow got smaller from the original that is
     online." Measured live-vs-local at 1440 / 1920 / 2258: a video card is
     581px / 570px / 570px on BOTH sites, identical to the pixel. Nothing
     shrank. What he was seeing is THIS number.

     A flat 1280px cap means the page stops growing while the monitor keeps
     going. One video card is 40% of a 1440 screen and 25% of a 2258 one, with
     ~490px of dead space down each side. On his wide display that reads,
     correctly, as "everything got small". The fault is older than round 4 —
     it has been here since round 1 and only shows on a big screen.

     Below 1460 this is untouched, so phone and tablet — already signed off —
     do not move at all. Above it the container grows with the viewport to a
     ceiling, because a grid so wide the eye cannot take in a row is its own
     kind of wrong. See the media query directly below. */
  --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;
}

/* ⭐ ROUND 5 — R5-4. The container grows past 1280 on a big monitor.
   1460 is the gate on purpose: it is above every tablet and above the 1440
   laptop class, so nothing that has already been reviewed and signed off can
   move. min(90vw, …) keeps a margin either side at every width — a grid that
   runs edge to edge on a 2258px screen looks unfinished, not generous. */
@media (min-width: 1460px) {
  :root { --page-max: min(90vw, 1600px); }
}

/* 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);
}