/* ───────────────────────────────────────────────────────────
   EVAD — Colors & Type
   "Écosystème Vivant Autonome & Décentralisé"
   Source of truth: imported from evadconnect/prototype@main
   Fonts: Fraunces (serif display), Epilogue (UI sans), DM Sans (splash/marketing)
   ─────────────────────────────────────────────────────────── */

/* Webfonts (CDN — substitute with self-hosted /fonts/ in production) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,600;0,700;0,900;1,300;1,600&family=DM+Sans:wght@300;400;500;600;700&display=swap');

/* Satoshi — inlined from Fontshare so the standalone export can resolve it */
@font-face {
  font-family: 'Satoshi';
  src: url('https://cdn.fontshare.com/wf/D7WD5OXZFWQ5T76HSPWAC7MNKAJXE2YG/LUGNSPO5YC34ABNB2O6K7AFDSOJZT56V/WNDVG7O66ENLOD43GS7FBUCC4KMT5OM2.woff2') format('woff2');
  font-weight: 300; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('https://cdn.fontshare.com/wf/TTX2Z3BF3P6Y5BQT3IV2VNOK6FL22KUT/7QYRJOI3JIMYHGY6CH7SOIFRQLZOLNJ6/KFIAZD4RUMEZIYV6FQ3T3GP5PDBDB6JY.woff2') format('woff2');
  font-weight: 400; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('https://cdn.fontshare.com/wf/P2LQKHE6KA6ZP4AAGN72KDWMHH6ZH3TA/ZC32TK2P7FPS5GFTL46EU6KQJA24ZYDB/7AHDUZ4A7LFLVFUIFSARGIWCRQJHISQP.woff2') format('woff2');
  font-weight: 500; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('https://cdn.fontshare.com/wf/LAFFD4SDUCDVQEXFPDC7C53EQ4ZELWQI/PXCT3G6LO6ICM5I3NTYENYPWJAECAWDD/GHM6WVH6MILNYOOCXHXB5GTSGNTMGXZR.woff2') format('woff2');
  font-weight: 700; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('https://cdn.fontshare.com/wf/NHPGVFYUXYXE33DZ75OIT4JFGHITX5PE/PSUTMASCDJTVPERDYJZPN23BVUFUCQIF/J64QX5IPOHK56I2KYUNBQ5M2XWZEYKYX.woff2') format('woff2');
  font-weight: 900; font-display: swap; font-style: normal;
}

