/**
* ══════════════════════════════════════════════════════════════
* GRUBKIT — DESIGN TOKENS v2 (consolidé)
* ══════════════════════════════════════════════════════════════
*
* Remplace À LA FOIS variables.css et typography-tokens.css.
* Un seul fichier, deux parties :
*
* 1. CŒUR — le système simplifié. C'est la seule partie à
* apprendre. Toute nouvelle règle CSS doit pointer ici.
*
* 2. COMPATIBILITÉ — les anciens noms de variables, aliasés
* sur le cœur. Rien ne casse ; à supprimer au fur et à
* mesure que le code migre vers les noms du cœur.
*
* Installation :
* - remplacer les vers variables.css ET
* typography-tokens.css par un seul vers ce fichier
* (typography-base.css continue de fonctionner tel quel).
*
* ══════════════════════════════════════════════════════════════
*/
/* ╔════════════════════════════════════════╗
║ 1. CŒUR — LE SYSTÈME ║
╚════════════════════════════════════════╝ */
:root {
/* ── Couleurs de marque ─────────────────────────────
3 teintes par couleur, jamais plus.
Interdiction d'introduire un nouvel hex : si une teinte
manque, on la dérive ici, pas dans une page. */
--color-primary: #0F393E; /* bleu nuit GrubKit */
--color-primary-light: #1a5560; /* hover, liens actifs */
--color-primary-dark: #0a2a2e; /* fonds sombres profonds */
--color-accent: #F0C6C2; /* rose poudré — action principale */
--color-accent-light: #f7e0dd;
--color-accent-dark: #e0a8a3; /* hover du rose */
--color-lime: #ACCB43; /* vert login/loader — isolé ici,
décision à terme : garder ou fondre
dans accent */
/* ── Neutres & sémantique ── */
--color-white: #ffffff;
--color-black: #000000;
--color-surface: #f8f8f8; /* fonds de page / cartes grisées */
--color-border: #e0e0e0; /* LA bordure par défaut, 1px */
--color-danger: #c0392b;
--color-danger-soft: #e06b6b;
/* ── Texte (hiérarchie unique — remplace les gris ad hoc) ── */
--color-text: #1a1a1a;
--color-text-primary: #0F393E; /* titres */
--color-text-secondary: #2d464c; /* sous-titres */
--color-text-body: #4a5f65; /* corps */
--color-text-muted: #6b7c81; /* meta, labels secondaires */
--color-text-subtle: #8a999d; /* placeholders, hints */
/* ── Rayons — 4 valeurs, pas d'exception ──
xs : champs, chips, badges
sm : boutons, petits conteneurs
md : cartes, popups, images
pill: pilules et actions flottantes */
--radius-xs: 6px;
--radius-sm: 11px;
--radius-md: 15px;
--radius-pill: 50px;
/* ── Espacements ── */
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-2xl: 48px;
/* ── Ombres — toujours teintées bleu nuit ── */
--shadow-sm: 0 1px 3px rgba(15, 57, 62, 0.12);
--shadow-md: 0 4px 12px rgba(15, 57, 62, 0.16);
--shadow-lg: 0 8px 24px rgba(15, 57, 62, 0.20);
/* ── Focus (formulaires, boutons) ── */
--focus-ring: 0 0 0 3px rgba(15, 57, 62, 0.12);
/* ── Transitions ── */
--transition-fast: 0.15s ease;
--transition-normal: 0.25s ease;
--transition-slow: 0.4s ease;
/* ── Typographie : familles ── */
--font-display: "halyard-display-variable", system-ui, -apple-system, sans-serif;
--font-body: "halyard-text-variable", system-ui, -apple-system, sans-serif;
--font-micro: "halyard-micro-variable", system-ui, -apple-system, sans-serif;
--font-mono: ui-monospace, 'SF Mono', Monaco, Consolas, monospace;
/* ── Typographie : graisses — 4 crans utiles ──
(l'axe variable permet des valeurs fines) */
--weight-regular: 380; /* corps de texte */
--weight-medium: 450; /* emphase légère */
--weight-semibold: 550; /* labels, boutons */
--weight-bold: 600; /* tous les titres */
/* ── Typographie : échelle — 9 tailles ── */
--text-xs: 0.75rem; /* 12px — labels, captions */
--text-sm: 0.875rem; /* 14px — UI secondaire */
--text-base: 1rem; /* 16px — corps */
--text-md: 1.125rem; /* 18px — lead */
--text-lg: 1.25rem; /* 20px — sous-titres */
--text-xl: 1.5rem; /* 24px — titres de section */
--text-2xl: 1.75rem; /* 28px — titres de page */
--text-3xl: 2rem; /* 32px — grands titres */
--text-4xl: 2.5rem; /* 40px — hero admin */
/* ── Typographie : interlignage & approche ── */
--leading-display: 1.05; /* titres display */
--leading-title: 1.15; /* titres courants */
--leading-body: 1.5; /* corps */
--leading-micro: 1.3; /* labels */
--tracking-display: -0.03em;
--tracking-title: -0.015em;
--tracking-body: 0;
--tracking-micro: 0.02em;
}
/* ╔════════════════════════════════════════╗
║ 2. COMPATIBILITÉ (à résorber) ║
║ Anciens noms → tokens du cœur. ║
║ Ne rien AJOUTER ici. ║
╚════════════════════════════════════════╝ */
:root {
/* variables.css v1 */
--color-muted: var(--color-text-muted);
/* typography-tokens.css v1 — familles */
--font-primary: var(--font-body);
/* graisses étendues */
--weight-thin: var(--weight-regular);
--weight-light: var(--weight-regular);
--weight-extrabold: var(--weight-bold);
--weight-black: 700;
--vf-thin: "wght" 380;
--vf-light: "wght" 380;
--vf-regular: "wght" 380;
--vf-medium: "wght" 450;
--vf-semibold: "wght" 550;
--vf-bold: "wght" 600;
--vf-extrabold: "wght" 600;
--vf-black: "wght" 700;
/* tailles étendues */
--text-2xs: 0.625rem;
--text-5xl: 3rem;
--text-6xl: 3.75rem;
--text-7xl: 4.5rem;
/* échelle fluide v1 */
--text-fluid-2xs: clamp(0.6rem, 0.8vw, 0.625rem);
--text-fluid-xs: clamp(0.7rem, 0.9vw, 0.75rem);
--text-fluid-sm: clamp(0.8rem, 1.1vw, 0.875rem);
--text-fluid-base: clamp(0.9rem, 1.3vw, 1rem);
--text-fluid-md: clamp(1rem, 1.5vw, 1.125rem);
--text-fluid-lg: clamp(1.1rem, 1.8vw, 1.25rem);
--text-fluid-xl: clamp(1.3rem, 2.2vw, 1.5rem);
--text-fluid-2xl: clamp(1.5rem, 2.8vw, 1.75rem);
--text-fluid-3xl: clamp(1.75rem, 3.5vw, 2rem);
--text-fluid-4xl: clamp(2rem, 4.5vw, 2.5rem);
--text-fluid-5xl: clamp(2.25rem, 5.5vw, 3rem);
--text-fluid-6xl: clamp(2.5rem, 6.5vw, 3.75rem);
--text-fluid-7xl: clamp(3rem, 7.5vw, 4.5rem);
/* interlignages v1 */
--leading-display-tight: 0.95;
--leading-body-snug: 1.4;
--leading-body-relaxed: 1.6;
/* trackings v1 */
--tracking-display-tighter: -0.04em;
--tracking-display-tight: var(--tracking-display);
--tracking-micro-wide: 0.04em;
--tracking-tighter: -0.05em;
--tracking-tight: -0.025em;
--tracking-normal: 0;
--tracking-wide: 0.025em;
--tracking-wider: 0.05em;
/* scénarios v1 (--style-*) */
--style-hero: var(--font-display);
--style-hero-weight: var(--weight-black);
--style-hero-size: var(--text-fluid-7xl);
--style-hero-leading: var(--leading-display-tight);
--style-hero-tracking: var(--tracking-display-tighter);
--style-h1: var(--font-display);
--style-h1-weight: var(--weight-bold);
--style-h1-size: var(--text-fluid-5xl);
--style-h1-leading: var(--leading-display);
--style-h1-tracking: var(--tracking-display);
--style-h2: var(--font-display);
--style-h2-weight: var(--weight-bold);
--style-h2-size: var(--text-fluid-4xl);
--style-h2-leading: var(--leading-display);
--style-h2-tracking: var(--tracking-display);
--style-h3: var(--font-body);
--style-h3-weight: var(--weight-bold);
--style-h3-size: var(--text-fluid-3xl);
--style-h3-leading: var(--leading-title);
--style-h3-tracking: var(--tracking-title);
--style-body: var(--font-body);
--style-body-weight: var(--weight-regular);
--style-body-size: var(--text-base);
--style-body-leading: var(--leading-body);
--style-body-tracking: var(--tracking-body);
--style-caption: var(--font-micro);
--style-caption-weight: var(--weight-semibold);
--style-caption-size: var(--text-xs);
--style-caption-leading: var(--leading-micro);
--style-caption-tracking: var(--tracking-micro);
/* composants admin v1 */
--admin-hero-title: var(--text-fluid-2xl);
--admin-hero-subtitle: var(--text-fluid-lg);
--admin-hero-caption: var(--text-fluid-sm);
--admin-section-title: var(--text-fluid-xl);
--admin-card-title: var(--text-fluid-md);
--admin-card-body: var(--text-fluid-sm);
--admin-btn-text: var(--text-sm);
--admin-btn-text-lg: var(--text-base);
--admin-stat-large: var(--text-fluid-4xl);
--admin-stat-medium: var(--text-fluid-2xl);
--admin-stat-label: var(--text-xs);
/* alias couleurs typo v1 */
--color-heading: var(--color-text-primary);
--color-subheading: var(--color-text-secondary);
--color-paragraph: var(--color-text-body);
--color-meta: var(--color-text-muted);
/* rythme vertical v1 */
--space-text-2xs: 0.125rem;
--space-text-xs: 0.25rem;
--space-text-sm: 0.5rem;
--space-text-md: 1rem;
--space-text-lg: 1.5rem;
--space-text-xl: 2rem;
--space-text-2xl: 3rem;
}