/* ── AlaLindol brand fonts ──────────────────────────────────────────────────
   Heading (display)  = Lazy Dog        → use font-family:'Lazy Dog'
   Sub-heading        = League Spartan  → use font-family:'League Spartan'
   Content (body)     = Roboto          → use font-family:'Roboto'

   The codebase has ~130 existing `font-family` declarations using the legacy
   slot names 'Super Squad' (display), 'Baloo 2'/'Helvetica' (sub-heading) and
   'Nunito' (body). Rather than edit every file, the @font-face blocks below
   point those legacy names at the new font files, so every existing reference
   renders the new fonts with no per-file edits. New code should prefer the real
   names: 'Lazy Dog', 'League Spartan', 'Roboto'.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Real brand families (use these names in new code) ────────────────────── */

/* Heading (display) = Lazy Dog */
@font-face {
  font-family: 'Lazy Dog';
  src: url('/fonts/lazydog-heading.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}

/* Sub-heading = League Spartan (variable weight 100–900) */
@font-face {
  font-family: 'League Spartan';
  src: url('/fonts/LeagueSpartan-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

/* Content (body) = Roboto */
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Medium.ttf') format('truetype');
  font-weight: 500 600;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Bold.ttf') format('truetype');
  font-weight: 700 900;
  font-display: swap;
}

/* ── Legacy-name hijacks (keep existing references working, no per-file edits) ─ */

/* 'Super Squad' (old display/heading) → Lazy Dog */
@font-face {
  font-family: 'Super Squad';
  src: url('/fonts/lazydog-heading.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}

/* 'Baloo 2' (old sub-heading) → League Spartan */
@font-face {
  font-family: 'Baloo 2';
  src: url('/fonts/LeagueSpartan-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}
/* 'Helvetica' (used as the sub-heading face / display fallback) → League Spartan */
@font-face {
  font-family: 'Helvetica';
  src: url('/fonts/LeagueSpartan-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

/* 'Nunito' (old body) → Roboto */
@font-face {
  font-family: 'Nunito';
  src: url('/fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('/fonts/Roboto-Medium.ttf') format('truetype');
  font-weight: 500 600;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('/fonts/Roboto-Bold.ttf') format('truetype');
  font-weight: 700 900;
  font-display: swap;
}

/* Brand/big-title display helper */
.font-display { font-family: 'Lazy Dog', 'League Spartan', sans-serif !important; letter-spacing: .5px; }

/* ── 60-30-10 colour layers (named tokens) ──────────────────────────────────
   AlaLindol's palette follows the 60-30-10 rule. These tokens NAME the three
   layers so the proportion is explicit and documentable (see BRANDING_MANUAL).
   Additive only — existing hard-coded hex keeps working; adopt these in new
   code. `--main` / `--main-rgb` are injected per-page from the server theme, so
   `--accent` always tracks the admin-selected brand colour.

     60%  dominant  → light neutral surfaces  (--surface / --surface-2/-3)
     30%  secondary → dark ink + structural greys (--ink / --ink-soft / --border)
     10%  accent    → the coral brand + playful sub-accents (--accent / --sub-*)
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* 60% — dominant neutral surfaces */
  --surface:   #ffffff;
  --surface-2: #fafafa;
  --surface-3: #f4f4f4;
  /* 30% — secondary ink + structure */
  --ink:       #1a1a1a;
  --ink-soft:  #a7a7a7;
  --border:    #e3e3e3;
  /* 10% — accent (brand) + playful sub-accents */
  --accent:    var(--main, #db5853);
  --sub-green: #a5c701;
  --sub-gold:  #f9ae44;
  --sub-sky:   #c6eaef;
}