/* VoxTelio — design tokens canoniques (audit premium du 18/10/2026).
 * Source unique : copiés tels quels dans apps/site/assets/tokens.css et apps/web/src/tokens.css.
 * Inter 400/500 uniquement (pas de 600 : non auto-hébergé). Indigo #3e57da = action, lien, focus, navigation active. */
:root {
  /* 01 — Font */
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-regular: 400;
  --font-medium: 500;

  /* 02 — Neutral scale */
  --neutral-50:  #FAFBFD;
  --neutral-100: #F4F6F9;
  --neutral-200: #E9EDF3;
  --neutral-300: #D9E0EA;
  --neutral-400: #AFB8C7;
  --neutral-500: #7F899B;
  --neutral-600: #606A7C;
  --neutral-700: #444C5F;
  --neutral-800: #2E3445;
  --neutral-900: #181D2C;
  --neutral-950: #0D0F2C;

  /* 03 — Brand */
  --indigo-50:  #EEF1FF;
  --indigo-100: #DCE3FF;
  --indigo-200: #BBC7FF;
  --indigo-400: #7285EE;
  --indigo-500: #5269E5;
  --indigo-600: #3E57DA;
  --indigo-700: #3047C7;
  --indigo-800: #263AA9;
  --indigo-900: #202F78;

  /* 04 — Semantic status */
  --success-fg: #166534;
  --success-bg: #EDF8F0;
  --success-border: #CBEAD4;

  --warning-fg: #8A4F08;
  --warning-bg: #FFF8E7;
  --warning-border: #F3DEAE;

  --danger-fg: #A4252B;
  --danger-bg: #FFF1F2;
  --danger-border: #F3CDD2;

  --info-fg: #3155AB;
  --info-bg: #EEF4FF;
  --info-border: #D8E5FC;

  /* 05 — Semantic surfaces */
  --canvas: #FFFFFF;
  --surface: #FFFFFF;
  --surface-subtle: #FAFBFD;
  --surface-muted: #F4F6F9;
  --surface-hover: #F4F6F9;
  --surface-pressed: #E9EDF3;
  --surface-selected: #EEF1FF;
  --surface-dark: #0D0F2C;

  /* 06 — Text */
  --text-primary: #181D2C;
  --text-secondary: #606A7C;
  --text-tertiary: #606A7C;
  --text-disabled: #7F899B;
  --text-inverse: #FFFFFF;
  --text-link: #3047C7;

  /* 07 — Borders */
  --border-subtle: #E9EDF3;
  --border-default: #D9E0EA;
  --border-strong: #AFB8C7;
  --border-focus: #3E57DA;

  /* 08 — Actions */
  --action-primary: #3E57DA;
  --action-primary-hover: #3047C7;
  --action-primary-pressed: #263AA9;
  --action-primary-text: #FFFFFF;
  --action-secondary-hover: #F4F6F9;

  /* 09 — Spacing (4px-based, with half steps) */
  --space-0: 0;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;

  /* 10 — Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-button: 10px;
  --radius-panel: 12px;
  --radius-card: 16px;
  --radius-pill: 999px;

  /* 11 — Shadows */
  --shadow-none: none;
  --shadow-card:
    0 1px 2px rgba(13, 15, 44, .035);
  --shadow-raised:
    0 4px 16px rgba(13, 15, 44, .07);
  --shadow-overlay:
    0 16px 48px rgba(13, 15, 44, .13);
  --shadow-focus:
    0 0 0 3px rgba(62, 87, 218, .16);

  /* 12 — Typography: sizes */
  --type-2xs: 11px;
  --type-xs: 12px;
  --type-sm: 13px;
  --type-base: 14px;
  --type-lg: 16px;
  --type-xl: 20px;
  --type-title: 28px;
  --type-section: 40px;
  --type-display: 58px;

  /* Typography: line heights */
  --lh-2xs: 16px;
  --lh-xs: 18px;
  --lh-sm: 20px;
  --lh-base: 22px;
  --lh-lg: 24px;
  --lh-xl: 28px;
  --lh-title: 34px;
  --lh-section: 46px;
  --lh-display: 62px;

  /* Typography: letter spacing */
  --tracking-2xs: .01em;
  --tracking-xs: 0;
  --tracking-sm: -.005em;
  --tracking-base: -.01em;
  --tracking-lg: -.015em;
  --tracking-xl: -.025em;
  --tracking-title: -.035em;
  --tracking-section: -.04em;
  --tracking-display: -.045em;

  /* 13 — Component dimensions */
  --sidebar-width: 224px;
  --app-header-height: 64px;
  --toolbar-height: 48px;
  --table-row-height: 52px;
  --control-height-sm: 32px;
  --control-height-md: 40px;
  --control-height-lg: 44px;
  --mobile-tabbar-height: 64px;

  /* 14 — Layout */
  --site-max-width: 1160px;
  --app-content-max-width: 1440px;
  --reading-max-width: 680px;
  --app-page-gutter: 32px;
  --site-section-gap: 112px;

  /* 15 — Motion */
  --duration-instant: 80ms;
  --duration-fast: 120ms;
  --duration-normal: 180ms;
  --duration-slow: 280ms;
  --duration-entrance: 360ms;

  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, .2, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);

  /* 16 — Layers */
  --z-base: 0;
  --z-sticky: 10;
  --z-dropdown: 30;
  --z-overlay: 50;
  --z-modal: 60;
  --z-toast: 70;
}
@media (max-width: 767px) {
  :root {
    --app-page-gutter: 20px;
    --site-section-gap: 72px;
    --type-display: 36px;
    --lh-display: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --duration-entrance: 0ms;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}