/* ==========================================================================
   tokens.css — design tokens de Garde Alternée (étape 22, #835)

   Source : projet/design/ (maquettes Claude Design du 2026-10-25), style
   « Encre, signature vermillon ». En cas de doute, projet/design/DECISIONS.md
   fait foi. Mapping maquette → tokens : projet/design-tokens.md.

   Construit depuis tokens.template.css du plugin dev-project-suite (les noms
   attendus par les composants de src/assets/components/ sont conservés).

   Thème sombre : un seul bloc :root[data-theme="dark"], pas light-dark().
   Cible navigateurs = iOS 16.4+ (seuil du Web Push iPhone, choix de
   l'utilisateur du 2026-10-26) ; light-dark() demanderait Safari 17.5.
   data-theme est TOUJOURS posé par le script en tête de index.html (préférence
   de l'appareil, « système » résolu par matchMedia) avant le premier rendu :
   un seul bloc sombre suffit, sans flash de thème clair.
   ========================================================================== */

/* --------------------------------------------------------------------------
   POLICES — auto-hébergées (l'application fonctionne hors ligne), sous-ensemble
   latin de Google Fonts, licence SIL OFL 1.1 (voir assets/fonts/README.md).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-400-800.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: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/atkinson-hyperlegible-400.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: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/atkinson-hyperlegible-700.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;
}

:root {
  color-scheme: light;

  /* ------------------------------------------------------------------
     COULEURS DE BASE — les cinq valeurs du style, plus la signature
     ------------------------------------------------------------------ */

  --ga-bg: #E5EBE8;
  --ga-surface: #F8FAF9;
  --ga-ink: #14201E;
  --ga-muted: #475653;
  --ga-line: #C3CFCB;
  --ga-weekend: var(--ga-bg);  /* fond des samedis et dimanches dans le ruban = bg */
  --ga-today-ink: #FFFFFF;      /* numéro du jour sur sa pastille encre */

  /* Vermillon : RÉSERVÉ au logo et au coin corné « modifié ». Aucun autre
     usage, aucun autre accent (DECISIONS.md › Identité). */
  --ga-vermillon: #D9482B;

  /* Voile des modales et feuilles montantes */
  --ga-scrim: rgba(20, 32, 30, 0.32);

  /* Catégories des jours spéciaux */
  --cat-anniversaire: oklch(0.56 0.17 0);
  --cat-medical: oklch(0.56 0.17 160);
  --cat-scolaire: oklch(0.56 0.17 265);
  --cat-vacances: oklch(0.56 0.17 75);
  --cat-autre: oklch(0.5 0.015 80);

  /* Couleurs des parents : choisies par l'utilisateur, posées à l'exécution
     par app.js (ColorCore.ink / lift selon le thème). Valeurs de repli =
     première paire proposée par la maquette. */
  --parent-1: #3F6E8C;
  --parent-1-ink: #FFFFFF;
  --parent-2: #D9895B;
  --parent-2-ink: #14201E;

  /* Calendrier — mélanges à l'encre, repris des grilles de la maquette */
  --cal-sep: color-mix(in oklab, var(--ga-line) 45%, transparent);     /* séparateurs verticaux du ruban */
  /* Barres du haut de case : couleurs fixes, hors de celles des parents (choix de l'utilisateur) */
  --cal-vacances: oklch(0.6 0.16 150);
  --cal-ferie: oklch(0.55 0.17 300);
  --cal-hole-hatch: color-mix(in oklab, var(--ga-ink) 13%, transparent); /* « À attribuer » : hachure */
  --cal-hole-line: color-mix(in oklab, var(--ga-ink) 42%, transparent);  /* « À attribuer » : filet 1,5 px */
  /* Jours hors du mois : la case entière estompée à 38 % (maquette). En sombre, cette opacité
     posait l'encre foncée des parents sur une couleur éteinte, illisible : le ruban y est
     mélangé à la surface et son étiquette reste claire, le reste du texte en muted (étape 23b) */
  --cal-out-opacity: 0.38;
  --cal-out-mix: 100%;      /* part de la couleur du parent dans le ruban hors mois */
  --cal-out-ink: 100%;      /* part de l'encre du parent dans son étiquette (le reste : encre) */
  --cal-out-text: currentColor;

  /* ------------------------------------------------------------------
     RÔLES — noms attendus par les composants de la bibliothèque
     Le style est monochrome : action principale, focus, aujourd'hui et
     états fonctionnels sont tous à l'encre.
     ------------------------------------------------------------------ */

  --color-primary: var(--ga-ink);
  --color-primary-hover: color-mix(in oklab, var(--ga-ink) 86%, var(--ga-surface));
  --color-primary-active: var(--ga-ink);
  --color-primary-light: var(--ga-bg);

  --color-secondary: var(--ga-vermillon);
  --color-secondary-hover: var(--ga-vermillon);
  --color-secondary-active: var(--ga-vermillon);
  --color-secondary-light: var(--ga-bg);

  /* Neutres froids, dérivés des valeurs du style (vert-gris) */
  --color-neutral-50: #F8FAF9;
  --color-neutral-100: #EEF2F0;
  --color-neutral-200: #E5EBE8;
  --color-neutral-300: #C3CFCB;
  --color-neutral-400: #9DAEA9;
  --color-neutral-500: #6B7B77;
  --color-neutral-600: #475653;
  --color-neutral-700: #2F3D3A;
  --color-neutral-800: #1F2B29;
  --color-neutral-900: #14201E;

  /* Statuts : pas de rouge ni de vert. Une erreur se signale par un
     avertissement (surface + filet encre 1,5 px + pictogramme), une
     confirmation par un fond bg (DECISIONS.md › Comptes). */
  --color-success: var(--ga-ink);
  --color-success-light: var(--ga-bg);
  --color-warning: var(--ga-ink);
  --color-warning-light: var(--ga-surface);
  --color-error: var(--ga-ink);
  --color-error-light: var(--ga-surface);
  --color-info: var(--ga-ink);
  --color-info-light: var(--ga-bg);

  --color-bg: var(--ga-bg);
  --color-surface: var(--ga-surface);
  --color-surface-hover: color-mix(in oklab, var(--ga-bg) 50%, var(--ga-surface));
  --color-surface-active: var(--ga-bg);

  --color-text: var(--ga-ink);
  --color-text-secondary: var(--ga-muted);
  --color-text-muted: var(--ga-muted);
  --color-text-inverse: var(--ga-surface);

  --color-border: var(--ga-line);
  --color-border-focus: var(--ga-ink);

  --color-focus: var(--ga-ink);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* ------------------------------------------------------------------
     TRAITS ET CIBLES (README du paquet › Rayons, traits, tailles)
     ------------------------------------------------------------------ */

  --border-hair: 1px;     /* séparateurs */
  --border-control: 1.5px; /* contours de boutons secondaires et de champs */
  --border-strong: 2px;   /* encre pleine, élément sélectionné */

  --tap-min: 44px;        /* cible tactile minimale */
  --control-height: 48px; /* champs, boutons courants */
  --control-height-lg: 52px; /* boutons principaux */
  --control-height-sm: 36px; /* segments Mois / Année */
  --switch-width: 48px;
  --switch-height: 28px;

  /* ------------------------------------------------------------------
     ESPACEMENTS
     ------------------------------------------------------------------ */

  --space-2xs: 0.25rem;    /* 4px */
  --space-xs: 0.5rem;      /* 8px */
  --space-sm: 0.75rem;     /* 12px */
  --space-md: 1rem;        /* 16px */
  --space-lg: 1.5rem;      /* 24px */
  --space-xl: 2rem;        /* 32px */
  --space-2xl: 3rem;       /* 48px */
  --space-3xl: 4rem;       /* 64px */

  /* ------------------------------------------------------------------
     TYPOGRAPHIE — Bricolage Grotesque (titres, numéros de jour, heures des
     grilles) ; Atkinson Hyperlegible (texte, chiffres tabulaires). Aucun
     monospace dans l'application.
     ------------------------------------------------------------------ */

  --font-size-xs: 0.75rem;      /* 12px — intitulés en capitales */
  --font-size-sm: 0.8125rem;    /* 13px — secondaire */
  --font-size-base: 1rem;       /* 16px — corps */
  --font-size-md: 0.9375rem;    /* 15px — corps compact, boutons */
  --font-size-lg: 1.0625rem;    /* 17px — seuil du gras autorisé */
  --font-size-xl: 1.1875rem;    /* 19px — sélecteur de mois */
  --font-size-2xl: 1.5rem;      /* 24px — titre d'écran téléphone, feuille */
  --font-size-3xl: 1.875rem;    /* 30px — titre d'écran bureau */
  --font-size-4xl: 2.25rem;     /* 36px — titre de section */

  /* Gras (700) réservé : titres, boutons, intitulés en capitales, pastilles
     pleines, textes ≥ 17 px. Tout le reste en regular. */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 700; /* pas de 600 dans le style : les composants qui le demandent passent en gras */
  --font-weight-bold: 700;
  --font-weight-black: 800;

  --leading-tight: 1.1;
  --leading-normal: 1.4;
  --leading-relaxed: 1.55;

  --font-body: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: var(--font-body); /* pas de monospace dans l'application */

  --letter-spacing-caps: 0.08em; /* intitulés en capitales, 12 px, 700 */

  /* ------------------------------------------------------------------
     RAYONS — 99 (pastilles et boutons), 16 (cartes), 10 (champs, lignes,
     bandeaux), 6 (cases à cocher), 24 (haut des feuilles montantes)
     ------------------------------------------------------------------ */

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 99px;

  /* ------------------------------------------------------------------
     OMBRES — aucune ombre portée, sauf sous les éléments qui flottent
     au-dessus du contenu (menu du compte, carte du planning vide) : le
     README du paquet dit « aucune ombre », les maquettes en posent une à
     ces deux endroits — on suit les maquettes, écart consigné dans
     projet/design-tokens.md.
     ------------------------------------------------------------------ */

  --shadow-float: 0 12px 32px rgba(20, 32, 30, 0.18);

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --shadow-dark-lg: none;
  --shadow-dark-xl: none;

  /* ------------------------------------------------------------------
     Z-INDEX, TRANSITIONS, CONTENEURS (valeurs structurelles du gabarit)
     ------------------------------------------------------------------ */

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-tooltip: 600;
  --z-toast: 700;

  --transition-fast: 150ms ease-in-out;
  --transition-normal: 250ms ease-in-out;
  --transition-slow: 400ms ease-in-out;

  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;

  /* ------------------------------------------------------------------
     ALIAS — conventions des composants de la bibliothèque
     ------------------------------------------------------------------ */

  --text-2xs: 0.6875rem;   /* 11px */
  --text-xs: var(--font-size-xs);
  --text-sm: var(--font-size-sm);
  --text-base: var(--font-size-base);
  --text-lg: var(--font-size-lg);
  --text-xl: var(--font-size-xl);
  --text-2xl: var(--font-size-2xl);

  --line-height-tight: var(--leading-tight);
  --line-height-normal: var(--leading-normal);
  --line-height-relaxed: var(--leading-relaxed);

  --letter-spacing-tighter: -0.02em;
  --letter-spacing-tightest: -0.03em;
  --letter-spacing-wide: 0.05em;

  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --ease-default: ease-in-out;

  --font-heading: var(--font-display);

  --color-text-primary: var(--color-text);
  --color-text-disabled: var(--color-neutral-400); /* exempté WCAG (état inactif) */
  --color-text-placeholder: var(--color-text-muted);

  --color-bg-primary: var(--color-surface);
  --color-bg-secondary: var(--color-bg);

  --color-border-hover: var(--ga-muted);
  --color-border-strong: var(--ga-ink);
  --color-border-weak: var(--ga-line);

  /* Halos de focus : pas de halo coloré, l'anneau reste à l'encre */
  --color-primary-focus-ring: color-mix(in oklab, var(--ga-ink) 30%, transparent);
  --color-error-focus-ring: var(--color-primary-focus-ring);
  --color-success-focus-ring: var(--color-primary-focus-ring);

  --color-primary-dark: var(--color-primary-active);
  --color-primary-darker: var(--ga-ink);
  --color-primary-lighter: var(--color-primary-light);
  --color-primary-visited: var(--ga-ink);

  --color-info-dark: var(--ga-ink);
  --color-success-dark: var(--ga-ink);
  --color-warning-dark: var(--ga-ink);
  --color-error-dark: var(--ga-ink);
}

