/* ==========================================================================
   EPA × Aurum — colors & typography
   Extracted from Charte Graphique v1.0 · Avril 2026
   ========================================================================== */

/* ---------- Web fonts (Google substitutes for Didot / Freight Text Pro) --- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ============ COLORS — FOUNDATION ==================================== */
  /* Charcoals / dark backgrounds */
  --epa-charcoal-deep:     #0F0A06;   /* deepest background             */
  --epa-charcoal:          #1A120B;   /* primary dark background         */
  --epa-charcoal-raised:   #241A11;   /* elevated surfaces (cards)       */
  --epa-charcoal-warm:     #2A1E14;   /* gradient partner                */

  /* Paper / light backgrounds */
  --epa-paper-ivory:       #F5EFE0;   /* editorial light bg              */
  --epa-paper-cream:       #FAFAF7;   /* neutral light                   */

  /* Gold scale — primary brand metal */
  --epa-bronze:            #866741;   /* shadows / depth                 */
  --epa-gold-dark:         #AA8757;   /* hairline rules / frames         */
  --epa-gold:              #C0A36F;   /* PRIMARY ACCENT (Or signature)   */
  --epa-gold-light:        #D9C089;   /* numbering / soft accents        */
  --epa-champagne:         #F2DEA4;   /* highlights / reflections        */

  /* Borders */
  --epa-border-subtle:     #3A2E22;   /* divider on dark                 */
  --epa-border-strong:     #AA8757;

  /* Text */
  --epa-text-primary:      #F5EFE0;   /* ivory on dark                   */
  --epa-text-secondary:    #9A8C75;   /* bronze muted                    */
  --epa-text-inverse:      #1A120B;   /* on gold fills                   */
  --epa-text-on-light:     #1A120B;

  /* Feedback (Aurum) */
  --epa-success:           #7FA67A;
  --epa-warning:           #D9A24F;
  --epa-error:             #B04A3E;

  /* Semantic aliases (Aurum tokens) */
  --color-bg-primary:      var(--epa-charcoal-deep);
  --color-bg-secondary:    var(--epa-charcoal);
  --color-bg-elevated:     var(--epa-charcoal-raised);
  --color-border-subtle:   var(--epa-border-subtle);
  --color-border-strong:   var(--epa-border-strong);
  --color-accent-primary:  var(--epa-gold);
  --color-accent-hover:    var(--epa-gold-light);
  --color-accent-pressed:  var(--epa-bronze);
  --color-text-primary:    var(--epa-text-primary);
  --color-text-secondary:  var(--epa-text-secondary);
  --color-text-inverse:    var(--epa-text-inverse);

  /* ============ TYPOGRAPHY ============================================= */
  /* Families — with Google-font substitutes flagged in README */
  --font-display:    'Playfair Display', 'Didot', 'Bodoni 72', serif;
  --font-editorial:  'EB Garamond', 'Freight Text Pro', 'Tiempos Text', Georgia, serif;
  --font-ui:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script:     'Allura', 'Pinyon Script', cursive;
  --font-mono:       'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Aurum text scale (functional / UI) */
  --text-display-xl: 700 48px/56px var(--font-display);
  --text-display-l:  600 36px/44px var(--font-display);
  --text-display-m:  500 28px/36px var(--font-display);
  --text-heading-l:  600 20px/28px var(--font-ui);
  --text-heading-m:  600 16px/24px var(--font-ui);
  --text-body-l:     400 16px/24px var(--font-ui);
  --text-body-m:     400 14px/20px var(--font-ui);
  --text-caption:    500 12px/16px var(--font-ui);
  --text-editorial-body: 400 16px/26px var(--font-editorial);

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

  /* ============ RADII ================================================== */
  --radius-sm:   4px;   /* inputs / chips   */
  --radius-md:   8px;   /* cards / buttons  */
  --radius-lg:   16px;  /* modals / sheets  */
  --radius-full: 9999px;

  /* ============ SHADOWS ================================================ */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.6);
  --shadow-gold-halo: 0 0 0 2px rgba(192,163,111,0.20);
}

/* ============ SEMANTIC CLASSES ============================================= */

/* --- EPA EDITORIAL hierarchy (print / deck / story register) ------------- */
.epa-cover-title  { font: 400 88px/1.02 var(--font-display); letter-spacing: 0.02em; color: var(--epa-text-primary); }
.epa-h1           { font: 400 44px/1.1  var(--font-display); letter-spacing: 0.02em; color: var(--epa-text-primary); }
.epa-h2           { font: 600 20px/1.3  var(--font-editorial); letter-spacing: 0.12em; text-transform: uppercase; color: var(--epa-text-primary); }
.epa-eyebrow      { font: 400 13px/1.3  var(--font-editorial); letter-spacing: 0.3em;  text-transform: uppercase; color: var(--epa-gold); }
.epa-subtitle     { font: italic 400 24px/1.35 var(--font-editorial); color: var(--epa-text-primary); }
.epa-body         { font: 400 16px/1.6 var(--font-editorial); color: var(--epa-text-primary); }
.epa-numeral      { font: 300 104px/1 var(--font-editorial); color: var(--epa-champagne); }
.epa-caption      { font: italic 400 12px/1.4 var(--font-editorial); color: var(--epa-gold-light); }
.epa-signature    { font: 400 22px/1 var(--font-script); color: var(--epa-text-primary); }

/* --- AURUM UI hierarchy -------------------------------------------------- */
.aurum-display-xl { font: var(--text-display-xl); letter-spacing: -0.02em; color: var(--color-text-primary); }
.aurum-display-l  { font: var(--text-display-l);  letter-spacing: -0.01em; color: var(--color-text-primary); }
.aurum-display-m  { font: var(--text-display-m);  color: var(--color-text-primary); }
.aurum-heading-l  { font: var(--text-heading-l);  color: var(--color-text-primary); }
.aurum-heading-m  { font: var(--text-heading-m);  color: var(--color-text-primary); }
.aurum-body-l     { font: var(--text-body-l);     color: var(--color-text-primary); }
.aurum-body-m     { font: var(--text-body-m);     color: var(--color-text-primary); }
.aurum-caption    { font: var(--text-caption);    letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-secondary); }

/* --- utility backgrounds ------------------------------------------------- */
.bg-charcoal      { background: var(--epa-charcoal); color: var(--epa-text-primary); }
.bg-charcoal-deep { background: var(--epa-charcoal-deep); color: var(--epa-text-primary); }
.bg-ivory         { background: var(--epa-paper-ivory); color: var(--epa-text-on-light); }
.bg-gradient-dark { background: radial-gradient(ellipse at 50% 0%, #2A1E14 0%, #1A120B 45%, #0F0A06 100%); color: var(--epa-text-primary); }