/* ===================================================================
   TOKENS.CSS — SOURCE UNIQUE DU DESIGN SYSTEM
   -------------------------------------------------------------------
   Toutes les pages du site chargent CE fichier en premier.
   AUCUNE page ne doit redefinir :root dans son propre <style>.
   Pour changer une couleur du site : la changer ICI, une seule fois.

   Charte : Teal Graphite (fonds) / Amber Signal (CTA) / Terracotta (accents)
   =================================================================== */

/* ===================================================================
   POLICES DE REPLI A METRIQUES AJUSTEES
   -------------------------------------------------------------------
   Les polices viennent de Google Fonts, donc du reseau. En attendant,
   le navigateur affiche une police systeme puis bascule : le texte
   change de largeur, se recompose, et tout ce qui suit se decale
   (CLS mesure a 0,129 sur le portfolio et 0,122 sur le blog).

   `size-adjust` etire la police de repli pour qu'elle occupe exactement
   la meme largeur que la police finale. La bascule devient invisible.
   Ratios mesures sur ce site : Space Grotesk = 106,40 % d'Arial,
   Inter = 105,81 %.
   =================================================================== */
@font-face {
    font-family: 'Space Grotesk Fallback';
    src: local('Arial'), local('Helvetica'), local('Liberation Sans');
    size-adjust: 106.40%;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial'), local('Helvetica'), local('Liberation Sans');
    size-adjust: 105.81%;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
}

:root {
    /* Colors — New Design System */
    --primary-color: #0F2E2B;       /* Teal Graphite — fonds sombres, headers */
    --primary-dark: #0A201E;        /* Teal Graphite plus profond */
    --primary-light: #163D39;       /* Teal Graphite plus clair */
    --accent-color: #E8A93B;        /* Amber Signal — CTA, highlights */
    --accent-dark: #D49A2F;         /* Amber Signal hover */
    --accent-light: #F0BD5C;        /* Amber Signal léger */
    --accent-secondary: #D1694A;    /* Terracotta — touches ponctuelles */
    /* L'Amber Signal sert de fond et d'accent, mais reste illisible comme
       TEXTE sur fond clair (1,88:1 sur l'ivoire). Cette variante assombrie
       garde la teinte et atteint 4,51:1. */
    --accent-ink: #976612;          /* Amber lisible sur fond clair */
    --primary-lighter: #1E4D48;     /* Teal Graphite surélevé — cartes, hover */
    --light-bg: #F7F4EE;            /* Ivoire chaud — fonds clairs */
    --light-bg-alt: #EDE9E0;        /* Ivoire légèrement plus foncé */
    --ink: #14181A;                  /* Encre — texte sur fond clair */
    --ink-muted: #5A5A52;           /* Texte secondaire sur fond clair */
    --ink-faint: #6F6F68;           /* Texte attenue sur fond clair — 4,58:1 */
    --text-primary: #F7F4EE;        /* Texte sur fond sombre */
    --text-secondary: #B8C0B8;      /* Texte secondaire sur fond sombre */
    --text-muted: #ABB5AB;          /* Texte atténué — 5,64:1 sur le fond le plus sombre */
    --text-faint: #99A299;          /* Texte très atténué — 4,53:1, au plancher AA */
    --white: #ffffff;
    --success: #3BB57B;             /* 4,61:1 sur fond sombre */
    --warning: #E8A93B;
    --error: #C94A3D;

    /* Bordures & lueurs — dérivées de l'Amber Signal */
    --border-subtle: rgba(232, 169, 59, 0.08);
    --border-strong: rgba(232, 169, 59, 0.15);
    --border-hover: rgba(232, 169, 59, 0.30);
    --accent-glow: rgba(232, 169, 59, 0.12);
    --accent-tint: rgba(232, 169, 59, 0.06);

    /* Typography */
    --font-primary: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Space Grotesk', 'Space Grotesk Fallback', 'Inter', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, 'Courier New', monospace;

    /* Spacing */
    /* Hauteur de la barre de navigation fixe. Sert au decalage du body
       ET au calcul de la hauteur du hero : les deux doivent rester
       synchronises, d'ou un token unique. */
    --nav-height: 72px;
    --container-width: 1200px;
    --section-padding: 120px;
    --section-padding-mobile: 60px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
    --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.2);

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
}

/* ===================================================================
   ICONES — sprite SVG partage (partials/icons.html)
   Usage : <svg class="icon"><use href="#i-nom"></use></svg>
   Herite de la couleur du texte via currentColor.
   =================================================================== */
.icon {
    width: 1em;
    height: 1em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.125em;
    overflow: visible;
}
.icon--sm { width: .875em; height: .875em; }
.icon--lg { width: 1.5em;  height: 1.5em; }
.icon--xl { width: 2.5em;  height: 2.5em; stroke-width: 1.5; }
.icon--spin { animation: icon-spin 1s linear infinite; }
@keyframes icon-spin { to { transform: rotate(360deg); } }

/* Icone seule dans un bouton : garde une cible tactile suffisante */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    gap: 6px;
}
@media (prefers-reduced-motion: reduce) {
    .icon--spin { animation: none; }
}