/* ==========================================================================
   The Human Layer — Design tokens
   Source de vérité : THL-design-system-v1.md
   Ne pas modifier ces valeurs sans mettre à jour le design system.
   ========================================================================== */

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Give You Glory';
  src: url('../fonts/GiveYouGlory-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Neutres --- */
  --color-paper: #F8F9F7;
  --color-ink: #242322;
  --color-text-secondary: #55534E;
  --color-muted: #86847E;
  --color-divider: #E2E3E0;
  --color-data-gray: #C9CBC7;
  --color-error: #B23B3B;
  --color-disabled: #B4B2AC;
  --color-field-disabled-bg: #F0F1EF;

  /* --- Accent fonctionnel (fixe partout : action) --- */
  --color-accent: #3B78B5;
  --color-accent-hover: #35709F;
  --color-accent-active: #244F78;
  --color-accent-tint: #DCE8F3;
  --color-accent-tint-hover: #C7DAEA;
  --color-accent-tint-text: #244F78;
  --color-accent-focus-ring: rgba(59, 120, 181, 0.30);
  --color-card-hover-bg: #F6F9FC;
  --color-card-hover-border: #9AB9D8;

  /* --- Accents éditoriaux (un par format de contenu) --- */
  --format-highlight: #C23B7C;
  --format-highlight-tint: #F5DCE7;
  --format-highlight-tint-text: #8C2A5A;
  --format-piece: #6B78B4;
  --format-piece-tint: #E3E5F3;
  --format-piece-tint-text: #4A5590;
  --format-beneath: #1B4D46;
  --format-beneath-tint: #DCE7E4;
  --format-beneath-tint-text: #163D38;
  --format-conversation: #2FAFC0;
  --format-conversation-tint: #D9F0F1;
  --format-conversation-tint-text: #1B6B75;
  --format-usecase: #D98A3D;
  --format-usecase-tint: #F3E1CC;
  --format-usecase-tint-text: #8C5A22;

  /* --- Alias sémantiques --- */
  --surface-page: var(--color-paper);
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-muted);
  --border-default: var(--color-divider);

  /* --- Typographie --- */
  --font-structure: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-emphasis: 'Give You Glory', cursive;
  --text-eyebrow-size: 12px;
  --text-eyebrow-weight: 500;
  --text-eyebrow-tracking: 0.09em;
  --text-title-size: 38px;
  --text-title-weight: 400;
  --text-title-line: 1.15;
  --text-title-tracking: -0.01em;
  --text-subtitle-size: 20px;
  --text-subtitle-weight: 400;
  --text-subtitle-line: 1.35;
  --text-body-size: 17px;
  --text-body-weight: 400;
  --text-body-line: 1.55;
  --text-emphasis-size: 21px;
  --text-caption-size: 13px;
  --text-caption-weight: 400;
  --text-caption-line: 1.4;

  /* --- Espacement --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-eyebrow-title-plain: 16px;
  --space-eyebrow-title-badge: 12px;
  --space-title-subtitle: 12px;
  --space-subtitle-body: 32px;

  /* --- Rayons --- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-full: 9999px;

  /* --- Élévation (3 niveaux, rien ne flotte sur la page de lecture) --- */
  --elevation-0: none;
  --elevation-1: 0 0 0 3px var(--color-accent-focus-ring);
  --elevation-2: 0 8px 24px rgba(36, 48, 64, 0.12), 0 2px 6px rgba(36, 48, 64, 0.08);

  /* --- Geste signature : le halo en dégradé radial --- */
  --halo-functional: radial-gradient(circle, rgba(59, 120, 181, .35) 0%, rgba(59, 120, 181, .12) 45%, rgba(59, 120, 181, 0) 75%);
  --halo-highlight: radial-gradient(circle, rgba(194, 59, 124, .35) 0%, rgba(194, 59, 124, .12) 45%, rgba(194, 59, 124, 0) 75%);
  --halo-piece: radial-gradient(circle, rgba(107, 120, 180, .35) 0%, rgba(107, 120, 180, .12) 45%, rgba(107, 120, 180, 0) 75%);
  --halo-beneath: radial-gradient(circle, rgba(27, 77, 70, .35) 0%, rgba(27, 77, 70, .12) 45%, rgba(27, 77, 70, 0) 75%);
  --halo-conversation: radial-gradient(circle, rgba(47, 175, 192, .35) 0%, rgba(47, 175, 192, .12) 45%, rgba(47, 175, 192, 0) 75%);
  --halo-usecase: radial-gradient(circle, rgba(217, 138, 61, .35) 0%, rgba(217, 138, 61, .12) 45%, rgba(217, 138, 61, 0) 75%);
  --halo-neutral: radial-gradient(circle, rgba(36, 35, 34, .14) 0%, rgba(36, 35, 34, .05) 45%, rgba(36, 35, 34, 0) 75%);
}

/* Accent éditorial contextuel : chaque page/carte de format expose son propre
   --format-* via [data-format], pour que les composants restent génériques. */
[data-format="highlight"] {
  --format-accent: var(--format-highlight);
  --format-tint: var(--format-highlight-tint);
  --format-tint-text: var(--format-highlight-tint-text);
  --format-halo: var(--halo-highlight);
}
[data-format="piece"] {
  --format-accent: var(--format-piece);
  --format-tint: var(--format-piece-tint);
  --format-tint-text: var(--format-piece-tint-text);
  --format-halo: var(--halo-piece);
}
[data-format="beneath"] {
  --format-accent: var(--format-beneath);
  --format-tint: var(--format-beneath-tint);
  --format-tint-text: var(--format-beneath-tint-text);
  --format-halo: var(--halo-beneath);
}
[data-format="conversation"] {
  --format-accent: var(--format-conversation);
  --format-tint: var(--format-conversation-tint);
  --format-tint-text: var(--format-conversation-tint-text);
  --format-halo: var(--halo-conversation);
}
[data-format="usecase"] {
  --format-accent: var(--format-usecase);
  --format-tint: var(--format-usecase-tint);
  --format-tint-text: var(--format-usecase-tint-text);
  --format-halo: var(--halo-usecase);
}