/* 12Cinqcent — tokens Claude Design (source de vérité)
   Rouge marque #E30613 · Charbon #1C1A1B · Gris chauds
   Alias --braise/--or/--anthracite conservés pour compatibilité tests & HTML existant. */
/* Aucune police externe : Manrope est embarquée (fonts/*.woff2, mise en cache par le service
   worker) et sert déjà de police de repli partout. L'@import Google Fonts qui se trouvait ici
   bloquait le rendu CSS sur une requête vers un tiers à chaque chargement à froid, échouait
   hors-ligne — cas courant sur le marché visé — et transmettait l'IP de chaque utilisateur à un
   tiers, ce qui n'a pas de base légale dans le registre de traitements de l'application. */

:root {
  --red: #E30613;
  --red-dark: #B80510;
  --red-tint: #FBEAEB;
  --charcoal: #1C1A1B;
  --charcoal-soft: #3A3839;
  --charcoal-deep: #141213;
  --grey-700: #57545A;
  /* Contraste : #8C888D ne donnait que 3,3:1 sur blanc — sous le minimum WCAG AA (4,5:1)
     pour du texte normal, alors que ce jeton porte tout le texte secondaire de l'app
     (172 usages : libellés de section, métadonnées, aides). #69656B monte à 5,3:1 sur
     blanc et 4,8:1 sur la surface grise, en gardant la même famille de gris chaud. */
  --grey-400: #69656B;
  --grey-100: #F4F2F3;
  --grey-050: #FAF9F9;
  --white: #FFFFFF;

  --brand: var(--red);
  --brand-pressed: var(--red-dark);
  --brand-wash: var(--red-tint);

  --text-strong: var(--charcoal);
  --text-body: var(--grey-700);
  --text-muted: var(--grey-400);
  --text-inverse: var(--white);
  --text-on-brand: var(--white);
  --text-inverse-body: rgba(255, 255, 255, 0.72);

  --surface-page: var(--white);
  --surface-subtle: var(--grey-050);
  --surface-sunken: var(--grey-100);
  --surface-card: var(--white);
  --surface-inverse: var(--charcoal);
  --surface-glass: rgba(255, 255, 255, 0.85);
  --surface-inverse-card: rgba(255, 255, 255, 0.06);

  --border-hairline: rgba(28, 26, 27, 0.06);
  --border-default: rgba(28, 26, 27, 0.12);
  --border-brand: rgba(227, 6, 19, 0.16);
  --border-inverse: rgba(255, 255, 255, 0.14);

  --success: #1A7F37;
  --success-ink: #146B2E;
  --success-wash: #E7F4EB;
  --warning: #B5730B;
  /* Variante « encre » de l'ambre, pour le TEXTE : #B5730B plafonne à 3,9:1 sur blanc et
     3,5:1 sur son propre fond. #8A5606 passe AA partout. L'ambre d'origine reste utilisé
     pour les objets graphiques (étoiles), où le seuil applicable est 3:1. */
  --warning-ink: #8A5606;
  --warning-wash: #FDF3E2;
  --brand-ink: var(--red-dark);
  --danger: var(--red);
  --danger-wash: var(--red-tint);
  --info: #1B5E9B;
  --info-wash: #E8F0F8;

  --glow-brand: radial-gradient(circle, rgba(227, 6, 19, 0.16) 0%, rgba(227, 6, 19, 0) 70%);
  --gradient-hero: linear-gradient(180deg, var(--grey-050) 0%, var(--white) 100%);
  --gradient-card: linear-gradient(160deg, var(--white) 0%, var(--grey-050) 100%);
  --gradient-ember: linear-gradient(145deg, var(--charcoal) 0%, #2C1012 55%, var(--red-dark) 145%);
  --gradient-icon: linear-gradient(160deg, var(--white) 0%, var(--red-tint) 100%);

  --font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-text: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --size-hero: clamp(34px, 6vw, 58px);
  --size-h2: clamp(22px, 4.4vw, 28px);
  --size-h3: 19px;
  --size-stat: 34px;
  --size-lead: 17px;
  --size-body: 15px;
  --size-ui: 14.5px;
  --size-label: 13px;
  --size-caption: 13.5px;
  --size-eyebrow: 12.5px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;
  --leading-display: 1.08;
  --leading-tight: 1.25;
  --leading-body: 1.5;
  --tracking-display: -0.02em;
  --tracking-h3: -0.01em;
  --tracking-eyebrow: 0.14em;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --control-h-md: 50px;
  --tap-min: 44px;
  --nav-h: 58px;

  --shadow-soft: 0 20px 40px -20px rgba(28, 26, 27, 0.18);
  --shadow-card: 0 12px 30px -14px rgba(28, 26, 27, 0.15);
  --shadow-card-hover: 0 30px 50px -22px rgba(28, 26, 27, 0.22);
  --shadow-brand: 0 14px 30px -10px rgba(227, 6, 19, 0.55);
  --shadow-brand-soft: 0 12px 24px -12px rgba(227, 6, 19, 0.35);
  --shadow-icon: 0 12px 24px -12px rgba(227, 6, 19, 0.35), inset 0 0 0 1px rgba(227, 6, 19, 0.08);
  --shadow-icon-hover: 0 16px 30px -12px rgba(227, 6, 19, 0.45), inset 0 0 0 1px rgba(227, 6, 19, 0.14);
  --shadow-ember: 0 32px 60px -20px rgba(227, 6, 19, 0.4), 0 12px 28px -14px rgba(28, 26, 27, 0.45);
  --blur-glass: saturate(180%) blur(14px);

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-standard: ease;
  --dur-fast: .15s;
  --dur-base: .18s;
  --dur-slow: .28s;
  --lift-hover: translateY(-2px);
  --lift-card: translateY(-6px);
  --transition-control: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard);
  --transition-card: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-standard), border-color var(--dur-slow) var(--ease-standard);

  /* Compatibilité héritage */
  --braise: var(--brand);
  --braise-d: var(--brand-pressed);
  --braise-soft: var(--brand-wash);
  --bitume: var(--charcoal);
  --encre: var(--charcoal-deep);
  --acier: var(--grey-400);
  --acier-l: var(--grey-400);
  --craie: var(--grey-050);
  --carte: var(--white);
  --ligne: var(--border-hairline);
  --fond-ext: var(--grey-100);
  --manguier: var(--success);
  --manguier-soft: var(--success-wash);
  --soleil: var(--warning);
  --soleil-ink: var(--warning-ink);
  --manguier-ink: var(--success-ink);
  --braise-ink: var(--brand-ink);
  --soleil-soft: var(--warning-wash);
  --anthracite: var(--charcoal);
  --noir: var(--charcoal-deep);
  --or: var(--brand);
  --or-d: var(--brand-pressed);
  --or-soft: var(--brand-wash);
  --or-ink: var(--brand-pressed);
  --argent: var(--grey-400);
  --argent-soft: var(--grey-100);
  --accent: var(--brand);
  --accent-d: var(--brand-pressed);
  --accent-soft: var(--brand-wash);
  --ombre: var(--shadow-card);
  --ombre-h: var(--shadow-soft);
  --ombre-gold: var(--shadow-brand-soft);
  --r: var(--radius-lg);
  --r-s: var(--radius-md);
  --r-l: var(--radius-xl);
  --r-pill: var(--radius-pill);
  --space-screen: 22px;
  --space-field: 20px;
}

body.dark {
  /* Voir claude-premium.css : les variantes « encre » repassent aux couleurs vives en sombre. */
  --success-ink: #3DD68C;
  --warning-ink: #FFB93D;
  --brand-ink: #FF5A5F;
  --info: #7FB4E8;
  --info-wash: rgba(27,94,155,.22);
  --craie: #1A1B1F;
  --carte: #25262B;
  --ligne: #35363C;
  --fond-ext: #0E0F12;
  --bitume: #F2F0EB;
  --encre: #F2F0EB;
  --acier: #A8ABB3;
  --text-strong: #F2F0EB;
  --surface-page: #1A1B1F;
  --surface-card: #25262B;
}