/* ==========================================================================
   IMPRA × OFFICEVIBE — COUCHE DE MARQUE
   Remplacement direct de baseline/css/tokens.css. Rien d'autre ne change :
   impra/*.html chargent les MÊMES base.css / components.css / patterns.css
   que la baseline. Le système structurel n'est pas dupliqué.

   Contrat (DA IMPRA §20) :
     décision de design system (grille, spacing, rayon, ombre, responsive,
     interaction)  → Officevibe gagne, valeur copiée telle quelle ;
     décision de marque (couleur, typo, logo, signature, donnée)
                    → IMPRA gagne, valeur remappée ci-dessous.

   Les noms de tokens sont ceux d'Officevibe, jamais inventés.
   Table de correspondance complète : ../../IMPRA_DESIGN_SYSTEM_OFFICEVIBE.md
   ========================================================================== */

:root {
  color-scheme: light;

  /* ═══════════════════════════════════════════════════════════════════════
     1. TOKENS DE MARQUE IMPRA  (DA §21 — valeurs canoniques, non dérivées)
     ═══════════════════════════════════════════════════════════════════════ */
  --impra-blue:       #1F74E7;
  --impra-navy:       #0F172E;
  --impra-bg:         #F5F7FB;
  --impra-surface:    #FFFFFF;
  --impra-border:     #DCE3F0;
  --impra-muted:      #475467;
  --impra-blue-soft:  #EAF2FF;

  /* États métier uniquement — jamais décoratifs (DA §4) */
  --impra-success:    #1E9E61;
  --impra-warning:    #C77D12;
  --impra-danger:     #DE3D4C;

  --impra-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Dérivés — IMPRA ne définit que deux tons de texte et une seule bordure,
     là où Officevibe en utilise trois et deux. Dérivés par mélange plutôt
     que par invention d'un hexadécimal arbitraire. */
  --impra-muted-soft:   color-mix(in srgb, var(--impra-muted) 62%, var(--impra-surface));  /* placeholders, métadonnées */
  --impra-border-strong: color-mix(in srgb, var(--impra-border) 72%, var(--impra-muted));  /* bordures d'input */
  --impra-navy-soft:    color-mix(in srgb, var(--impra-navy) 8%, var(--impra-surface));    /* micro-surface neutre */

  /* ═══════════════════════════════════════════════════════════════════════
     2. REMAPPAGE DES TOKENS OFFICEVIBE
     Noms conservés à l'identique. Seules les valeurs changent.
     ═══════════════════════════════════════════════════════════════════════ */

  /* Ink Navy — titres display, cartes sombres, footer. Rôle identique. */
  --color-ink-navy:        var(--impra-navy);
  /* Electric Cobalt — boutons pleins, lien actif, icône d'accent unique.
     Rôle identique : l'accent chromatique unique de la page. */
  --color-electric-cobalt: var(--impra-blue);
  /* Charcoal — corps et titres. IMPRA n'a qu'un ton de texte dominant :
     charcoal et ink-navy convergent sur le navy. Voir §DELTA-2 du mapping. */
  --color-charcoal:        var(--impra-navy);
  /* Warm Canvas → Background. Le canevas crème chaud devient froid.
     C'est le delta d'ADN le plus important. Voir §DELTA-1. */
  --color-warm-canvas:     var(--impra-bg);
  --color-paper-white:     var(--impra-surface);
  /* Cream Border → Border. Officevibe interdisait le gris froid ;
     la règle de marque IMPRA l'impose. Voir §DELTA-1. */
  --color-cream-border:    var(--impra-border);
  --color-graphite:        var(--impra-muted);
  --color-stone:           var(--impra-muted-soft);
  --color-smoke:           var(--impra-border-strong);
  /* Lavender Mist → Blue soft. Correspondance de rôle exacte :
     fonds de badge et micro-surfaces de marque. */
  --color-lavender-mist:   var(--impra-blue-soft);

  /* Coral — chez Officevibe : tuile de métrique en alerte (sémantique)
     ET flèches manuscrites (décoratif). IMPRA interdit l'usage décoratif
     d'une couleur d'état : le sémantique prend warning, le décoratif prend
     une teinte neutre dérivée. Voir --connector plus bas. */
  --color-coral:           var(--impra-warning);
  --color-connector:       color-mix(in srgb, var(--impra-border) 55%, var(--impra-muted)); /* flèches, connecteurs */

  /* États d'interaction — mêmes noms, dérivés des couleurs IMPRA.
     Le hover primaire assombrit, le hover Ink éclaircit : comportement
     identique à Officevibe. */
  --color-primary-hover: color-mix(in srgb, var(--impra-blue) 84%, #000);
  --color-ink-hover:     color-mix(in srgb, var(--impra-navy) 86%, var(--impra-blue));
  /* La pilule d'annotation produit était violette chez Officevibe.
     IMPRA n'a pas de violet (DA §18) et le bleu est réservé à l'action :
     l'annotation passe en navy, sobre et non cliquable en apparence. */
  --color-accent-violet: var(--impra-navy);

  /* Pastilles de sentiment — remappées sur les états métier IMPRA.
     Elles ne servent qu'à porter du sens, jamais à décorer. */
  --state-critical:      var(--impra-danger);   --state-critical-text: var(--impra-danger);
  --state-caution:       var(--impra-warning);  --state-caution-text:  var(--impra-warning);
  --state-positive:      var(--impra-success);  --state-positive-text: var(--impra-success);

  /* Couleurs mesurées sans rôle attribué */
  --color-warm-gray:  var(--impra-muted);
  --color-mid-gray:   var(--impra-muted-soft);
  --color-near-black: var(--impra-navy);

  /* Teintes de témoignage — Officevibe en utilisait quatre polychromes
     (lavande, cyan, ambre, rose). IMPRA interdit le décoratif multicolore :
     la famille devient tonale, dérivée du bleu et du navy. Le pattern
     (4 cartes teintées distinctes) est conservé. Voir §DELTA-3. */
  --tint-lavender: var(--impra-blue-soft);
  --tint-cyan:     color-mix(in srgb, var(--impra-blue-soft) 55%, var(--impra-surface));
  --tint-amber:    color-mix(in srgb, var(--impra-blue) 11%, var(--impra-surface));
  --tint-pink:     var(--impra-navy-soft);

  /* ═══════════════════════════════════════════════════════════════════════
     3. SURFACES & ÉLÉVATION
     Décalages, flous et opacités STRICTEMENT identiques à Officevibe.
     Seule la teinte de l'ombre suit le navy de marque.
     ═══════════════════════════════════════════════════════════════════════ */
  --surface-0: var(--color-warm-canvas);
  --surface-1: var(--color-paper-white);
  --surface-2: var(--color-ink-navy);

  --shadow-card:   0 4px 24px rgba(15, 23, 46, 0.08);  /* géométrie Officevibe, teinte navy IMPRA */
  --shadow-widget: 0 8px 32px rgba(15, 23, 46, 0.12);
  --shadow-button: none;                                /* inchangé — la couleur EST l'élévation */

  /* ═══════════════════════════════════════════════════════════════════════
     4. TYPOGRAPHIE
     Famille IMPRA. Tailles, interlignes et tracking INCHANGÉS (DA §6).
     Officevibe empilait trois familles ; IMPRA n'en a qu'une. Les trois
     tokens sont conservés pour que components.css ne bouge pas.
     ═══════════════════════════════════════════════════════════════════════ */
  --font-display:   var(--impra-font);  /* l'accent italique — voir §DELTA-4 */
  --font-geometric: var(--impra-font);  /* titres */
  --font-sans:      var(--impra-font);  /* corps, boutons, nav, champs */
  --font-features: normal;              /* ss01/ss04 étaient propres à Officevibe */
  --font-numeric: tabular-nums;         /* DA §6 — données métier comparables */

  /* Échelle — identique à Officevibe : tierce mineure, base 16, ratio 1.2 */
  --text-caption:     12px;  --lh-caption:     1.4;  --ls-caption:     0;
  --text-body-sm:     14px;  --lh-body-sm:     1.6;  --ls-body-sm:     0;
  --text-body:        16px;  --lh-body:        1.6;  --ls-body:        0;
  --text-subheading:  20px;  --lh-subheading:  1.4;  --ls-subheading:  0;
  --text-heading-sm:  24px;  --lh-heading-sm:  1.4;  --ls-heading-sm:  -0.48px;
  --text-heading:     32px;  --lh-heading:     1.4;  --ls-heading:     -0.64px;
  --text-heading-lg:  40px;  --lh-heading-lg:  1.2;  --ls-heading-lg:  -0.8px;
  --text-display:     48px;  --lh-display:     1.1;  --ls-display:     -2.4px;
  --text-display-lg:  64px;  --lh-display-lg:  1.0;  --ls-display-lg:  -3.2px;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;
  --weight-semibold: 600;   /* Plus Jakarta Sans expose 600 ; Inter ne l'était pas */

  --ls-eyebrow: 0.12em;

  /* ═══════════════════════════════════════════════════════════════════════
     5. STRUCTURE — COPIE VERBATIM D'OFFICEVIBE
     Aucune de ces valeurs n'est une décision de marque. Ne pas modifier.
     ═══════════════════════════════════════════════════════════════════════ */
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-20:  20px;
  --space-24:  24px;
  --space-32:  32px;
  --space-40:  40px;
  --space-48:  48px;
  --space-56:  56px;
  --space-64:  64px;
  --space-80:  80px;
  --space-128: 128px;

  --page-max-width: 1200px;
  --section-gap:    80px;
  --card-padding:   32px;
  --element-gap:    24px;
  --page-gutter:    40px;

  --radius-cards:   16px;
  --radius-badges:  16px;
  --radius-inputs:  16px;
  --radius-images:  24px;
  --radius-buttons: 100px;

  --border-hairline: 1px solid var(--color-cream-border);
  --border-input:    1px solid var(--color-smoke);
  --border-accent:   1.5px solid var(--color-electric-cobalt);

  /* Dégradés — géométrie Officevibe conservée, arrêts remappés.
     Le dégradé décoratif violet→corail devient navy→bleu : IMPRA interdit
     le dégradé multicolore décoratif (DA §18). Voir §DELTA-5. */
  --gradient-chart: linear-gradient(180deg, rgba(31,116,231,0.55) 0%, rgba(31,116,231,0.06) 100%);
  --gradient-blob:  linear-gradient(100deg, #0F172E 0%, #1B4FA8 55%, #1F74E7 100%);
  --gradient-cta:   linear-gradient(90deg, #0F172E 0%, #17458F 48%, #1F74E7 78%);

  /* Motion — identique. Officevibe ne documentait rien ; IMPRA n'ajoute rien. */
  --motion-fast: 120ms;
  --motion-base: 160ms;
  --motion-slow: 240ms;
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);

  --bp-lg: 1120px;
  --bp-md: 900px;
  --bp-sm: 620px;
}