/* Jetons de design de l'espace — refonte « Aérien » (fond crème, cartes blanches très
   arrondies sur ombres douces, contrôles en pilules, police Manrope).
   Chargé avant style.css. Les noms historiques sont conservés (compatibilité) ;
   seules leurs valeurs changent. templates/publication_page.html reste 100 %
   autonome et garde sa propre copie des valeurs (non concernée par la refonte). */

/* Manrope (SIL Open Font License), police variable 200–800, servie en local :
   aucune requête vers Google Fonts. Deux sous-ensembles (latin, latin étendu). */
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-Variable-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  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: "Manrope";
  src: url("fonts/Manrope-Variable-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Police */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Police des titres : celle du texte par défaut ; réglable par espace
     (onglet « Paramètres » de l'administration, voir space_theme_style()). */
  --font-heading: var(--font-sans);

  /* Fond & encre */
  --bg: #f9f7f4;
  --card-bg: #ffffff;
  --ink: #1f2426;
  --ink-soft: #3b4448;
  --muted: #6b7478;
  --muted-soft: #9aa3a7;
  --surface-2: #f3f1ed;
  --surface-2-hover: #e9e5dd;
  --surface-3: #f1eee9;
  --surface-sunken: #fbfaf8;
  --border: #e9e5dd;
  --border-soft: #f0ede7;
  --border-dash: #dcd7ce;
  --placeholder: #e6e2db;   /* vignette vide, zone de dépôt en pointillés */
  --separator: #c5cbcd;     /* puces « · » entre deux informations */

  /* Pastilles actives et petits badges « inversés » (fond encre, texte clair) :
     s'inversent en mode sombre (fond clair, texte sombre). */
  --inverse: #1f2426;
  --on-inverse: #fff;
  /* Grands panneaux sombres (hero, dernière étape « Génération », lecteur
     vidéo, journaux) : restent sombres dans les deux modes. */
  --deep: #1f2426;

  /* Calques : voile des fenêtres, pastilles translucides sur image. */
  --backdrop: rgba(31, 36, 38, 0.45);
  --glass: rgba(255, 255, 255, 0.9);
  --sunken-hover: rgba(255, 255, 255, 0.6);

  /* Marque */
  --brand: #0d8b9c;
  --brand-dark: #095f6b;
  --brand-hover: #0a7482;
  --brand-tint: #e3f3f5;
  --brand-light: #5fc4d0;
  --brand-tint-hover: #d3ecef;
  --brand-tint-soft: #eef7f8;
  /* Texte posé sur la couleur de l'espace (boutons, pastilles) et texte de la
     couleur de l'espace sur fond clair (liens, icônes) : recalculés pour rester
     lisibles quand la couleur réglée est claire (space_brand_palette()). */
  --on-brand: #ffffff;
  --brand-ink: var(--brand);
  /* Halo chaud des fonds d'accueil et de connexion */
  --halo-warm: #f3ede3;

  /* Statuts (pastilles pastel) */
  --status-pending-bg: #fbf0dc;
  --status-pending-fg: #a8731f;
  --status-validated-bg: #e3f3f5;
  --status-validated-fg: #095f6b;
  --status-scheduled-bg: #fbe4e2;
  --status-scheduled-fg: #c0392b;
  --status-published-bg: #e3f4e7;
  --status-published-fg: #1f7a43;
  --danger: #b23c3c;
  --danger-bg: #fbeceb;
  --danger-border: #d9534f;
  --danger-ink: #7a1f1a;
  /* Texte des encadrés « notice » sur fond --status-pending-bg */
  --notice-fg: #6b5426;

  /* Catégories de pack : badge sombre sur la vignette, tuiles teal au choix. */
  --category-episode: #1f2426;
  --category-episode-soft: #f3f1ed;
  --category-short: #1f2426;
  --category-short-soft: #f3f1ed;
  --category-none: #6b7478;
  /* Post RS : bleu de référence LinkedIn. */
  --category-linkedin: #0a66c2;
  --category-linkedin-soft: #e8f1fb;

  /* Confiance de détection d'émission */
  --confidence-high-bg: #e3f4e7;
  --confidence-high-fg: #1f7a43;
  --confidence-medium-bg: #fbf0dc;
  --confidence-medium-fg: #a8731f;
  --confidence-low-bg: #fbeceb;
  --confidence-low-fg: #b23c3c;
  --confidence-unknown-bg: #f3f1ed;
  --confidence-unknown-fg: #6b7478;

  /* Résultat de génération (job-poll.js) */
  --outcome-running-bg: #f9f7f4;
  --outcome-success-bg: #e3f4e7;
  --outcome-success-border: #c6e6cf;
  --outcome-warning-bg: #fbf0dc;
  --outcome-warning-border: #f0dcb4;
  --outcome-error-bg: #fbeceb;
  --outcome-error-border: #f0c8c5;

  /* Alias historiques, conservés pour compatibilité */
  --gold: #a8731f;
  --green: #1f7a43;
  --amber: #a8731f;
  --violet: #6a3fb8;
  --red: #b23c3c;

  /* Espacements */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;

  /* Rayons */
  --radius-sm: 12px;   /* inputs, selects */
  --radius-md: 16px;   /* blocs internes, drop zones, cellules calendrier */
  --radius-lg: 22px;   /* cartes, sections */
  --radius-xl: 26px;   /* grands panneaux (accueil) */
  --radius-pill: 999px;

  /* Ombres */
  --shadow-xs: 0 1px 3px rgba(31, 36, 38, 0.05);
  --shadow-sm: 0 1px 3px rgba(31, 36, 38, 0.04), 0 6px 16px -10px rgba(31, 36, 38, 0.14);
  --shadow-md: 0 1px 3px rgba(31, 36, 38, 0.04), 0 10px 30px -18px rgba(31, 36, 38, 0.16);
  --shadow-lg: 0 30px 60px -30px rgba(31, 36, 38, 0.25);
  --shadow-card: 0 1px 3px rgba(31, 36, 38, 0.04), 0 10px 30px -18px rgba(31, 36, 38, 0.16);
  --shadow-card-hover: 0 18px 40px -18px rgba(31, 36, 38, 0.22), 0 2px 6px rgba(31, 36, 38, 0.04);
  --shadow-nav: 0 1px 3px rgba(31, 36, 38, 0.05), 0 6px 20px -10px rgba(31, 36, 38, 0.12);
  --shadow-cta: 0 10px 24px -10px rgba(13, 139, 156, 0.6);
  --shadow-hero: 0 30px 60px -30px rgba(31, 36, 38, 0.25);

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(13, 139, 156, 0.25);
  --focus-ring-dark: 0 0 0 3px rgba(95, 196, 208, 0.45);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 250ms ease;

  /* Typographie (corps 14/1.5) */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 28px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  /* En-tête clair translucide */
  --header-bg: rgba(249, 247, 244, 0.85);

  /* Accent turquoise sur fond sombre (sections « Génération ») */
  --teal-on-dark: #2bb6c8;
  /* Avertissement sur les grands panneaux sombres (--deep, sombres dans les
     deux modes) : coût en crédits sous le palier bas, page Générer. */
  --warning-on-deep: #f2c879;
  --teal-on-dark-soft: rgba(43, 182, 200, 0.16);

  /* Largeurs de contenu */
  --content-width: 1200px;
  --content-width-narrow: 880px;
  --content-width-wide: 1400px;

  /* Couleurs de marque des réseaux */
  --net-youtube: #d13c3c;
  --net-tiktok: #1f2426;
  --net-meta: #b23a8f;
  --net-linkedin: #0a66c2;

  /* Tailles de contrôles */
  --control-h-sm: 32px;
  --control-h-md: 40px;
  --control-h-lg: 48px;

  /* Chevron des selects (trait --muted) */
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7478' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  /* Empilement (z-index) */
  --z-header: 20;
  --z-dropdown: 40;
  --z-overlay: 90;
  --z-modal: 100;
}