:root {
  /* Carrera Cars Design System v2.2 — tokens v2.1 conservés */
  color-scheme: light;

  /* Brand */
  --cc-color-brand-50: #eff4ff;
  --cc-color-brand-100: #dbe8ff;
  --cc-color-brand-500: #155eef;
  --cc-color-brand-600: #004eeb;
  --cc-color-brand-700: #00359e;

  /* Neutral */
  --cc-color-neutral-0: #ffffff;
  --cc-color-neutral-25: #fcfcfc;
  --cc-color-neutral-50: #f7f7f7;
  --cc-color-neutral-100: #f4f4f4;
  --cc-color-neutral-200: #e8e8e8;
  --cc-color-neutral-300: #d0d0d0;
  --cc-color-neutral-500: #858585;
  --cc-color-neutral-600: #676767;
  --cc-color-neutral-700: #3e3e3e;
  --cc-color-neutral-900: #111111;

  /* Semantic */
  --cc-color-success: #067647;
  --cc-color-success-bg: #ecfdf3;
  --cc-color-warning: #b54708;
  --cc-color-warning-bg: #fffaeb;
  --cc-color-danger: #d92d20;
  --cc-color-danger-bg: #fef3f2;
  --cc-color-info: #175cd3;
  --cc-color-info-bg: #eff8ff;

  /* Semantic aliases */
  --cc-bg-app: var(--cc-color-neutral-100);
  --cc-bg-surface: var(--cc-color-neutral-0);
  --cc-bg-surface-subtle: var(--cc-color-neutral-50);
  --cc-bg-glass: rgba(255, 255, 255, 0.68);
  --cc-bg-glass-strong: rgba(255, 255, 255, 0.82);
  --cc-text-primary: var(--cc-color-neutral-900);
  --cc-text-secondary: var(--cc-color-neutral-600);
  --cc-text-tertiary: var(--cc-color-neutral-500);
  --cc-text-on-brand: var(--cc-color-neutral-0);
  --cc-border-subtle: rgba(0, 0, 0, 0.08);
  --cc-border-strong: rgba(0, 0, 0, 0.14);
  --cc-focus-ring: rgba(21, 94, 239, 0.22);

  /* Visual Foundation — semantic surfaces */
  --cc-surface-canvas: var(--cc-color-neutral-100);
  --cc-surface-base: var(--cc-color-neutral-0);
  --cc-surface-subtle: var(--cc-color-neutral-50);
  --cc-surface-raised: rgba(255, 255, 255, 0.82);
  --cc-surface-brand: var(--cc-color-brand-50);
  --cc-surface-glass: rgba(255, 255, 255, 0.68);

  /* Typography */
  --cc-font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cc-font-size-xs: 0.75rem;
  --cc-font-size-sm: 0.8125rem;
  --cc-font-size-md: 0.875rem;
  --cc-font-size-lg: 1rem;
  --cc-font-size-xl: 1.125rem;
  --cc-font-size-2xl: 1.5rem;
  --cc-font-size-3xl: 2rem;
  --cc-line-tight: 1.2;
  --cc-line-normal: 1.5;
  --cc-weight-regular: 400;
  --cc-weight-medium: 500;
  --cc-weight-semibold: 600;
  --cc-weight-bold: 700;

  /* Visual Foundation — role-based typography */
  /* Proportions alignées sur le Dashboard v3 validé. */
  --cc-type-display-size: 1.75rem;
  --cc-type-display-line: 2.125rem;
  --cc-type-entity-size: 1.5rem;
  --cc-type-entity-line: 1.875rem;
  --cc-type-section-size: 1.125rem;
  --cc-type-section-line: 1.5rem;
  --cc-type-subsection-size: 1rem;
  --cc-type-subsection-line: 1.375rem;
  --cc-type-card-size: 0.9375rem;
  --cc-type-card-line: 1.25rem;
  --cc-type-body-size: 0.875rem;
  --cc-type-body-line: 1.3125rem;
  --cc-type-compact-size: 0.8125rem;
  --cc-type-compact-line: 1.125rem;
  --cc-type-label-size: 0.75rem;
  --cc-type-label-line: 1rem;
  --cc-type-meta-size: 0.6875rem;
  --cc-type-meta-line: 0.9375rem;

  /* Spacing */
  --cc-space-1: 0.25rem;
  --cc-space-2: 0.5rem;
  --cc-space-3: 0.75rem;
  --cc-space-4: 1rem;
  --cc-space-5: 1.25rem;
  --cc-space-6: 1.5rem;
  --cc-space-8: 2rem;
  --cc-space-10: 2.5rem;
  --cc-space-12: 3rem;

  /* Geometry */
  --cc-radius-xs: 0.375rem;
  --cc-radius-sm: 0.625rem;
  --cc-radius-md: 0.875rem;
  --cc-radius-lg: 1rem;
  --cc-radius-xl: 1.25rem;
  --cc-radius-full: 999px;
  --cc-control-height-sm: 2.25rem;
  --cc-control-height: 2.5rem;
  --cc-control-height-lg: 2.75rem;
  --cc-sidebar-width: 14.875rem;
  --cc-topbar-height: 4.5rem;

  /* Visual Foundation — layout */
  --cc-page-padding-wide: 1.625rem;
  --cc-page-padding-desktop: 1.25rem;
  --cc-page-padding-tablet: 1rem;
  --cc-page-padding-mobile: 1rem;
  --cc-grid-gap: 0.875rem;
  --cc-grid-gap-compact: 0.75rem;
  --cc-card-padding-compact: 1rem;
  --cc-card-padding: 1rem;
  --cc-panel-padding: 1.25rem;

  /* Elevation */
  --cc-shadow-1: 0 8px 24px rgba(0, 0, 0, 0.05);
  --cc-shadow-2: 0 24px 80px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --cc-shadow-3: 0 28px 80px rgba(0, 0, 0, 0.18);
  --cc-shadow-none: none;
  --cc-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --cc-shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.05);
  --cc-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.07);
  --cc-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.10);
  --cc-shadow-overlay: 0 28px 80px rgba(0, 0, 0, 0.18);
  --cc-shadow-sidebar: 18px 0 60px rgba(0, 0, 0, 0.08);

  /* Motion */
  --cc-duration-fast: 120ms;
  --cc-duration-base: 180ms;
  --cc-ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Layering */
  --cc-z-sticky: 20;
  --cc-z-sidebar: 30;
  --cc-z-dropdown: 50;
  --cc-z-modal: 80;
  --cc-z-toast: 90;
}

@media (prefers-reduced-motion: reduce) {
  :root { --cc-duration-fast: 0ms; --cc-duration-base: 0ms; }
}