/* ==========================================================================
   THÈME SOMBRE — seules les valeurs de base changent ; les rôles et les
   mélanges suivent. Couleurs des parents : ColorCore.lift() côté JS (clarté
   oklch ramenée entre 0,58 et 0,82). Vermillon inchangé.
   ========================================================================== */

:root[data-theme="dark"] {
  color-scheme: dark;

  --ga-bg: #111816;
  --ga-surface: #1A2321;
  --ga-ink: #E3EBE8;
  --ga-muted: #9DAEA9;
  --ga-line: #3A4A46;
  --ga-today-ink: #111816;

  --cal-vacances: oklch(0.72 0.14 150);
  --cal-ferie: oklch(0.72 0.13 300);

  --cal-out-opacity: 1;
  --cal-out-mix: 38%;
  --cal-out-ink: 0%;
  --cal-out-text: var(--ga-muted);

  --ga-scrim: rgba(0, 0, 0, 0.6);
  --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.45);

  --cat-anniversaire: oklch(0.72 0.12 0);
  --cat-medical: oklch(0.72 0.12 160);
  --cat-scolaire: oklch(0.72 0.12 265);
  --cat-vacances: oklch(0.72 0.12 75);
  --cat-autre: oklch(0.72 0.015 80);

  --color-neutral-50: #1A2321;
  --color-neutral-100: #151D1B;
  --color-neutral-200: #111816;
  --color-neutral-300: #3A4A46;
  --color-neutral-400: #5F706B;
  --color-neutral-500: #7D8E89;
  --color-neutral-600: #9DAEA9;
  --color-neutral-700: #BCCAC6;
  --color-neutral-800: #D2DCD9;
  --color-neutral-900: #E3EBE8;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}