/* =========================================================
   CIAO ADMIN — DESIGN TOKENS
   Hérités de presentation_ciao_admin.html (Charte UI v1.0)
   ========================================================= */
:root {
  /* Neutrals */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F8F9FA;
  --color-neutral-75:   #F4EFE8;
  --color-neutral-100:  #F1F3F5;
  --color-neutral-200:  #E9ECEF;
  --color-neutral-300:  #DEE2E6;
  --color-neutral-500:  #ADB5BD;
  --color-neutral-600:  #868E96;
  --color-neutral-700:  #495057;
  --color-neutral-900:  #212529;
  --color-neutral-950:  #0E1116;

  /* Brand Swiss Blue */
  --color-brand-50:  #EFF6FF;
  --color-brand-100: #DBEAFE;
  --color-brand-400: #60A5FA;
  --color-brand-500: #0066CC;
  --color-brand-600: #0052A3;
  --color-brand-700: #003F7D;
  --color-brand-800: #002C58;

  /* Sémantiques */
  --color-success-50:  #F0FDF4;
  --color-success-500: #16A34A;
  --color-success-600: #15803D;
  --color-warning-50:  #FFFBEB;
  --color-warning-500: #EAB308;
  --color-warning-600: #D97706;
  --color-danger-50:   #FEF2F2;
  --color-danger-500:  #DC2626;
  --color-danger-600:  #B91C1C;
  --color-info-50:     #F0F9FF;
  --color-info-500:    #0EA5E9;

  /* Catégories charts */
  --color-cat-1: #0066CC;
  --color-cat-2: #9333EA;
  --color-cat-3: #0D9488;
  --color-cat-4: #EA580C;
  --color-cat-5: #65A30D;
  --color-cat-6: #64748B;

  /* Roles sémantiques (light) */
  --bg:                   var(--color-neutral-50);
  --bg-alt:               var(--color-neutral-75);
  --surface:              var(--color-neutral-0);
  --surface-variant:      var(--color-neutral-100);
  --on-surface:           var(--color-neutral-900);
  --on-surface-secondary: var(--color-neutral-700);
  --on-surface-muted:     var(--color-neutral-600);
  --border:               var(--color-neutral-200);
  --border-strong:        var(--color-neutral-300);
  --primary:              var(--color-brand-500);
  --primary-hover:        var(--color-brand-600);
  --on-primary:           var(--color-neutral-0);
  --primary-container:    var(--color-brand-50);
  --focus-ring:           var(--color-brand-500);

  /* Typography
     'Inter Fallback' uses local('Helvetica Neue')/local('Arial') with metric overrides
     (size-adjust, ascent-override, descent-override) so the layout barely shifts
     when Inter-Variable.woff2 finishes downloading. Defined in components.css. */
  --font-sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', Menlo, Consolas, monospace;

  /* Spacings 8pt grid */
  --space-1:  4px;
  --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;

  /* Radius */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 9999px;

  /* Elevation */
  --elev-1: 0 1px 2px rgba(15,23,42,0.04), 0 1px 1px rgba(15,23,42,0.03);
  --elev-2: 0 2px 4px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --elev-3: 0 4px 8px rgba(15,23,42,0.08), 0 2px 4px rgba(15,23,42,0.05);
  --elev-4: 0 8px 16px rgba(15,23,42,0.10), 0 4px 6px rgba(15,23,42,0.06);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);

  /* Layout */
  --container-max: 1280px;
  --container-wide: 1440px;
  --topbar-h: 64px;

  /* Breakpoints (info — utiliser dans @media) */
  --bp-xs:  480px;
  --bp-sm:  768px;
  --bp-md: 1024px;
  --bp-lg: 1280px;
  --bp-xl: 1536px;
}

/* Dark theme (auto + override via [data-theme="dark"]) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:                   #0E1116;
    --bg-alt:               #161B22;
    --surface:              #1B2129;
    --surface-variant:      #232A33;
    --on-surface:           #E8ECF1;
    --on-surface-secondary: #B7BFC9;
    --on-surface-muted:     #8893A0;
    --border:               #2A323C;
    --border-strong:        #3A4350;
    --primary:              var(--color-brand-400);
    --primary-hover:        #93C5FD;
    --on-primary:           #0E1116;
    --primary-container:    rgba(96,165,250,0.15);
    --elev-1: 0 1px 2px rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.3);
    --elev-2: 0 2px 4px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.35);
    --elev-3: 0 4px 8px rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.4);
    --elev-4: 0 8px 16px rgba(0,0,0,0.7), 0 4px 6px rgba(0,0,0,0.5);
  }
}

[data-theme="dark"] {
  --bg:                   #0E1116;
  --bg-alt:               #161B22;
  --surface:              #1B2129;
  --surface-variant:      #232A33;
  --on-surface:           #E8ECF1;
  --on-surface-secondary: #B7BFC9;
  --on-surface-muted:     #8893A0;
  --border:               #2A323C;
  --border-strong:        #3A4350;
  --primary:              var(--color-brand-400);
  --primary-hover:        #93C5FD;
  --on-primary:           #0E1116;
  --primary-container:    rgba(96,165,250,0.15);
  --elev-1: 0 1px 2px rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.3);
  --elev-2: 0 2px 4px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.35);
  --elev-3: 0 4px 8px rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.4);
  --elev-4: 0 8px 16px rgba(0,0,0,0.7), 0 4px 6px rgba(0,0,0,0.5);
}