/* ==========================================================================
   Moon Love Events — design tokens
   Civic Night identity. Values come from the Website Build Specifications
   and the logo kit README. Do not introduce colors outside this file.
   ========================================================================== */

:root {
  /* --- Brand palette (approved) ------------------------------------------ */
  --ml-navy:        #17233B;  /* Midnight Navy — dark bg, headings, anchor   */
  --ml-navy-deep:   #111A2D;  /* Deep Navy — footer, darkest supporting bg   */
  --ml-gold:        #D5A23F;  /* Civic Gold — accent, buttons, crescent      */
  --ml-parchment:   #F7F1E8;  /* Parchment — warm section background         */
  --ml-white:       #FFFDF9;  /* Warm White — main content background        */

  /* --- Accessible text derivatives ---------------------------------------
     Civic Gold on Warm White is only 2.30:1 — it fails WCAG AA for both
     normal (4.5:1) and large (3:1) text. The spec asks for gold eyebrow
     labels, so gold text is split into two tokens:

       --ml-gold        on Midnight Navy  = 6.80:1  AA / AAA-large  OK
       --ml-gold-ink    on Warm White     = 5.43:1  AA              OK

     Use --ml-gold for text ONLY on navy grounds. Use --ml-gold-ink for
     eyebrow text on white/parchment. Full-strength gold is still correct
     for rules, buttons, borders and the crescent on any ground.
     FLAG FOR MICHAEL: --ml-gold-ink is a derived UI token, not a brand color.
     ---------------------------------------------------------------------- */
  --ml-gold-ink:    #8A6218;

  /* --- Semantic surfaces -------------------------------------------------- */
  --surface:            var(--ml-white);
  --surface-warm:       var(--ml-parchment);
  --surface-dark:       var(--ml-navy);
  --surface-darkest:    var(--ml-navy-deep);

  --text:               var(--ml-navy);
  --text-muted:         #4B566E;      /* navy @ ~72% on white = 8.1:1        */
  --text-on-dark:       var(--ml-white);
  --text-on-dark-muted: #C8D0DE;      /* on navy = 10.9:1                    */

  --rule:               #E4DCCE;      /* hairline on light                   */
  --rule-dark:          #2C3550;      /* hairline on navy                    */
  --rule-on-dark:       rgba(255,253,249,.16);

  /* --- Typography ---------------------------------------------------------
     Spec: "a refined neutral sans serif that is available in Squarespace."
     Preferred stack: Helvetica Neue, Helvetica, Arial, sans-serif.
     ---------------------------------------------------------------------- */
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Fluid scale — clamp(min, preferred, max). Tuned so headlines never
     drop a single trailing word onto its own line at common widths. */
  --fs-display: clamp(2.5rem, 1.35rem + 4.6vw, 4.75rem);   /*  40 → 76 */
  --fs-h2:      clamp(1.95rem, 1.25rem + 2.4vw, 3rem);     /*  31 → 48 */
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);    /*  20 → 24 */
  --fs-lead:    clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);/*  17 → 21 */
  --fs-body:    1.0625rem;                                 /*  17      */
  --fs-small:   0.9375rem;                                 /*  15      */
  --fs-eyebrow: 0.8125rem;                                 /*  13      */

  --lh-tight:   1.06;
  --lh-snug:    1.2;
  --lh-body:    1.65;

  --tracking-eyebrow: .16em;
  --tracking-display: -.02em;

  /* --- Layout ------------------------------------------------------------- */
  --content-max: 1180px;   /* spec: ~1180px centered */
  --gutter:      24px;     /* spec: 16px minimum on mobile */
  --gutter-mobile: 16px;

  --section-y:   clamp(4.5rem, 3rem + 6vw, 8rem);
  --card-gap:    clamp(1.25rem, .8rem + 1.4vw, 2rem);

  --radius:      2px;      /* wood-block/ink sensibility: near-square */
  --tap-min:     44px;     /* spec: 44px minimum tap targets */

  --ease: cubic-bezier(.22,.61,.36,1);
}