/* =========================================================================
   Compagnie Médocaine des Grands Crus — Design Tokens
   Source of truth for colors + typography across slides, UI kits, and assets.
   ========================================================================= */

/* ---------- Web fonts (TTF, self-hosted from /fonts) --------------------- */

@font-face {
  font-family: "Forum";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/Forum-Regular.ttf") format("truetype");
}

@font-face { font-family: "Lexend Exa"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("./fonts/LexendExa-Light.ttf") format("truetype"); }
@font-face { font-family: "Lexend Exa"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("./fonts/LexendExa-Regular.ttf") format("truetype"); }
@font-face { font-family: "Lexend Exa"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("./fonts/LexendExa-Medium.ttf") format("truetype"); }
@font-face { font-family: "Lexend Exa"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("./fonts/LexendExa-SemiBold.ttf") format("truetype"); }

@font-face { font-family: "Lexend"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("./fonts/Lexend-Light.ttf") format("truetype"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("./fonts/Lexend-Regular.ttf") format("truetype"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("./fonts/Lexend-Medium.ttf") format("truetype"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("./fonts/Lexend-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("./fonts/Lexend-Bold.ttf") format("truetype"); }

@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("./fonts/Nunito-Regular.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("./fonts/Nunito-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("./fonts/Nunito-Bold.ttf") format("truetype"); }


/* ---------- Tokens ------------------------------------------------------- */

:root {
  /* ===== BRAND COLORS (from Couleurs.pdf, Sept 2023 charter) ===== */
  --cmgc-gris-bleu:    #363F46;  /* Pantone 4139 — primary dark */
  --cmgc-beige:        #DFDBD2;  /* Cool Gray 2  — neutral background */
  --cmgc-cognac:       #9B601A;  /* Pantone 464  — accent / logo */

  /* ===== EXTENDED PALETTE (derived for UI surfaces) ===== */
  --cmgc-gris-bleu-90: #4B555E;
  --cmgc-gris-bleu-70: #6E767D;
  --cmgc-gris-bleu-30: #B8BCBF;
  --cmgc-gris-bleu-10: #E6E7E8;

  --cmgc-cognac-90:    #B07526;
  --cmgc-cognac-70:    #C39361;
  --cmgc-cognac-30:    #E5D3B6;
  --cmgc-cognac-10:    #F5EDDF;

  --cmgc-beige-deep:   #C9C4B6;  /* darker variant of beige for hover */
  --cmgc-beige-soft:   #EDEAE3;  /* lighter — page background */
  --cmgc-paper:        #F7F5EF;  /* warm off-white */
  --cmgc-ivory:        #FBF9F4;
  --cmgc-white:        #FFFFFF;
  --cmgc-ink:          #1F262B;  /* text on light surfaces, deeper than gris-bleu */

  /* ===== DIGITAL / MAP APP PALETTE (from map/css/style.css) =====
     This is a separate, deeper variant used by the interactive map product. */
  --cmgc-navy:         #0A1734;     /* deep navy chrome */
  --cmgc-navy-soft:    #171B32;     /* loading screens, page bg */
  --cmgc-navy-glass:   #171B3287;   /* translucent capsules with blur */
  --cmgc-orange:       #F99C2A;     /* hamburger accent, active states */

  /* ===== GRAPE / CÉPAGE COLORS (from style.css) =====
     Used to identify grape varieties on maps and tasting notes. */
  --grape-cabernet-sauvignon: #BF303C;
  --grape-merlot:             #73091D;
  --grape-cabernet-franc:     #E958C5;
  --grape-petit-verdot:       #2E19B7;
  --grape-malbec:             #05033E;
  --grape-cot:                #6100C2;
  --grape-carmenere:          #3C0A44;
  --grape-chardonnay:         #B6B683;
  --grape-sauvignon-blanc:    #A6C000;
  --grape-sauvignon-gris:     #005127;
  --grape-semillon:           #533A00;
  --grape-muscadelle:         #00A35D;
  --grape-gros-manseng:       #F1F100;
  --grape-colombard:          #7DA108;
  --grape-jacheres:           #20D2E9;

  /* ===== SEMANTIC SURFACES ===== */
  --bg-page:        var(--cmgc-paper);
  --bg-elevated:    var(--cmgc-white);
  --bg-muted:       var(--cmgc-beige-soft);
  --bg-inverse:     var(--cmgc-gris-bleu);

  --fg-1:           var(--cmgc-gris-bleu);    /* primary text */
  --fg-2:           var(--cmgc-gris-bleu-90); /* secondary text */
  --fg-3:           var(--cmgc-gris-bleu-70); /* tertiary / captions */
  --fg-on-dark:     var(--cmgc-beige);
  --fg-on-dark-mute:#B6B7AE;
  --fg-accent:      var(--cmgc-cognac);

  --border-subtle:  rgba(54, 63, 70, 0.12);
  --border-default: rgba(54, 63, 70, 0.22);
  --border-strong:  var(--cmgc-gris-bleu);
  --border-cognac:  var(--cmgc-cognac);

  /* ===== STATUS ===== */
  --status-success: #5C7A4A;
  --status-warning: #C68A2E;
  --status-danger:  #A8392F;
  --status-info:    var(--cmgc-gris-bleu);

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

  /* ===== RADII ===== */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ===== ELEVATION ===== */
  --shadow-1: 0 1px 2px rgba(54, 63, 70, 0.06);
  --shadow-2: 0 2px 8px rgba(54, 63, 70, 0.08);
  --shadow-3: 0 6px 20px rgba(54, 63, 70, 0.10);
  --shadow-4: 0 16px 40px rgba(54, 63, 70, 0.16);
  --shadow-glass: 0 4px 30px rgba(0, 0, 0, 0.10); /* matches map app capsules */

  /* ===== TYPOGRAPHY ===== */
  --font-display: "Forum", "Cormorant Garamond", "Trajan Pro", serif;
  --font-ui:      "Lexend Exa", "Lexend", system-ui, sans-serif;
  --font-body:    "Nunito", "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  --tracking-display: 0.18em;   /* Forum is ALWAYS spaced when used as display */
  --tracking-ui:      0.04em;
  --tracking-tight:   -0.01em;

  /* type scale (1.25 minor third) */
  --fs-display-1: clamp(48px, 6vw, 88px);
  --fs-display-2: clamp(36px, 4.5vw, 64px);
  --fs-h1: 40px;
  --fs-h2: 28px;
  --fs-h3: 20px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 12px;
  --fs-overline: 11px;

  /* ===== MOTION ===== */
  --ease-medocaine: cubic-bezier(0.19, 1, 0.22, 1); /* same as map app */
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 800ms;
}


/* ---------- Semantic element styles ------------------------------------- */
/* Apply these via .cmgc-typography wrapper, or use the vars directly. */

.cmgc-typography {
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.cmgc-typography .display-1,
.cmgc-display-1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display-1);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--fg-1);
}

.cmgc-typography .display-2,
.cmgc-display-2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display-2);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  line-height: 1.1;
}

.cmgc-typography h1, .cmgc-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0 0 var(--sp-5);
}

.cmgc-typography h2, .cmgc-h2 {
  font-family: var(--font-ui);
  font-size: var(--fs-h2);
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.25;
  margin: 0 0 var(--sp-4);
}

.cmgc-typography h3, .cmgc-h3 {
  font-family: var(--font-ui);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
  margin: 0 0 var(--sp-3);
}

.cmgc-typography p, .cmgc-p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}

.cmgc-typography .lead, .cmgc-lead {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg-1);
  font-weight: 400;
}

.cmgc-typography .overline, .cmgc-overline {
  font-family: var(--font-ui);
  font-size: var(--fs-overline);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--fg-accent);
}

.cmgc-typography .caption, .cmgc-caption {
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
  color: var(--fg-3);
}

.cmgc-typography blockquote, .cmgc-quote {
  font-family: var(--font-display);
  font-size: 28px;
  font-style: italic;
  line-height: 1.35;
  color: var(--fg-1);
  border-left: 2px solid var(--cmgc-cognac);
  padding-left: var(--sp-5);
  margin: var(--sp-6) 0;
  letter-spacing: 0.01em;
}

/* The brand signature itself — always set in Forum, spaced */
.cmgc-signature {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--cmgc-cognac);
}