/* ============================================================
   MANSFELD — Grande Brasserie-Distillerie de Luxembourg
   Colors & Typography tokens
   ============================================================ */

/* --- Fonts ---------------------------------------------------
   Digital typography (client decision — supersedes brand book):
     • Playfair Display — titres et accent texts (display serif)
     • Libertinus Sans  — body, sous-titres, UI (humanist sans-serif)
   Marcellus is kept on reserve as a subhead option if needed.
   All free Google Fonts — no licensing needed.
------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&family=Libertinus+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Marcellus&display=swap');

:root {
  /* --- Color palette (brand book p.31) ---------------------- */
  /* Red Luxembourgeois — Pantone 627 C */
  --mf-red:        #BE2232;       /* audace, passion, énergie */
  --mf-red-deep:   #8F1824;

  /* Gold — Kurz Luxor 425 (hot-foil) */
  --mf-gold:       #B08A3E;       /* souveraineté, excellence */
  --mf-gold-light: #D4B46A;
  --mf-gold-deep:  #8A6A2A;

  /* Silver — API Silver Satin 10165 (hot-foil) */
  --mf-silver:     #B7B7B7;       /* fraîcheur, innovation */
  --mf-silver-light:#D9D9D9;
  --mf-silver-deep:#8E8E8E;

  /* Copper — API Oasis Copper 5032 */
  --mf-copper:     #9A5B3A;       /* artisanat, savoir-faire */
  --mf-copper-light:#C68A65;

  /* Green — Pantone 2035 C */
  --mf-green:      #235B3E;       /* renouveau, sérénité */
  --mf-green-deep: #143623;
  --mf-green-light:#4E7A5E;

  /* --- Neutral ink & paper --------------------------------- */
  --mf-ink:        #1A1613;       /* near-black, warm */
  --mf-ink-2:      #2E2822;
  --mf-ink-3:      #5A5149;
  --mf-paper:      #F5F1EA;       /* warm off-white, parchment */
  --mf-paper-2:    #ECE5D7;
  --mf-paper-3:    #D9CFB7;
  --mf-white:      #FFFFFF;
  --mf-black:      #0A0806;

  /* --- Semantic (light on paper) --------------------------- */
  --bg:            var(--mf-paper);
  --bg-elev:       var(--mf-white);
  --bg-deep:       var(--mf-ink);
  --fg1:           var(--mf-ink);
  --fg2:           var(--mf-ink-3);
  --fg-muted:      #8C8378;
  --accent:        var(--mf-red);
  --accent-foil:   var(--mf-gold);
  --rule:          rgba(26,22,19,0.14);
  --rule-soft:     rgba(26,22,19,0.07);

  /* --- Typography --------------------------------------------
     Display : Playfair Display — titles + accent words
     Body    : Libertinus Sans  — body, subheads, UI, captions
     Reserve : Marcellus        — alternate subhead if body
                                  italic feels too plain
  ---------------------------------------------------------- */
  --font-display: "Playfair Display", "Didot", "Bodoni MT", Georgia, serif;
  --font-subhead: "Libertinus Sans", "Marcellus", "Garamond", serif;
  --font-body:    "Libertinus Sans", "Inter", system-ui, sans-serif;
  --font-reserve: "Marcellus", "Cormorant Garamond", serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* Type scale — display serif leans tight, body leans airy */
  --fs-eyebrow:  13px;    --tt-eyebrow:  0.28em;   /* spaced caps */
  --fs-caption:  15px;
  --fs-body:     19px;    --lh-body:     1.55;
  --fs-body-lg:  21px;
  --fs-h4:       22px;    --lh-tight:    1.15;
  --fs-h3:       28px;
  --fs-h2:       40px;
  --fs-h1:       60px;
  --fs-display:  88px;    --ls-display:  -0.01em;

  /* --- Spacing (8-point rhythm, with a 4 half-step) --------- */
  --s-1:  4px;   --s-2:  8px;   --s-3: 12px;   --s-4: 16px;
  --s-5: 24px;   --s-6: 32px;   --s-7: 48px;   --s-8: 64px;
  --s-9: 96px;   --s-10: 128px;

  /* --- Radii — restrained; brand is heraldic ---------------- */
  --r-0: 0px;    --r-1: 2px;    --r-2: 4px;    --r-3: 8px;
  --r-pill: 999px;
  --r-shield: 50% 50% 8px 8px / 60% 60% 8px 8px;  /* écu */

  /* --- Shadows — soft, warm, low contrast ------------------- */
  --shadow-1: 0 1px 2px rgba(26,22,19,0.06), 0 1px 1px rgba(26,22,19,0.04);
  --shadow-2: 0 6px 16px rgba(26,22,19,0.08), 0 1px 2px rgba(26,22,19,0.06);
  --shadow-3: 0 18px 40px rgba(26,22,19,0.12), 0 2px 4px rgba(26,22,19,0.06);
  --shadow-foil: 0 0 0 1px var(--mf-gold), 0 8px 24px rgba(176,138,62,0.25);
  --shadow-inset: inset 0 0 0 1px rgba(176,138,62,0.35);

  /* --- Motion ---------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:  cubic-bezier(0.4, 0.0, 0.6, 1);
  --t-fast: 160ms;
  --t-med:  260ms;
  --t-slow: 480ms;

  /* --- Foil gradients (gold + silver hot-foil effect) ------- */
  --foil-gold: linear-gradient(
    135deg,
    #8A6A2A 0%, #D4B46A 22%, #F3E0A6 42%,
    #B08A3E 58%, #8A6A2A 78%, #D4B46A 100%
  );
  --foil-silver: linear-gradient(
    135deg,
    #8E8E8E 0%, #D9D9D9 22%, #FFFFFF 42%,
    #B7B7B7 58%, #8E8E8E 78%, #D9D9D9 100%
  );
}

