/**
 * maquette/tokens.css — Design Tokens SSOT Espace Client v3
 * Source unique de vérité partagée entre la coque publique (accueil, connexion, faq)
 * et l'espace personnel connecté (dashboard, mes-achats, adresses, factures, etc.).
 * Conforme WCAG 2.2 AA (contrastes >= 4.5:1, cibles >= 48px) & Personas Cooper (Odette, Sylvie).
 */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600&family=Lato:ital,wght@0,400;0,700;0,900;1,400&family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&family=Outfit:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,600&family=Plus+Jakarta+Sans:wght@600;700;800&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&display=swap');

:root {
  /* ========================================================================
     1. Échelle Spatiale & Conteneurs (Grid System Normalisé)
     ======================================================================== */
  --space-05: 2px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;

  /* Conteneurs canoniques */
  --container-read: 760px;   /* Formulaires, FAQ, modales, fiches personnelles */
  --container-wide: 1140px;  /* Accueil public, vitrine catalogue, Hero */
  --container-app:  1380px;  /* Dashboard connecté, liste des abonnements */
  --container-auth: 440px;   /* Carte centrée d'authentification */
  --sidebar-width:  264px;   /* Largeur fixe de la barre latérale connectée */

  /* Gouttières fluides */
  --gutter-pub: 24px;
  --gutter-app: 56px;

  /* Breakpoints normalisés (convention indicative : 640, 960, 1200) */
  --bp-mobile: 640px;
  --bp-tablet: 960px;
  --bp-desktop: 1200px;

  /* ========================================================================
     2. Rayons de courbure & Ombres (Senior & Salient Friendly)
     ======================================================================== */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 16px 36px -8px rgba(15, 23, 42, 0.12);
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 18px rgba(15, 23, 42, 0.04);
  --shadow-modal: 0 16px 48px rgba(15, 23, 42, 0.22);

  /* ========================================================================
     3. Typographie Fondamentale (Surpassée par le tenant)
     ======================================================================== */
  --font-display: 'Plus Jakarta Sans', 'Lato', sans-serif;
  --font-body: 'Open Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Échelle de tailles typographiques avec plancher senior (min 13px) */
  --text-xs: 0.8125rem; /* 13px (plancher strict pour étiquettes/badges) */
  --text-sm: 0.875rem;  /* 14px */
  --text-base: 1rem;    /* 16px */
  --text-md: 1.0625rem; /* 17px */
  --text-lg: 1.1875rem; /* 19px */
  --text-xl: 1.375rem;  /* 22px */
  --text-2xl: 1.75rem;  /* 28px */
  --text-3xl: 2.25rem;  /* 36px */

  /* ========================================================================
     4. Statuts Fonctionnels & Sécurité (WCAG 2.2 AA Contrast >= 4.5:1)
     ======================================================================== */
  --success-bg: #EAF7EE;
  --success-border: #BBF7D0;
  --success-ink: #166534;

  --critical-bg: #FEF2F2;
  --critical-border: #FECACA;
  --critical-ink: #991B1B;

  --warning-bg: #FFFBEB;
  --warning-border: #FDE68A;
  --warning-ink: #854D0E;

  --info-bg: #F0F9FF;
  --info-border: #BAE6FD;
  --info-ink: #0369A1;

  --neutral-bg: #F1F5F9;
  --neutral-border: #E2E8F0;
  --neutral-ink: #475569;

  /* ========================================================================
     5. Surfaces, Bordures & Encres Neutres
     ======================================================================== */
  --surface: #FFFFFF;
  --panel: #F8FAFC;
  --bg: #F8FAFC;
  --bg-subtle: #F8FAFC;
  --border: #E2E8F0;
  --border-soft: #F1F5F9;

  --ink: #1E293B;       /* Titres et textes primaires */
  --ink-soft: #475569;  /* Texte courant corps (contraste > 7:1 sur blanc) */
  --ink-faint: #64748B; /* Métadonnées secondaires */
  --ink-blue: #045E80;  /* Couleur de lecture accentuée (titres / liens) */

  --brand-blue: #079AD2;
  --brand-lime: #C7D43D;

  --link: var(--ink-blue);
  --link-hover: var(--brand-blue);

  /* ========================================================================
     6. Alias Rétro-compatibles Coque Publique (--pub-*)
     Permet la compatibilité directe sans réécriture massive
     ======================================================================== */
  --pub-bg: var(--bg-subtle);
  --pub-canvas: var(--bg-subtle);
  --pub-surface: var(--surface);
  --pub-ink: var(--ink);
  --pub-muted: var(--ink-soft);
  --pub-border: var(--border);
  --pub-primary: var(--ink);
  --pub-primary-ink: #FFFFFF;
  --pub-accent: var(--brand-blue);
  --pub-radius: var(--radius-lg);
  --pub-shadow-sm: var(--shadow-sm);
  --pub-shadow-md: var(--shadow-md);
}

/* ========================================================================
   7. Primitives de Layout Normalisées (.form-card, .grid-3, .grid-cards)
   ======================================================================== */
.form-card {
  max-width: var(--container-read);
  width: 100%;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

@media (max-width: 960px) {
  :root {
    --gutter-app: 24px;
  }
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  :root {
    --gutter-pub: 16px;
    --gutter-app: 16px;
  }
}

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min, 300px), 1fr));
  gap: var(--space-5);
}

.l-read {
  max-width: var(--container-read);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.l-wide {
  max-width: var(--container-wide);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.l-app {
  max-width: var(--container-app);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Accessibilité Focus-Visible universelle */
:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 2px;
}