/* ============================================================
   leone.mt — Design Tokens (CSS Custom Properties)
   Version 1.0 · May 2026
   Soċjetà Filarmonika Leone A.D. 1863, Victoria, Għawdex
   ============================================================
   Drop this file into a WordPress theme as assets/css/tokens.css
   and import it before any other stylesheet. All variables are
   namespaced --l-* (Leone) to avoid collisions with plugins.
   ============================================================ */

:root {
  /* ── BRAND COLOR ─────────────────────────────────────────────
     Leone blue is the single anchor. Gold is the heraldic accent
     used SPARINGLY (rules, crest, emphasis on dark surfaces).
     The rival club (La Stella) is red — Leone never uses red. */

  --l-blue-50:  #eaf0fa;   /* tints — backgrounds, hover states */
  --l-blue-100: #d4e0f3;
  --l-blue-200: #a8c0e6;
  --l-blue-300: #7ca0d8;
  --l-blue-400: #5078c8;
  --l-blue-500: #0e3f8c;   /* ★ PRIMARY — buttons, links, accents */
  --l-blue-600: #0b3478;
  --l-blue-700: #082961;
  --l-blue-800: #061d4a;   /* ★ EDITORIAL DARK — dark sections, opera panels */
  --l-blue-900: #04132f;
  --l-blue-950: #020a1d;   /* ink-blue, near-black */

  --l-gold:     #b8923a;
  --l-gold-lt:  #d4b059;
  --l-gold-dk:  #8a6b22;

  /* ── NEUTRALS ───────────────────────────────────────────────
     Warm-leaning paper tones, not pure greys. Anchors the site
     in print/archival territory rather than tech-startup white. */

  --l-paper:    #faf8f3;   /* primary page background */
  --l-paper-2:  #f0eee8;   /* panel / off background */
  --l-paper-3:  #e6e3da;
  --l-ink:      #0a0e1a;   /* primary text */
  --l-ink-2:    #3d4252;   /* secondary text */
  --l-ink-3:    #6b7185;   /* tertiary / captions */
  --l-rule:     rgba(10, 14, 26, 0.12);
  --l-rule-2:   rgba(10, 14, 26, 0.06);

  /* ── SEMANTIC (state) ───────────────────────────────────────
     Used in admin / forms only. Public surfaces avoid alarming
     reds — even error states lean amber so we don't read as
     the rival club's palette. */

  --l-success:  #2f7a4a;
  --l-warning:  #b87a1f;
  --l-error:    #a02a2a;   /* reserved — admin & forms only */
  --l-info:     var(--l-blue-500);

  /* ── TYPOGRAPHY ─────────────────────────────────────────────
     Three families, each with a clear job:
     · DISPLAY — Hanken Grotesk: headlines, nav, UI labels.
                   Modern grotesk with humanist warmth.
     · EDITORIAL — Source Serif 4 italic: big titles, opera names
                   (used sparingly for editorial flourish).
                   Clean modern italic — not ornate or swashed.
     · BODY — DM Sans: paragraphs, lists, captions, forms
     · LONG-FORM — Cormorant Garamond: ONLY for long-form article
                   bodies (history pages, news articles), not UI */

  --l-font-display: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --l-font-editorial: "Source Serif 4", "Times New Roman", Georgia, serif;
  --l-font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --l-font-longform: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --l-font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, monospace;

  /* All four families have verified support for Maltese diacritics:
     Ċ ċ (C with dot), Ġ ġ (G with dot),
     Ħ ħ (H with stroke — Maltese-specific),
     Ż ż (Z with dot). Test each weight before shipping. */

  /* Type scale — modular, 1.25 (major third). 16px base.
     Use semantic mixins below in practice. */

  --l-text-xs:   12px;
  --l-text-sm:   13px;
  --l-text-base: 15px;
  --l-text-md:   17px;
  --l-text-lg:   20px;
  --l-text-xl:   24px;
  --l-text-2xl:  32px;
  --l-text-3xl:  40px;
  --l-text-4xl:  56px;
  --l-text-5xl:  72px;
  --l-text-6xl:  96px;
  --l-text-7xl:  128px;

  --l-leading-tight:   1.0;
  --l-leading-snug:    1.15;
  --l-leading-normal:  1.5;
  --l-leading-relaxed: 1.65;
  --l-leading-loose:   1.75;

  --l-tracking-tighter: -0.04em;
  --l-tracking-tight:   -0.025em;
  --l-tracking-normal:  0;
  --l-tracking-wide:    0.05em;
  --l-tracking-wider:   0.14em;
  --l-tracking-widest:  0.22em;

  /* ── SPACING ─────────────────────────────────────────────────
     4px base unit. Use these — don't invent values. */

  --l-space-0:   0;
  --l-space-1:   4px;
  --l-space-2:   8px;
  --l-space-3:   12px;
  --l-space-4:   16px;
  --l-space-5:   20px;
  --l-space-6:   24px;
  --l-space-8:   32px;
  --l-space-10:  40px;
  --l-space-12:  48px;
  --l-space-16:  64px;
  --l-space-20:  80px;
  --l-space-24:  96px;
  --l-space-32:  128px;

  /* Page-level rhythm */
  --l-section-y:        88px;       /* vertical padding inside a <section> */
  --l-section-y-sm:     56px;       /* compact sections */
  --l-page-x:           48px;       /* horizontal gutter at desktop */
  --l-page-x-mobile:    20px;
  --l-content-max:      1440px;     /* outer page width */
  --l-text-max:         720px;      /* long-form measure */

  /* ── RADIUS ─────────────────────────────────────────────────
     Restrained. Cards 8–12px. Pills 999px. Sharp surfaces (hero
     images on dark sections) stay 0 — feels more architectural. */

  --l-radius-none: 0;
  --l-radius-sm:   4px;
  --l-radius:      8px;
  --l-radius-md:   10px;
  --l-radius-lg:   12px;
  --l-radius-pill: 999px;

  /* ── SHADOW ─────────────────────────────────────────────────
     Very soft. Used to lift cards on hover, dropdowns, modals.
     Never use heavy "drop shadow" blurs — feels dated. */

  --l-shadow-xs: 0 1px 2px rgba(10, 14, 26, 0.06);
  --l-shadow-sm: 0 1px 3px rgba(10, 14, 26, 0.08), 0 4px 12px rgba(10, 14, 26, 0.05);
  --l-shadow:    0 4px 16px rgba(10, 14, 26, 0.08), 0 1px 3px rgba(10, 14, 26, 0.04);
  --l-shadow-lg: 0 12px 40px rgba(10, 14, 26, 0.12);
  --l-shadow-xl: 0 24px 80px rgba(10, 14, 26, 0.18);

  /* ── MOTION ─────────────────────────────────────────────────
     Snappy and quiet. No bounce on UI. */

  --l-ease-out:  cubic-bezier(0.2, 0.7, 0.3, 1);
  --l-ease-in:   cubic-bezier(0.7, 0, 0.8, 0.3);
  --l-ease-io:   cubic-bezier(0.5, 0, 0.3, 1);
  --l-dur-fast:  120ms;
  --l-dur:       180ms;
  --l-dur-slow:  320ms;
  --l-dur-page:  480ms;

  /* ── Z-INDEX ─────────────────────────────────────────────── */
  --l-z-base:    1;
  --l-z-sticky:  10;
  --l-z-nav:     20;
  --l-z-overlay: 100;
  --l-z-modal:   200;
  --l-z-toast:   300;
}

/* ── DARK SURFACES ────────────────────────────────────────────
   The site uses dark sections for emphasis (opera season strips,
   hero, support CTA). Use this class to swap tokens correctly. */

.l-on-dark {
  --l-paper:   var(--l-blue-900);
  --l-paper-2: var(--l-blue-800);
  --l-ink:     var(--l-paper);
  --l-ink-2:   rgba(250, 248, 243, 0.78);
  --l-ink-3:   rgba(250, 248, 243, 0.55);
  --l-rule:    rgba(250, 248, 243, 0.18);
  --l-rule-2:  rgba(250, 248, 243, 0.08);
  color: var(--l-ink);
  background: var(--l-paper);
}

/* ── REDUCED MOTION ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --l-dur-fast: 0ms;
    --l-dur:      0ms;
    --l-dur-slow: 0ms;
    --l-dur-page: 0ms;
  }
}