/* ============================================================
   alixleo — socle de design
   Le bleu d'Alix (#5C7FC4) et l'orange de Léo (#E4703C), posés sur un noir
   plein. Un seul thème : la nuit. Le mode jour a été retiré en août 2026.
   Toute couleur du site doit venir d'ici. Rien en dur ailleurs.
   Référence de l'ancienne palette : design/palette-actuelle.css
   ============================================================ */

:root {
  color-scheme: dark;

  /* ——————————————————————————————
     1. Gammes de marque
     —————————————————————————————— */

  /* bleu alix — 500 = relevé sur la capture de référence */
  --alix-50: #eef2fa;
  --alix-100: #dce5f5;
  --alix-200: #b9caeb;
  --alix-300: #93aede;
  --alix-400: #7594d2;
  --alix-500: #5c7fc4;
  --alix-600: #4a68a8;
  --alix-700: #3b5388;
  --alix-800: #2c3d64;
  --alix-900: #1d2842;
  --alix-950: #121a2c;

  /* orange léo — 500 = relevé sur la capture de référence
     (le haut de la capture tombe sur le 300, le bas sur le 600) */
  --leo-50: #fdf1eb;
  --leo-100: #fbe2d6;
  --leo-200: #f6c2a9;
  --leo-300: #f0a07c;
  --leo-400: #ea8558;
  --leo-500: #e4703c;
  --leo-600: #cc5a28;
  --leo-700: #a8471f;
  --leo-800: #7e361a;
  --leo-900: #562616;
  --leo-950: #331810;

  /* point de rencontre : le neutre chaud par lequel les deux
     couleurs transitent au lieu de se mélanger dans la boue */
  --creme: #e8dccb;
  --creme-dim: #c9bda9;

  /* ——————————————————————————————
     2. Neutres — un noir plein, pas un bleu très foncé.
     Les fonds sont quasi neutres : le bleu d'Alix reste une lumière posée
     dessus, il ne teinte plus la matière. Seuls les niveaux hauts (traits,
     texte éteint) gardent un voile froid, qui les empêche de virer au gris sale.
     —————————————————————————————— */

  --ink-950: #000000;
  --ink-900: #060608;
  --ink-800: #0e0e12;
  --ink-700: #16161c;
  --ink-600: #202028;
  --ink-500: #30303c;
  --ink-400: #474754;
  --ink-300: #6f6f7d;
  --ink-200: #9b9baa;
  --ink-100: #c8c8d4;

  /* ——————————————————————————————
     3. Sémantique — le site n'a qu'un thème, la nuit.
     —————————————————————————————— */

  --bg: var(--ink-900);
  --bg-deep: var(--ink-950);
  --bg-elevated: var(--ink-800);
  --surface: var(--ink-800);
  --surface-2: var(--ink-700);
  --surface-inset: rgba(0, 0, 0, 0.55);

  /* bouton d'action principal */
  --btn: var(--alix-600);
  --btn-hover: var(--alix-500);
  --btn-text: #ffffff;

  /* fond des champs de saisie — creusé dans le noir */
  --field: rgba(0, 0, 0, 0.6);
  --field-border: rgba(147, 174, 222, 0.32);

  /* voiles posés sur une image ou un dégradé */
  --scrim-strong: rgba(0, 0, 0, 0.93);
  --scrim: rgba(0, 0, 0, 0.68);
  --scrim-soft: rgba(0, 0, 0, 0.42);

  --border: rgba(147, 174, 222, 0.13);
  --border-strong: rgba(147, 174, 222, 0.26);
  --border-accent: rgba(92, 127, 196, 0.42);
  --border-warm: rgba(228, 112, 60, 0.36);

  /* Sur un fond neutre, le texte l'est presque aussi : il ne garde qu'un
     souffle de froid, assez pour ne pas jurer avec le bleu d'Alix, trop peu
     pour se lire comme une couleur. */
  --text: #e6e7ee;
  --text-strong: #f3f4f8;
  --text-muted: #a0a3b3;
  --text-faint: #757988;
  --text-on-accent: #ffffff;

  /* accent froid = alix ; accent chaud = léo */
  --accent: var(--alix-400);
  --accent-hi: var(--alix-300);
  --accent-lo: var(--alix-600);
  --accent-soft: rgba(92, 127, 196, 0.16);
  --accent-line: rgba(117, 148, 210, 0.34);

  --warm: var(--leo-400);
  --warm-hi: var(--leo-300);
  --warm-lo: var(--leo-600);
  --warm-soft: rgba(228, 112, 60, 0.15);
  --warm-line: rgba(234, 133, 88, 0.32);

  /* accent de rubrique — surchargé par page (scrabblix = bleu, babbeleo = orange) */
  --rubrique: var(--accent);
  --rubrique-soft: var(--accent-soft);
  --rubrique-line: var(--accent-line);

  /* états */
  --good: #5fc48a;
  --good-soft: rgba(95, 196, 138, 0.15);
  --bad: var(--leo-300);
  --bad-soft: rgba(240, 160, 124, 0.14);

  /* bulles de correspondance — alix bleu, léo orange.
     Arrondi Apple conservé : c'est la seule exception à l'échelle de formes. */
  --bubble-alix: linear-gradient(180deg, var(--alix-500) 0%, var(--alix-600) 100%);
  --bubble-leo: linear-gradient(180deg, var(--leo-500) 0%, #d9642f 100%);
  --bubble-text: #ffffff;
  --bubble-meta: var(--text-faint);

  /* ——————————————————————————————
     4. Formes — échelle resserrée, angles marqués.
     Règle : rayon intérieur = rayon extérieur − padding.
     —————————————————————————————— */

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 9px;
  --radius-xl: 12px;
  --radius-bubble: 18px; /* exception assumée : les bulles gardent l'arrondi iOS */
  --radius-bubble-tail: 5px;
  --radius-pill: 999px;

  /* ——————————————————————————————
     5. Typographie — une seule voix.
     Le sans-serif du système (SF Pro sur iOS et macOS) porte tout le site :
     titres, mot-symbole et texte courant. C'est le dessin d'origine, celui
     qu'Alix trouve le plus chaleureux ; l'Optima essayé en août a été retiré.
     Aucun chargement réseau, aucune police de secours visible.

     --font-display et --font-wordmark restent des points d'entrée distincts
     pour le jour où un titrage à part reviendrait ; aujourd'hui les trois
     pointent volontairement sur la même famille. Ce qui distingue un titre,
     c'est la graisse (600) et le crénage serré, pas un autre caractère.
     —————————————————————————————— */

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue",
    Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-wordmark: var(--font-sans);
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-body: 0.9375rem;
  --text-base: 1rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.1875rem;
  --text-2xl: clamp(1.3rem, 4.6vw, 1.55rem);
  --text-3xl: clamp(1.55rem, 6vw, 2rem);
  --text-4xl: clamp(1.95rem, 7.6vw, 2.7rem);

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-label: 0.14em;

  --leading-tight: 1.18;
  --leading-snug: 1.35;
  --leading-normal: 1.55;

  /* ——————————————————————————————
     6. Élévation — par superposition, jamais par néon.
     —————————————————————————————— */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 14px -6px rgba(0, 0, 0, 0.65);
  --shadow-lg: 0 18px 44px -26px rgba(0, 0, 0, 0.85);
  --ring-accent: 0 0 0 1px rgba(117, 148, 210, 0.5);
  --ring-warm: 0 0 0 1px rgba(234, 133, 88, 0.5);

  /* ——————————————————————————————
     7. Matière — le grain qui casse le cerclage OLED
     —————————————————————————————— */

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  --grain-opacity: 0.19;

  /* Sources lumineuses du fond ambiant — position et intensité posées par
     js/theme.js selon l'heure, teintes ancrées ici. */
  --amb-a-rgb: 92, 127, 196;
  --amb-l-rgb: 228, 112, 60;

  /* ——————————————————————————————
     8. Trame & mouvement
     —————————————————————————————— */

  --space-page: max(1.25rem, env(safe-area-inset-left));
  --layout-max: 36rem;
  --layout-max-wide: 40rem;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.18s;
  --dur-base: 0.28s;
  --dur-slow: 0.42s;
}

/* ============================================================
   Rubriques — chacune penche vers l'un de nous deux.
   ============================================================ */

body.scrabblix-layout {
  --rubrique: var(--accent);
  --rubrique-soft: var(--accent-soft);
  --rubrique-line: var(--accent-line);
}

body.babbeleo-layout {
  --rubrique: var(--warm);
  --rubrique-soft: var(--warm-soft);
  --rubrique-line: var(--warm-line);
}