/* ============================================================
   tokens.css — Design System Scorelyo DMA
   Palette : NOIR / GRIS / BLANC / ORANGE (orange Pays-Bas).
   Thème clair + sombre (bascule via [data-theme]).
   N'utilisez JAMAIS de valeur en dur → toujours var(--*).
   Fonts self-hostées (RGPD) : Inter + JetBrains Mono.
   ============================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/InterVariable.woff2') format('woff2-variations'),
       url('fonts/InterVariable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('fonts/JetBrainsMonoVariable.woff2') format('woff2-variations'),
       url('fonts/JetBrainsMonoVariable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212;
}

:root {
  /* --- Marque : orange Pays-Bas --- */
  --brand-500: #F26B21;   /* orange principal */
  --brand-600: #DA5A16;
  --brand-700: #B8480F;
  --brand-400: #FF8A45;
  --brand-300: #FFB183;
  --brand-soft: rgba(242, 107, 33, 0.12);

  /* --- Neutres (noir / gris / blanc) --- */
  --gray-0:  #FFFFFF;
  --gray-50: #F7F7F8;
  --gray-100:#EEEEF0;
  --gray-200:#E1E1E5;
  --gray-300:#C9C9CF;
  --gray-400:#9A9AA3;
  --gray-500:#71717A;
  --gray-600:#52525B;
  --gray-700:#3A3A42;
  --gray-800:#26262C;
  --gray-900:#18181B;
  --gray-950:#0E0E11;

  /* --- Spacing (base 4px) --- */
  --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;

  /* --- Radius --- */
  --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-full:9999px;

  /* --- Layout --- */
  --header-height:60px;
  --sidebar-width:248px;
  --sidebar-collapsed:64px;

  /* --- Z-index --- */
  --z-sticky:10; --z-sidebar:40; --z-header:50; --z-overlay:90; --z-modal:100; --z-toast:1000;

  /* --- Typo --- */
  --font-sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  --text-xs:12px; --text-sm:13px; --text-base:14px; --text-lg:16px;
  --text-xl:18px; --text-2xl:22px; --text-3xl:28px; --text-4xl:34px;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --leading-tight:1.25; --leading-normal:1.5;

  /* --- Sémantique --- */
  --success:#16A34A; --warning:#D97706; --danger:#DC2626; --info:#2563EB;
  --success-soft:rgba(22,163,74,.12); --warning-soft:rgba(217,119,6,.12);
  --danger-soft:rgba(220,38,38,.12); --info-soft:rgba(37,99,235,.12);

  /* --- Transitions --- */
  --t-fast:120ms cubic-bezier(.16,1,.3,1);
  --t-base:220ms cubic-bezier(.16,1,.3,1);
  --t-slow:340ms cubic-bezier(.16,1,.3,1);

  --overlay:rgba(14,14,17,.55);
}

/* ============================================================
   THÈME CLAIR (défaut)
   ============================================================ */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --bg-app:      var(--gray-50);
  --bg-surface:  var(--gray-0);
  --bg-elevated: var(--gray-0);
  --bg-sunken:   var(--gray-100);
  --bg-hover:    var(--gray-100);
  --bg-active:   var(--gray-200);

  --border-subtle: var(--gray-200);
  --border-default:var(--gray-300);
  --border-strong: var(--gray-400);

  --text-primary:  var(--gray-900);
  --text-secondary:var(--gray-600);
  --text-tertiary: var(--gray-500);
  --text-inverse:  var(--gray-0);

  --accent:       var(--brand-500);
  --accent-hover: var(--brand-600);
  --accent-text:  #FFFFFF;
  --accent-soft:  var(--brand-soft);

  --sidebar-bg:   var(--gray-900);
  --sidebar-text: var(--gray-300);
  --sidebar-text-active:#FFFFFF;
  --sidebar-hover:rgba(255,255,255,.07);
  --sidebar-active-bg:var(--brand-500);
  --sidebar-border:var(--gray-800);

  --shadow-sm:0 1px 2px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.04);
  --shadow-md:0 4px 12px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.04);
  --shadow-lg:0 12px 28px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.05);
}

/* ============================================================
   THÈME SOMBRE
   ============================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-app:      var(--gray-950);
  --bg-surface:  var(--gray-900);
  --bg-elevated: var(--gray-800);
  --bg-sunken:   #0B0B0E;
  --bg-hover:    rgba(255,255,255,.05);
  --bg-active:   rgba(255,255,255,.09);

  --border-subtle: var(--gray-800);
  --border-default:var(--gray-700);
  --border-strong: var(--gray-600);

  --text-primary:  #F4F4F5;
  --text-secondary:var(--gray-400);
  --text-tertiary: var(--gray-500);
  --text-inverse:  var(--gray-900);

  --accent:       var(--brand-500);
  --accent-hover: var(--brand-400);
  --accent-text:  #FFFFFF;
  --accent-soft:  rgba(242,107,33,.16);

  --sidebar-bg:   #0B0B0E;
  --sidebar-text: var(--gray-400);
  --sidebar-text-active:#FFFFFF;
  --sidebar-hover:rgba(255,255,255,.06);
  --sidebar-active-bg:var(--brand-500);
  --sidebar-border:var(--gray-800);

  --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.04);
  --shadow-md:0 4px 12px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.05);
  --shadow-lg:0 12px 28px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast:0ms; --t-base:0ms; --t-slow:0ms; }
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}