/* ==========================================================================
   BeeToGreen — Design Tokens
   Source de vérité : Figma "Beetogreen—Brand_Library_10juillet2026"
   42 tokens couleur (Brand 5 · Expressive 8×3 · Greyscale 11 · Base 2)
   Typographie : Parkinsans (display) + Instrument Sans (body/UI)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@500&display=swap');
@import './components/fig-tokens.css';
@import './components/fig-assets.css';

/* Fontes de marque auto-hébergées (uploads client, variable fonts) */
@font-face {
  font-family: 'Parkinsans';
  src: url('./fonts/Parkinsans-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('./fonts/InstrumentSans-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('./fonts/InstrumentSans-Italic-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ----- Brand Greens (5) ----- */
  --brand-lime: #E6FF55;
  --brand-dark-green: #0C1E18;
  --brand-green-grass: #005236;
  --brand-green-light: #008558;
  --brand-green-ice: #D4F5E0;

  /* ----- Expressive (8 familles × light / dark / bg) ----- */
  --expressive-coquelicot-light: #FFC4CE;
  --expressive-coquelicot-dark: #86071C;
  --expressive-coquelicot-bg: #FFEBEE;
  --expressive-amethyste-light: #D3BFF3;
  --expressive-amethyste-dark: #4B1A9A;
  --expressive-amethyste-bg: #F3EEFC;
  --expressive-mango-light: #F7C9BA;
  --expressive-mango-dark: #E54C1E;
  --expressive-mango-bg: #FDF1ED;
  --expressive-cacao-light: #FCEE98;
  --expressive-cacao-dark: #372411;
  --expressive-cacao-bg: #FEFCEB;
  --expressive-marine-light: #8CCAF7;
  --expressive-marine-dark: #033968;
  --expressive-marine-bg: #ECF6FE;
  --expressive-pivoine-light: #FFD0E0;
  --expressive-pivoine-dark: #B01E5C;
  --expressive-pivoine-bg: #FFF0F5;
  --expressive-cobalt-light: #C2CCFF;
  --expressive-cobalt-dark: #3457FF;
  --expressive-cobalt-bg: #EFF1FF;
  --expressive-ardoise-light: #C8D1DA;
  --expressive-ardoise-dark: #2C3E50;
  --expressive-ardoise-bg: #F0F3F6;

  /* ----- Greyscale (Zinc, 11) ----- */
  --greyscale-50: #FAFAFA;
  --greyscale-100: #F4F4F5;
  --greyscale-200: #E4E4E7;
  --greyscale-300: #D4D4D8;
  --greyscale-400: #A1A1AA;
  --greyscale-500: #71717A;
  --greyscale-600: #52525B;
  --greyscale-700: #3F3F46;
  --greyscale-800: #27272A;
  --greyscale-900: #18181B;
  --greyscale-950: #09090B;

  /* ----- Base (2) ----- */
  --base-white: #FFFFFF;
  --base-black: #000000;

  /* ----- Surfaces récurrentes (relevées dans la Brand Library / Brandbook) ----- */
  --surface-paper: #F5F0E6; /* fond beige des pages Foundations & Brandbook */

  /* ----- Familles typographiques ----- */
  --font-display: 'Parkinsans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-meta: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ==========================================================================
   Type scale — 18 styles / 7 groupes sémantiques (Brand Library, node 17:42)
   ========================================================================== */

.t-display-l { font-family: var(--font-display); font-weight: 800; font-size: 100px; line-height: 100%; letter-spacing: -0.03em; }
.t-display-m { font-family: var(--font-display); font-weight: 700; font-size: 72px; line-height: 100%; letter-spacing: -0.03em; }
.t-display-s { font-family: var(--font-display); font-weight: 700; font-size: 56px; line-height: 100%; letter-spacing: -0.025em; }
.t-headline-l { font-family: var(--font-display); font-weight: 700; font-size: 48px; line-height: 110%; letter-spacing: -0.02em; }
.t-headline-m { font-family: var(--font-display); font-weight: 700; font-size: 36px; line-height: 115%; letter-spacing: -0.02em; }
.t-headline-s { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 120%; letter-spacing: -0.015em; }
.t-title-l { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 130%; letter-spacing: -0.01em; }
.t-title-m { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 135%; letter-spacing: -0.005em; }
.t-body-l { font-family: var(--font-body); font-weight: 400; font-size: 18px; line-height: 150%; }
.t-body-m { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 150%; }
.t-body-s { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 150%; }
.t-label-m { font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 140%; }
.t-label-s { font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 140%; }
.t-eyebrow-m { font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 130%; letter-spacing: 0.12em; text-transform: uppercase; }
.t-eyebrow-s { font-family: var(--font-body); font-weight: 500; font-size: 11px; line-height: 130%; letter-spacing: 0.14em; text-transform: uppercase; }
.t-caption { font-family: var(--font-body); font-weight: 400; font-size: 12px; line-height: 145%; }
.t-code-m { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 150%; }
.t-code-s { font-family: var(--font-body); font-weight: 400; font-size: 12px; line-height: 150%; }

/* ----- Liens par défaut ----- */
a { color: var(--brand-green-light); }
a:hover { color: var(--brand-green-grass); }