/* Jetons de design : couleurs, typographie, espacements. Thème clair par défaut, sombre via le système ou le réglage. */
:root {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;

  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: clamp(2rem, 1.2rem + 3vw, 3.25rem);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;

  --header-h: 60px;
  --sidebar-w: 252px;
  --sidebar-w-compact: 72px;
  --content-max: 1180px;

  /* Couleurs de marque */
  --brand: #049FD9;          /* bleu Cisco */
  --navy: #0D274D;           /* bleu nuit */

  /* Thème clair */
  --bg: #F3F6FA;
  --surface: #FFFFFF;
  --surface-2: #F0F4F9;
  --surface-3: #E5ECF4;
  --border: #DCE3EC;
  --border-strong: #C3CEDB;
  --text: #13213A;
  --text-2: #475771;
  --text-3: #5B6980;         /* contraste AA (4,5:1) aussi sur les fonds teintés */
  --primary: #076CA6;        /* bleu Cisco assombri pour le contraste AA, y compris sur --primary-soft */
  --primary-strong: #055C8E;
  --primary-soft: #E3F2FA;
  --on-primary: #FFFFFF;
  --success: #13784A;
  --success-soft: #DFF3E8;
  --warning: #935E00;
  --warning-soft: #FCEFD6;
  --danger: #C02F3A;
  --danger-soft: #FBE3E5;
  /* Texte posé sur un fond --success, --danger ou --warning plein */
  --on-success: #FFFFFF;
  --on-danger: #FFFFFF;
  --on-warning: #FFFFFF;
  --star: #B08400;           /* étoile gagnée (scénarios) : 3:1 au moins sur le fond */
  --focus: #076CA6;

  --hero-bg: linear-gradient(135deg, #0D274D 0%, #0B3B6E 55%, #075E97 100%);
  --hero-text: #FFFFFF;

  /* Couleurs des domaines de l'examen */
  --d1: #0A8FCC;
  --d2: #7151D1;
  --d3: #D9692B;
  --d4: #1B9A7F;
  --d5: #CF3D62;
  --d6: #B58A10;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 2px 8px rgba(16, 24, 40, .06);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, .14);

  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A111E;
    --surface: #111B2C;
    --surface-2: #162236;
    --surface-3: #1D2B42;
    --border: #23324A;
    --border-strong: #31445F;
    --text: #E7EDF6;
    --text-2: #A9B7CB;
    --text-3: #8A9AB1;
    --primary: #3DB6EC;
    --primary-strong: #6CCBF3;
    --primary-soft: #0F2D45;
    --on-primary: #04131F;
    --success: #4CC38A;
    --success-soft: #0F2E21;
    --warning: #E3AA45;
    --warning-soft: #33260C;
    --danger: #F06C76;
    --danger-soft: #3A1519;
    --on-success: #04131F;
    --on-danger: #04131F;
    --on-warning: #04131F;
    --star: #E0A800;
    --focus: #6CCBF3;
    --hero-bg: linear-gradient(135deg, #0B1B33 0%, #0B2D52 55%, #08466F 100%);
    --d1: #3DB6EC;
    --d2: #9E86F0;
    --d3: #F08A4F;
    --d4: #3CC4A5;
    --d5: #F06A8C;
    --d6: #E2B93B;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 10px rgba(0, 0, 0, .25);
    --shadow-lg: 0 14px 36px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0A111E;
  --surface: #111B2C;
  --surface-2: #162236;
  --surface-3: #1D2B42;
  --border: #23324A;
  --border-strong: #31445F;
  --text: #E7EDF6;
  --text-2: #A9B7CB;
  --text-3: #8A9AB1;
  --primary: #3DB6EC;
  --primary-strong: #6CCBF3;
  --primary-soft: #0F2D45;
  --on-primary: #04131F;
  --success: #4CC38A;
  --success-soft: #0F2E21;
  --warning: #E3AA45;
  --warning-soft: #33260C;
  --danger: #F06C76;
  --danger-soft: #3A1519;
  --on-success: #04131F;
  --on-danger: #04131F;
  --on-warning: #04131F;
  --star: #E0A800;
  --focus: #6CCBF3;
  --hero-bg: linear-gradient(135deg, #0B1B33 0%, #0B2D52 55%, #08466F 100%);
  --d1: #3DB6EC;
  --d2: #9E86F0;
  --d3: #F08A4F;
  --d4: #3CC4A5;
  --d5: #F06A8C;
  --d6: #E2B93B;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 10px rgba(0, 0, 0, .25);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, .5);
  color-scheme: dark;
}