/* ============================================================
   EKRIN · tokens de marque · source unique
   packages/marque/tokens.css · v1.0 · 13 octobre 2026
   Règles : DESIGN.md (même dossier). Toute valeur de couleur,
   de police, d'espacement ou de rayon d'un support EKRIN vient
   d'ici. Une valeur absente se demande, elle ne s'improvise pas.

   Trois supports, une base :
     (défaut)               site web, mode clair
     .mode-dark             site web, mode sombre (héros, scènes 3D)
     [data-surface="app"]   logiciel : éKlair, IMPAKT, back-office
     [data-surface="print"] et @media print : rapports PDF, papeterie
   ============================================================ */

/* Polices de marque, livrées avec le paquet (SIL Open Font Licence). */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Anton-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Anton-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('fonts/BodoniModa-variable.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400 900; font-display: swap; src: url('fonts/BodoniModa-italic-variable.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('fonts/Inter-variable.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('fonts/JetBrainsMono-variable.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/JetBrainsMono-400-italic.woff2') format('woff2'); }

:root {
  /* ---------- Palette (valeurs fixes, les rôles changent selon le support) ---------- */
  --ek-ink:       #0F2A1F;  /* Sous-bois */
  --ek-forest:    #1F4D3A;  /* Forêt. question ouverte QO-1 (DESIGN.md) : proche du vert CBRE #003F2D */
  --ek-laiton:    #A8874F;  /* Laiton, l'unique accent */
  --ek-laiton-h:  #B8975E;  /* Laiton, survol */
  --ek-laiton-40: #DCCFB3;  /* Laiton à 40 %, fonds de jauge seulement */
  --ek-lichen:    #8FA394;  /* Lichen : filets, traits de plan, icônes muettes. Jamais du texte */
  --ek-mist:      #DCE3D5;  /* Brume : cartes, têtes de tableau */
  --ek-chalk:     #F3F4EE;  /* Craie */
  --ek-white:     #FFFFFF;
  --ek-panel:     #163B2D;  /* panneau sur Sous-bois */
  --ek-copper:    #B26A3F;  /* Cuivre : personnes sur les plans, accent rare. Jamais un bouton, jamais du texte courant */
  --ek-wood:      #C9A26A;  /* Bois : cloisons et lames sur les plans */
  --ek-alert:     #A8432F;  /* Alerte : risque, erreur, DPE G */
  --ek-paper:     #12332A;  /* papier de plan (blueprint) */

  /* Classes DPE, échelle EKRIN (texte indiqué dans DESIGN.md § Couleur) */
  --ek-dpe-a: #1F4D3A; --ek-dpe-b: #4F7A5A; --ek-dpe-c: #8FA394; --ek-dpe-d: #C4C08E;
  --ek-dpe-e: #C9995A; --ek-dpe-f: #B26A3F; --ek-dpe-g: #A8432F;

  /* ---------- Rôles, mode clair (défaut de tous les supports) ---------- */
  --bg:          var(--ek-white);
  --surface:     var(--ek-chalk);
  --surface-2:   var(--ek-mist);
  --heading:     var(--ek-ink);
  --fg-1:        var(--ek-ink);
  --fg-2:        var(--ek-forest);
  --rule:        rgba(31, 77, 58, 0.16);
  --rule-strong: rgba(31, 77, 58, 0.32);
  --cta:         var(--ek-forest);
  --cta-hover:   var(--ek-ink);
  --cta-ink:     var(--ek-white);
  --gain:        var(--ek-forest);
  --figure:      var(--ek-laiton);  /* grand chiffre éditorial du site, 24 px et plus, sur blanc ou Sous-bois seulement */
  --risk:        var(--ek-alert);
  --focus:       var(--ek-forest);
  --accent-line: var(--ek-laiton);  /* filets, icônes, séparateur des piliers */

  /* ---------- Familles ---------- */
  --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --font-dek:     'Bodoni Moda', 'Bodoni 72', Didot, Georgia, serif;  /* remplace Playfair Display (v1.0) */
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Échelle typographique, site web ---------- */
  --t-display: clamp(51px, 6.5vw, 88px);
  --t-h1: 51px;  --t-h2: 34px;  --t-h3: 24px;
  --t-dek: 22px; --t-body: 16px; --t-body-s: 14px; --t-table: 14px; --t-meta: 11px;
  --t-figure: 38px;
  --lh-display: 1.22; --lh-h1: 1.2; --lh-h2: 1.2;   /* v1.0 : 1.12 laissait le circonflexe toucher la ligne du dessus */ --lh-dek: 1.34; --lh-body: 1.65;
  --track-display: -0.01em; --track-heading: 0; --track-meta: 0.14em;
  --measure: 64ch;

  /* ---------- Espace, forme, élévation, mouvement ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --r-block: 2px;   /* cartouches, tampons */
  --r:       6px;   /* boutons, cartes, champs */
  --r-pill:  999px; /* puces, jauges */
  --control-h: 40px;   /* 44 px sur écran tactile, voir plus bas */
  --e1: 0 1px 3px rgba(15, 42, 31, 0.16);
  --e2: 0 8px 20px -6px rgba(15, 42, 31, 0.26);
  --e3: 0 22px 44px -12px rgba(15, 42, 31, 0.36);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --d-ui: 160ms;
  --d-scene: 600ms;
}

/* Cible tactile : 44 px au doigt, 40 px à la souris (R-17). */
@media (pointer: coarse) { :root:not([data-surface]) { --control-h: 44px; } }

/* ---------- Site web, mode sombre : héros et scènes du bâtiment ---------- */
.mode-dark, [data-theme="dark"] {
  --bg:          var(--ek-ink);
  --surface:     var(--ek-panel);
  --surface-2:   var(--ek-forest);
  --heading:     var(--ek-chalk);
  --fg-1:        var(--ek-chalk);
  --fg-2:        var(--ek-chalk);
  --rule:        rgba(243, 244, 238, 0.14);
  --rule-strong: rgba(243, 244, 238, 0.28);
  --cta:         var(--ek-laiton);
  --cta-hover:   var(--ek-laiton-h);
  --cta-ink:     var(--ek-ink);
  --gain:        var(--ek-laiton);
  --figure:      var(--ek-laiton);
  --focus:       var(--ek-laiton);
}

/* ---------- Logiciel : éKlair, IMPAKT, back-office. Mode clair seulement ---------- */
[data-surface="app"] {
  --t-display: 28px;            /* titre de page, Anton */
  --t-h1: 28px; --t-h2: 18px; --t-h3: 15px;   /* H2 et H3 en Inter 600, pas en Anton */
  --t-dek: 16px; --t-body: 14px; --t-body-s: 13px; --t-table: 13px; --t-meta: 11px;
  --t-figure: 28px;
  --figure: var(--ek-forest);   /* dans le logiciel, un chiffre est une donnée : Forêt */
  --lh-body: 1.5; --lh-h2: 1.3;
  --measure: 80ch;
  --control-h: 36px;
  --e2: 0 4px 12px -4px rgba(15, 42, 31, 0.18);
  --e3: 0 12px 28px -10px rgba(15, 42, 31, 0.26);
}

/* ---------- Imprimé : rapports PDF A4, papier à en-tête, cartes ---------- */
[data-surface="print"] {
  --t-display: 28pt;
  --t-h1: 22pt; --t-h2: 14pt; --t-h3: 10.5pt;  /* H3 en Inter 600 */
  --t-dek: 12pt; --t-body: 9.5pt; --t-body-s: 8.5pt; --t-table: 8pt; --t-meta: 6.5pt;
  --t-figure: 20pt;
  --figure: var(--ek-forest);
  --lh-body: 1.45; --lh-h1: 1.2; --lh-h2: 1.2; --lh-dek: 1.3;
  --measure: 95ch;
  --page-margin: 18mm;
  --page-margin-bottom: 22mm;   /* place du pied de page légal */
  --e1: none; --e2: none; --e3: none;   /* aucune ombre sur papier */
  --bg: var(--ek-white);
}
@media print {
  :root {
    --t-display: 28pt;
    --t-h1: 22pt; --t-h2: 14pt; --t-h3: 10.5pt;
    --t-dek: 12pt; --t-body: 9.5pt; --t-body-s: 8.5pt; --t-table: 8pt; --t-meta: 6.5pt;
    --t-figure: 20pt;
  --figure: var(--ek-forest);
    --lh-body: 1.45; --lh-h1: 1.2; --lh-h2: 1.2; --lh-dek: 1.3;
    --measure: 95ch;
    --page-margin: 18mm;
    --page-margin-bottom: 22mm;
    --e1: none; --e2: none; --e3: none;
    --bg: var(--ek-white);
  }
  html, body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}