/* Écran en Confiance — Design tokens (ported verbatim from Claude Design) */

:root {
  color-scheme: light;

  /* Brand / text */
  --color-primary: #365b6d;
  --color-dark: #1a2e3d;
  --color-body: #2e2e2e;
  --color-secondary: #5e6c7b;
  --color-muted: #707070;

  /* Surfaces */
  --color-white: #ffffff;
  --color-separator: #eeeeee;
  --color-card-border: #e8e0d8;

  /* Pastels */
  --pastel-mint: #dbf1ea;
  --pastel-blue: #d0e5f6;
  --pastel-mauve: #e4d0e9;
  --pastel-yellow: #fff3bc;
  --pastel-rose: #ffcfcf;
  --pastel-green: #f0f7f4;

  /* Inverted */
  --color-on-dark: #ffffff;
  --color-on-dark-secondary: rgba(255, 255, 255, 0.82);

  /* Semantic aliases */
  --text-heading: var(--color-dark);
  --text-body: var(--color-body);
  --text-supporting: var(--color-secondary);
  --text-meta: var(--color-muted);
  --text-link: var(--color-primary);
  --surface-page: var(--color-white);
  --surface-card: var(--color-white);
  --border-card: var(--color-card-border);
  --border-divider: var(--color-separator);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-h1: 2.1em;
  --text-h2: 1.4em;
  --text-h3: 1.1em;
  --text-base: 1em;
  --text-subtitle: 0.95em;
  --text-label: 0.72em;
  --text-nav: 0.9em;
  --weight-regular: 400;
  --weight-medium: 600;
  --weight-semibold: 700;
  --weight-bold: 800;
  --weight-black: 900;
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --label-tracking: 0.12em;
  --label-transform: uppercase;

  /* Spacing / radius / shadow */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 28px; --space-7: 36px; --space-8: 48px; --space-9: 64px; --space-10: 72px;
  --section-gap: 64px;
  --page-pad-x: 24px;
  --content-wide: 1100px;
  --content-text: 720px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-pill: 50px;
  --border-card-width: 1.5px;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 6px 18px rgba(26, 46, 61, 0.08);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  color: var(--text-heading);
  line-height: var(--leading-tight);
  margin: 0 0 0.5em;
}
h1 { font-size: var(--text-h1); font-weight: var(--weight-black); letter-spacing: -0.02em; }
h2 { font-size: var(--text-h2); font-weight: var(--weight-black); letter-spacing: -0.01em; }
h3 { font-size: var(--text-h3); font-weight: var(--weight-bold); }

p { margin: 0 0 1em; }
a { color: var(--text-link); text-decoration: none; transition: color 0.15s ease; }
a:not(.btn):hover { color: var(--color-dark); }