@layer tokens, base, layout, components, utilities;

@layer tokens {
  :root {


    color-scheme: light;


    scrollbar-color: var(--bd2) transparent;
    scrollbar-width: thin;


    /* === Charte 2026 : froide pastel (menthe / lavande / périwinkle) === */
    --bg: #eef1f7;
    --bg2: #ffffff;
    --bg3: #f5f7fb;
    --bg4: #eceef6;


    --bd: rgba(38, 42, 68, 0.08);
    --bd2: rgba(38, 42, 68, 0.14);


    --tx: #232842;
    --tx2: #5f6781;
    --tx3: #9aa1b6;


    --ac: #0d9488;
    --ac2: rgba(13, 148, 136, 0.1);
    --ac3: rgba(13, 148, 136, 0.2);
    /* Triplet RGB de l'accent, pour les rgba() inline des vues. */
    --accent-rgb: 13, 148, 136;


    --ok: #4fc4a1;
    --ok2: rgba(79, 196, 161, 0.12);
    --wr: #f0b955;
    --wr2: rgba(240, 185, 85, 0.16);
    --dn: #ef7a8a;
    --dn2: rgba(239, 122, 138, 0.12);


    /* Palette charts (bento) */
    --chart-1: #0d9488;
    --chart-2: #4fc4a1;
    --chart-3: #5fd0c5;
    --chart-4: #8fb6f2;
    --chart-5: #f0b955;


    --r: 8px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-2xl: 28px;


    --shadow-1: 0 2px 10px rgba(40, 44, 90, 0.06);
    --shadow-2: 0 12px 30px rgba(40, 44, 90, 0.08);
    --shadow-3: 0 24px 60px rgba(40, 44, 90, 0.12);
    --shadow-focus: 0 0 0 3px rgba(107, 114, 239, 0.22);


    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast: 120ms var(--ease);
    --t-base: 200ms var(--ease);
    --t-slow: 320ms var(--ease);


    --font-ui: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;


    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 16px;
    --text-lg: 20px;
    --text-xl: 24px;


    --text-fluid-title: clamp(1.375rem, 1.05rem + 1.4vw, 1.75rem);
    --text-fluid-kpi: clamp(1.625rem, 1.2rem + 1.8vw, 2rem);
    --text-fluid-banner: clamp(1.125rem, 0.95rem + 0.7vw, 1.5rem);


    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-9: 36px;
    --space-10: 40px;
    --space-11: 44px;
    --space-12: 48px;


    --pad-page-x: clamp(1rem, 0.4rem + 2.4vw, 2rem);
    --pad-page-y: clamp(1.25rem, 0.6rem + 2.4vw, 2.5rem);
    --gap-grid: clamp(0.875rem, 0.5rem + 1vw, 1.25rem);


    --max-w-content: 1440px;
    --topbar-h: 56px;
    --tabsbar-h: 44px;
    --mobilenav-h: 60px;


    --bp-sm: 768px;
    --bp-md: 1024px;
    --bp-lg: 1280px;
  }

  .light {
    color-scheme: light;
    scrollbar-color: var(--bd2) transparent;

    --bg: #eef1f7;
    --bg2: #ffffff;
    --bg3: #f5f7fb;
    --bg4: #eceef6;

    --bd: #e3e6f0;
    --bd2: #d4d8e8;

    --tx: #232842;
    --tx2: #5f6781;
    --tx3: #9aa1b6;

    --ac: #0d9488;
    --ac2: rgba(13, 148, 136, 0.1);
    --ac3: rgba(13, 148, 136, 0.2);
    --accent-rgb: 13, 148, 136;

    --ok: #4fc4a1;
    --ok2: rgba(79, 196, 161, 0.12);
    --wr: #f0b955;
    --wr2: rgba(240, 185, 85, 0.18);
    --dn: #ef7a8a;
    --dn2: rgba(239, 122, 138, 0.12);

    --chart-1: #0d9488;
    --chart-2: #4fc4a1;
    --chart-3: #5fd0c5;
    --chart-4: #8fb6f2;
    --chart-5: #f0b955;

    --shadow-1: 0 2px 10px rgba(40, 44, 90, 0.06);
    --shadow-2: 0 12px 30px rgba(40, 44, 90, 0.08);
    --shadow-3: 0 24px 60px rgba(40, 44, 90, 0.12);
    --shadow-focus: 0 0 0 3px rgba(107, 114, 239, 0.22);
  }


  @media (prefers-reduced-motion: reduce) {
    :root {
      --t-fast: 0ms linear;
      --t-base: 0ms linear;
      --t-slow: 0ms linear;
    }
  }
}

@layer base {

  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--bd2);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--tx3);
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-corner {
    background: transparent;
  }


  ::selection {
    background: color-mix(in srgb, var(--ac) 28%, transparent);
    color: var(--tx);
  }
}