/* === Dark surface (brand's "sur fond foncé" applications) === */
.mf-dark {
  --bg:       var(--mf-ink);
  --bg-elev:  var(--mf-ink-2);
  --bg-deep:  var(--mf-black);
  --fg1:      var(--mf-paper);
  --fg2:      var(--mf-paper-3);
  --fg-muted: #A69C8E;
  --rule:     rgba(245,241,234,0.14);
  --rule-soft:rgba(245,241,234,0.07);
  background: var(--bg);
  color: var(--fg1);
}

/* === Base elements ========================================= */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg1);
  background: var(--bg);
  font-weight: 400;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .mf-display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  color: var(--fg1);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

.mf-display {
  font-size: var(--fs-display);
  letter-spacing: var(--ls-display);
  font-weight: 600;
}

.mf-subhead {
  font-family: var(--font-subhead);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-h4);
  color: var(--fg2);
}
/* Use this when a Libertinus Sans italic subhead feels too neutral —
   Marcellus carries more Roman-capital character. */
.mf-subhead--reserve {
  font-family: var(--font-reserve);
  font-style: normal;
  letter-spacing: 0.02em;
}

.mf-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tt-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent-foil);
}

p, .mf-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg1); text-wrap: pretty; }
.mf-body-lg { font-size: var(--fs-body-lg); line-height: 1.5; }
.mf-caption { font-size: var(--fs-caption); color: var(--fg2); }

/* Decorative horizontal divider with heraldic dot */
.mf-rule {
  display: flex; align-items: center; gap: 10px;
  color: var(--accent-foil);
}
.mf-rule::before, .mf-rule::after {
  content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.4;
}
.mf-rule::after { }

/* Foil text (gold/silver shimmer) */
.mf-foil-gold {
  background: var(--foil-gold);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.mf-foil-silver {
  background: var(--foil-silver);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--accent-foil);
  outline-offset: 2px;
}