/* public/assets/css/tokens.css — Clain Digital : variables du système de design
   Source : système de design « Clain Digital » (palette, typographie, espacements, rayons, ombres).
   Toutes les variables sont préfixées --cd- pour ne pas entrer en conflit avec les feuilles existantes.
   Thème : le sombre (Encre) s'applique par défaut, le clair (Calcaire) avec html[data-theme="light"]. */

/* ---------- Polices (auto-hébergées, aucun appel à Google pour les visiteurs) ---------- */
@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/playfair-display-latin.woff2') format('woff2');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/playfair-display-italic-latin.woff2') format('woff2');
    font-weight: 400 800;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/dm-sans-latin.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/dm-sans-italic-latin.woff2') format('woff2');
    font-weight: 300 700;
    font-style: italic;
    font-display: swap;
}

:root {
    /* ---------- Palette (valeurs fixes du système) ---------- */
    --cd-bleu-clain: #2F6B9E;     /* couleur principale : navigation, liens, boutons primaires */
    --cd-ocre: #C07A2E;           /* accent chaud : CTA (une seule fois par écran), séparateurs éditoriaux */
    --cd-calcaire: #F7F3ED;       /* fond clair */
    --cd-encre: #1A2533;          /* fond sombre, texte principal sur clair */
    --cd-ardoise: #4A5868;        /* corps de texte secondaire */
    --cd-brume: #8898A8;          /* labels, métadonnées (attention : 2,8:1 sur Calcaire, réservé aux grands textes ou au décor) */
    --cd-pierre: #E8E2D8;         /* bordures sur fond clair */
    --cd-encre-carte: #1E2D3E;    /* carte sur fond sombre */
    --cd-encre-bord: #2A3A4E;     /* bordure sur fond sombre */

    /* ---------- Couleurs par rubrique (tons sourds accordés au bleu et à l'ocre ; texte blanc lisible dessus) ---------- */
    --cd-rubrique-accueil: var(--cd-bleu-clain);
    --cd-rubrique-ia: #6E4B8B;          /* aubergine */
    --cd-rubrique-auto: #23706C;        /* sarcelle */
    --cd-rubrique-web: var(--cd-bleu-clain);
    --cd-rubrique-app: #5B6B2A;         /* vert olive : intranet, outils sur mesure, API */
    --cd-rubrique-seo: #9C5E1F;         /* ocre brun */
    --cd-rubrique-cyber: #3C7650;       /* vert sapin */
    --cd-rubrique-contact: #A84B32;     /* terre cuite */

    /* ---------- Rôles, thème sombre (par défaut) ---------- */
    color-scheme: dark;
    --cd-surface: var(--cd-encre);          /* fond de page */
    --cd-surface-alt: #16202C;              /* bande de section alternée */
    --cd-surface-card: var(--cd-encre-carte);
    --cd-surface-inverse: var(--cd-calcaire);
    --cd-ink: var(--cd-calcaire);           /* texte principal */
    --cd-slate: var(--cd-brume);            /* texte secondaire */
    --cd-muted: #7D8DA0;                    /* texte tertiaire (Brume ajustée : 4,6:1 sur Encre) */
    --cd-border: var(--cd-encre-bord);
    --cd-border-strong: #3A4C62;
    --cd-brand: var(--cd-bleu-clain);       /* remplissage : boutons, pastilles */
    --cd-brand-ink: #7FAEDB;                /* bleu Clain lisible en texte sur fond sombre */
    --cd-accent: var(--cd-ocre);
    --cd-accent-ink: #D9A06A;               /* ocre lisible en texte sur fond sombre */
    --cd-on-brand: #FFFFFF;                 /* texte sur bleu Clain et sur les couleurs de rubrique */
    --cd-on-accent: var(--cd-encre);        /* texte sur ocre (4,7:1) */
    --cd-success: #6DB287;
    --cd-warning: var(--cd-ocre);
    --cd-danger: #D46A4F;
    --cd-tint: 247 243 237;                 /* voile : rgb(var(--cd-tint) / 0.05) */

    /* ---------- Typographie ---------- */
    --cd-font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --cd-font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
    --cd-text-h1: 40px;  --cd-leading-h1: 44px;
    --cd-text-h2: 24px;  --cd-leading-h2: 29px;
    --cd-text-h3: 18px;  --cd-leading-h3: 22px;
    --cd-text-subtitle: 16px;
    --cd-text-body: 14px; --cd-leading-body: 1.7;
    --cd-text-label: 10px; --cd-tracking-label: 0.18em;
    --cd-text-caption: 11px;

    /* ---------- Espacements ---------- */
    --cd-space-1: 4px;
    --cd-space-2: 8px;
    --cd-space-3: 12px;
    --cd-space-4: 16px;
    --cd-space-6: 24px;
    --cd-space-8: 32px;
    --cd-space-12: 48px;
    --cd-space-18: 72px;

    /* ---------- Rayons ---------- */
    --cd-radius-sm: 2px;    /* badges, tags */
    --cd-radius-md: 3px;    /* boutons, champs */
    --cd-radius-lg: 6px;    /* cartes, modales */
    --cd-radius-icon-sm: 9px;
    --cd-radius-xl: 18px;

    /* ---------- Ombres ---------- */
    --cd-shadow-card: 0 12px 48px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
    --cd-shadow-panel: 0 4px 16px rgba(0, 0, 0, 0.28);
    --cd-shadow-subtle: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* ---------- Rôles, thème clair (Calcaire) ---------- */
:root[data-theme="light"] {
    color-scheme: light;
    --cd-surface: var(--cd-calcaire);
    --cd-surface-alt: #EFE9DF;
    --cd-surface-card: #FFFFFF;
    --cd-surface-inverse: var(--cd-encre);
    --cd-ink: var(--cd-encre);
    --cd-slate: var(--cd-ardoise);
    --cd-muted: #66737F;                    /* Brume ajustée : 4,6:1 sur Calcaire */
    --cd-border: var(--cd-pierre);
    --cd-border-strong: #D3CABB;
    --cd-brand-ink: var(--cd-bleu-clain);
    --cd-accent-ink: #94591C;               /* ocre lisible en texte sur Calcaire */
    --cd-success: #3C7650;
    --cd-warning: #9C5E1F;
    --cd-danger: #A84B32;
    --cd-tint: 26 37 51;
    --cd-shadow-card: 0 12px 48px rgba(26, 37, 51, 0.18), 0 2px 8px rgba(26, 37, 51, 0.1);
    --cd-shadow-panel: 0 4px 16px rgba(0, 0, 0, 0.12);
    --cd-shadow-subtle: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Playfair Display dessine par défaut des chiffres elzéviriens : on impose des chiffres alignés, plus lisibles dans les montants et les compteurs */
html { font-variant-numeric: lining-nums; }