:root {
  /* ─── BRAND PALETTE — Greens (the EVAD signature) ─── */
  --vert-fonce:    #018262;   /* forest — primary brand green */
  --vert-mid:      #4aab8f;   /* fern — friendly action green */
  --vert-clair:    #cfeee7;   /* mist — soft surface tint */
  --vert-pale:     #e8f7f3;   /* cream — page background */

  /* ─── EXTENDED GREENS (proto remap) ─── */
  --forest:   #018262;   /* primary */
  --moss:     #016b52;   /* primary hover / press */
  --fern:     #4aab8f;   /* secondary action */
  --sage:     #7ec9b0;   /* tertiary, on-dark text */
  --mist:     #cfeee7;   /* light tint */
  --cream:    #e8f7f3;   /* lightest tint, dark-bg ink-inverse */
  --paper:    #ffffff;
  --ink:      #0d2b22;   /* near-black, deep forest */

  /* ─── ACCENT COLORS (one per role + signal colors) ─── */
  --amber:        #c8732a;   /* Pilote role · price/value */
  --amber-soft:   #e8a55a;
  --sun:          #f0c84a;   /* score, pop */
  --terracotta:   #b84e35;   /* error / Pilote alt accent */
  --sky:          #3a6e8c;   /* Semeur / Bâtisseur cool accent */
  --lavender:     #7a6ea8;   /* premium, AI/Deva */

  /* ─── ROLE COLORS ─── */
  --role-pilote:        #b85e38;
  --role-pilote-bg:     rgba(184,94,56,0.12);
  --role-batisseur:     #c8732a;
  --role-batisseur-bg:  rgba(200,115,42,0.12);
  --role-semeur:        #3a6e8c;
  --role-semeur-bg:     rgba(58,110,140,0.14);

  /* ─── SEMANTIC FG / BG ─── */
  --fg-1:      var(--ink);                     /* primary text */
  --fg-2:      #3d6b5a;                        /* secondary text — deep moss */
  --fg-3:      rgba(13,43,34,0.55);            /* tertiary / hint */
  --fg-on-dark:   var(--cream);
  --fg-on-brand:  var(--cream);

  --bg-page:    var(--vert-pale);              /* primary app background */
  --bg-surface: var(--paper);                  /* card / panel surface */
  --bg-tint:    var(--mist);                   /* subtle filled tint */
  --bg-dark:    var(--ink);                    /* dark panels (onboarding) */

  --line-1:     rgba(1,130,98,0.14);           /* subtle dividers */
  --line-2:     rgba(46,102,66,0.10);          /* card borders */
  --line-3:     rgba(46,102,66,0.25);          /* hairline strong */

  /* ─── SIGNAL ─── */
  --success: var(--fern);
  --warning: var(--amber);
  --danger:  var(--terracotta);
  --info:    var(--sky);

  /* ─── RADII ─── */
  --r-sm:  6px;
  --r:     8px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  32px;
  --r-pill: 9999px;

  /* ─── ELEVATION ─── */
  --shadow-sm: 0 1px 2px rgba(14,26,18,0.06);
  --shadow:    0 2px 16px rgba(1,130,98,0.08);
  --shadow-md: 0 6px 20px rgba(74,140,92,0.10);
  --shadow-lg: 0 8px 32px rgba(14,26,18,0.12);
  --shadow-xl: 0 8px 40px rgba(1,130,98,0.20);

  /* ─── MOTION ─── */
  --ease:        cubic-bezier(.4,0,.2,1);
  --t-fast:      .15s var(--ease);
  --t:           .18s var(--ease);
  --t-slow:      .25s var(--ease);

  /* ─── TYPE FAMILIES ─── */
  --serif-display: 'Fraunces', 'Source Serif Pro', Georgia, serif;
  --sans-ui:       'Satoshi', 'Inter', system-ui, sans-serif;
  --sans-marketing:'Satoshi', 'DM Sans', system-ui, sans-serif;
  --mono:          ui-monospace, 'JetBrains Mono', Menlo, monospace;

  /* ─── TYPE TOKENS (matched to proto) ─── */
  --fs-xs:   0.62rem;   /* 9.9px  — eyebrow / micro */
  --fs-sm:   0.7rem;    /* 11.2px — meta / footer */
  --fs-base: 0.82rem;   /* 13.1px — body UI default */
  --fs-md:   0.95rem;   /* 15.2px — emphasized body / card title */
  --fs-lg:   1.1rem;    /* 17.6px — section title */
  --fs-xl:   1.6rem;    /* 25.6px — H2 */
  --fs-2xl:  2rem;      /* 32px   — H1 / hero */
  --fs-3xl:  2.6rem;    /* 41.6px — display */
}

/* ───────────────────────────────────────────────────────────
   SEMANTIC ELEMENTS — drop colors_and_type.css and you have type.
   ─────────────────────────────────────────────────────────── */
html { font-family: var(--sans-ui); color: var(--fg-1); }
body { background: var(--bg-page); color: var(--fg-1); font-family: var(--sans-ui); -webkit-font-smoothing: antialiased; }

h1, .h1 {
  font-family: var(--serif-display);
  font-size: var(--fs-2xl);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
h2, .h2 {
  font-family: var(--serif-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}
h3, .h3 {
  font-family: var(--serif-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.2;
  color: var(--fg-1);
}
h4, .h4 {
  font-family: var(--sans-ui);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg-1);
}

p, .body {
  font-family: var(--sans-ui);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--fg-2);
}

.eyebrow {
  font-family: var(--sans-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
  opacity: 0.7;
}

.meta {
  font-size: var(--fs-sm);
  color: var(--fg-2);
  opacity: 0.75;
}

.section-label {
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
}

.numeric, .stat-val {
  font-family: var(--serif-display);
  font-weight: 900;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
  letter-spacing: -0.01em;
}

code, .code {
  font-family: var(--mono);
  font-size: 0.78em;
  background: var(--bg-tint);
  padding: 0.1em 0.35em;
  border-radius: var(--r-sm);
}

a { color: var(--forest); text-decoration: none; transition: opacity var(--t); }
a:hover { opacity: 0.75; }