/* =========================================================
   WELSHFEST 2026 — colors & type
   L'Amicale des Amateurs de Welsh · Lille
   =========================================================
   The palette is sampled directly from the "melting cheddar"
   illustrations of Lille monuments: deep cheddar orange drips
   down cobalt skies, grounded in cream and dark ink outlines.
   ========================================================= */

/* ---------- Google Fonts (Flagged substitutions — see README) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Fraunces:ital,opsz,wght@0,9..144,600;0,9..144,800;1,9..144,600&family=Familjen+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  /* =========================================================
     CHEDDAR — the hero color family. Drips, melts, glows.
     ========================================================= */
  --cheddar-50:  #FFF4D6;  /* crumb / highlight */
  --cheddar-100: #FFE39A;  /* soft drip */
  --cheddar-200: #FFCF5C;  /* butter */
  --cheddar-300: #F9B233;  /* classic cheddar */
  --cheddar-400: #F08A1A;  /* deep melt */
  --cheddar-500: #D96B0C;  /* caramelised crust */
  --cheddar-600: #A84A05;  /* burnt edge */
  --cheddar-700: #6B2F03;  /* cast-iron skillet */

  /* =========================================================
     CIEL — the Northern-France sky. Cobalt, not navy.
     ========================================================= */
  --ciel-50:  #E6F1FA;
  --ciel-100: #B7D8EE;
  --ciel-200: #7FB9DC;  /* muted sky */
  --ciel-300: #3E97CE;  /* clear day */
  --ciel-400: #1E7CC0;  /* flag blue */
  --ciel-500: #10609F;  /* deep cobalt */
  --ciel-600: #0B4677;

  /* =========================================================
     CRÈME — cream / bone / dough. The background of the brand.
     ========================================================= */
  --creme-50:  #FFFBF0;  /* page bg */
  --creme-100: #FBEFCE;  /* soft card */
  --creme-200: #F4E0A7;  /* vintage paper */
  --creme-300: #E7CB7F;

  /* =========================================================
     ENCRE — ink outlines. Never pure black.
     ========================================================= */
  --encre-900: #1A1208;  /* near-black, warm */
  --encre-800: #2B1E10;
  --encre-700: #3D2C1A;  /* body text */
  --encre-500: #6B5038;  /* secondary text */
  --encre-300: #A88B69;  /* muted / disabled */

  /* =========================================================
     ACCENTS — local colour: brick, Flemish flag, grass
     ========================================================= */
  --brique: #C9552E;       /* Lille brick / Flemish red */
  --brique-deep: #8F361C;
  --lion-flandre: #F4C22A; /* lion of Flanders yellow */
  --herbe:  #6E8A2A;       /* cliff / topiary green */
  --herbe-deep: #3E5116;

  /* =========================================================
     SEMANTIC TOKENS — what you actually reference in UI.
     ========================================================= */
  --bg:            var(--creme-50);
  --bg-elevated:   #FFFFFF;
  --bg-sunken:     var(--creme-100);
  --bg-inverse:    var(--encre-900);

  --surface:       var(--creme-50);
  --surface-card:  #FFFFFF;
  --surface-hot:   var(--cheddar-100); /* warm tint for banners/CTAs-lite */
  --surface-cool:  var(--ciel-100);

  --fg1:           var(--encre-900);   /* headings */
  --fg2:           var(--encre-700);   /* body */
  --fg3:           var(--encre-500);   /* secondary */
  --fg-muted:      var(--encre-300);
  --fg-on-cheddar: var(--encre-900);   /* dark ink on cheese */
  --fg-on-ciel:    #FFFFFF;            /* white on cobalt */
  --fg-inverse:    var(--creme-50);

  --brand:         var(--cheddar-400); /* hero brand color */
  --brand-hover:   var(--cheddar-500);
  --brand-press:   var(--cheddar-600);

  --border:        var(--encre-900);   /* hard ink outline — signature look */
  --border-soft:   var(--encre-700);
  --border-faint:  rgba(26, 18, 8, 0.15);

  --link:          var(--ciel-500);
  --link-hover:    var(--cheddar-500);

  --success: #4A7C1E;
  --warning: var(--cheddar-500);
  --danger:  var(--brique);

  /* =========================================================
     TYPOGRAPHY
     ========================================================= */
  --font-display: 'Bagel Fat One', 'Bungee', system-ui, sans-serif;
  --font-serif:   'Fraunces', 'Cooper', Georgia, serif;
  --font-body:    'Familjen Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Type scale — generous, festival-poster feel */
  --t-hero:   clamp(64px, 9vw, 160px); /* @kind font */
  --t-h1:     clamp(48px, 5.5vw, 88px); /* @kind font */
  --t-h2:     clamp(36px, 3.8vw, 56px); /* @kind font */
  --t-h3:     28px; /* @kind font */
  --t-h4:     22px; /* @kind font */
  --t-lead:   20px; /* @kind font */
  --t-body:   17px; /* @kind font */
  --t-small:  14px; /* @kind font */
  --t-micro:  12px; /* @kind font */

  --lh-tight:  0.92; /* @kind other */
  --lh-snug:   1.1; /* @kind other */
  --lh-normal: 1.45; /* @kind other */
  --lh-loose:  1.6; /* @kind other */

  --tracking-display: -0.02em; /* @kind other */
  --tracking-caps:    0.08em; /* @kind other */

  /* =========================================================
     SPACING — 4px base
     ========================================================= */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* =========================================================
     RADII — gentle, rarely pill-shaped. Drips do the softening.
     ========================================================= */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   24px;
  --radius-xl:   36px;
  --radius-full: 9999px;

  /* =========================================================
     BORDERS — hard ink is the brand. 2–3px is normal; 4px for hero.
     ========================================================= */
  --stroke-hair: 1px;
  --stroke-1:    2px;
  --stroke-2:    3px;
  --stroke-hero: 4px;

  /* =========================================================
     SHADOWS — offset "sticker" shadow, not soft drop.
     ========================================================= */
  --shadow-sticker:   4px 4px 0 0 var(--encre-900);
  --shadow-sticker-lg: 6px 6px 0 0 var(--encre-900);
  --shadow-sticker-cheddar: 4px 4px 0 0 var(--cheddar-500);
  --shadow-soft:      0 4px 24px -8px rgba(26, 18, 8, 0.25);
  --shadow-inset:     inset 0 -4px 0 0 rgba(26, 18, 8, 0.12);

  /* =========================================================
     MOTION
     ========================================================= */
  --ease-drip:   cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ /* overshoot, melty bounce */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur-normal:  240ms; /* @kind other */
  --dur-slow:    420ms; /* @kind other */
}

/* =========================================================
   SEMANTIC ELEMENT STYLES
   ========================================================= */
html, body {
  background: var(--bg);
  color: var(--fg2);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
  color: var(--fg1);
  font-family: var(--font-display);
  font-weight: 400; /* display faces are single-weight */
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-4);
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-family: var(--font-serif); font-weight: 800; letter-spacing: -0.01em; }
h4 { font-size: var(--t-h4); font-family: var(--font-serif); font-weight: 800; letter-spacing: -0.01em; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-small);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--cheddar-500);
}

.lead { font-size: var(--t-lead); line-height: var(--lh-loose); color: var(--fg2); }

p { margin: 0 0 var(--space-4); }

a { color: var(--link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }

code, pre, kbd { font-family: var(--font-mono); font-size: 0.92em; }
code { background: var(--creme-100); padding: 2px 6px; border-radius: var(--radius-xs); border: 1px solid var(--border-faint); }

hr {
  border: 0;
  border-top: var(--stroke-1) solid var(--encre-900);
  margin: var(--space-6) 0;
}

::selection { background: var(--cheddar-200); color: var(--encre-900); }