/*
 * Design tokens Apana Advisor — partagés memento + simulators.
 *
 * Source canonique : simulators/docs/styles.css (préfixe --ce-* pour compat
 * avec la prod simulators existante). Toute valeur ici doit refléter la
 * définition simulators/docs/styles.css :root — synchroniser à la main au
 * besoin (eslint-stylelint à câbler en P6+).
 *
 * Usage memento (Astro layout) : `import '@advisor/shared/design/tokens.css';`
 * Usage simulators (statique) : à terme `<link href="/shared/design/tokens.css">`,
 *   actuellement les tokens vivent encore en double dans docs/styles.css.
 */

:root {
  /* Couleurs — charte CX */
  --ce-navy: #1f2d3f;
  --ce-navy-dark: #17222f;
  --ce-navy-light: #253345;
  --ce-orange: #f55420;
  --ce-orange-h: #e04318;
  --ce-orange-lt: rgba(245, 84, 32, 0.1);
  --ce-orange-ltr: rgba(245, 84, 32, 0.06);
  --white: #ffffff;

  /* Backgrounds & surfaces */
  --bg: #f5f6fa;
  --border: #e8eaed;
  --border-dark: #d0d3da;

  /* Texte */
  --text: #1f2d3f;
  --text-mid: #5b6a7e;
  --text-dim: #8e99a8;

  /* États / feedback */
  --green: #52c41a;
  --green-bg: rgba(82, 196, 26, 0.08);
  --green-light: #f6ffed;
  --green-border: #b7eb8f;
  --green-dark: #389e0d;
  --red: #f5222d;
  --red-bg: rgba(245, 34, 45, 0.08);
  --red-light: #fff2f0;
  --red-medium: #ff4d4f;
  --red-border: #ffccc7;
  --red-dark: #cf1322;
  --red-muted: #ff8a8a;
  --red-pale: #ffd7d7;
  --gold: #faad14;
  --gold-bg: rgba(250, 173, 20, 0.08);
  --gold-light: #fffbe6;
  --gold-border: #ffe58f;
  --gold-dark: #d48806;
  --gold-text: #8b6914;
  --blue: #1890ff;
  --blue-light: #e6f4ff;
  --blue-border: #91caff;
  --blue-dark: #0958d9;
  --slider-green: #1d7c68;
  --slider-orange: #cb5f2d;
  --slider-gold: #cf9d2e;

  /* Ombres */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.13);

  /* Layout */
  --radius: 4px;
  --radius-lg: 8px;
  --topbar-height: 56px;
  --subtopbar-height: 48px;
  /* Largeur max d'un container principal — utilisée par .topbar-inner,
     .subtopbar-inner et toutes les zones de contenu (.app-container).
     Tient sur écran 1280 confortablement, centré au-delà. */
  --container-max-width: 1200px;
  --container-padding-x: 24px;

  /* Typographie */
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Échelle de tailles (modulaire ratio ~1.2). Tous les composants doivent
     piocher ici plutôt que d'inscrire un px en dur. */
  --font-size-xs: 11px; /* labels, micro-copy */
  --font-size-sm: 12px; /* meta, badges */
  --font-size-base: 14px; /* corps de texte par défaut */
  --font-size-md: 15px; /* corps un peu plus dense (memento) */
  --font-size-lg: 16px; /* H4 / titres internes */
  --font-size-xl: 18px; /* H3 */
  --font-size-2xl: 22px; /* H2 */
  --font-size-3xl: 28px; /* H1 page */
  --font-size-4xl: 36px; /* H1 hero (landing) */

  /* Line-heights cohérents */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;

  /* Poids */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

/* Container principal — appliqué à toute zone de contenu pleine largeur.
   Mêmes contraintes que .topbar-inner / .subtopbar-inner pour aligner
   visuellement le contenu sous la topbar. */
.app-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding-x);
  width: 100%;
  box-sizing: border-box;
}