/*
 * ============================================================
 * LILABS DESIGN SYSTEM — tokens.css
 * Version : 1.0.0 — 2026-04-07
 * Source de vérité unique. Ne pas dupliquer ces valeurs.
 * Charger en premier dans tout fichier HTML du repo :
 *   <link rel="stylesheet" href="/assets/tokens.css">
 * ============================================================
 */


/* ────────────────────────────────────────────────────────────
 * 1. NEUTRALS — échelle 9 tons
 * ──────────────────────────────────────────────────────────── */

:root {
  --n100: #F3F4F5;
  --n200: #E8EAEC;
  --n300: #D8DBDF;
  --n400: #B8BCC2;
  --n500: #878D94;
  --n600: #616364;
  --n700: #3E4144;
  --n800: #26292C;
  --n900: #171A1D;
}


/* ────────────────────────────────────────────────────────────
 * 2. TOKENS SÉMANTIQUES — light mode (défaut)
 * ──────────────────────────────────────────────────────────── */

:root {
  --bg:           var(--n100);
  --bg-raised:    #FFFFFF;
  --fg:           var(--n900);
  --muted:        var(--n500);
  --muted-2:      var(--n400);
  --border:       var(--n300);
  --border-row:   var(--n200);
  --surface:      var(--n200);
  --surface-hover:var(--n300);
}


/* ────────────────────────────────────────────────────────────
 * 3. TOKENS SÉMANTIQUES — dark mode
 * ──────────────────────────────────────────────────────────── */

[data-theme="dark"] {
  --bg:           var(--n900);
  --bg-raised:    var(--n800);
  --fg:           var(--n100);
  --muted:        var(--n500);
  --muted-2:      var(--n600);
  --border:       var(--n700);
  --border-row:   var(--n800);
  --surface:      var(--n800);
  --surface-hover:var(--n700);
}


/* ────────────────────────────────────────────────────────────
 * 4. COULEURS PRODUIT — identiques light + dark
 * ──────────────────────────────────────────────────────────── */

:root {
  --predikt:  #7B5EA7;   /* Violet — scoring & intelligence */
  --bookr:    #3DDC97;   /* Mint   — booking management     */
  --gigatlas: #F4533A;   /* Coral  — data pipeline          */
  --myroster: #F5E642;   /* Gold   — agent roster           */

  /* Alias sémantique — à override localement si besoin */
  --pc: var(--predikt);
}


/* ────────────────────────────────────────────────────────────
 * 5. ACCENT SWISS — immuable, jamais overridé
 * ──────────────────────────────────────────────────────────── */

:root {
  --red: #E3000F;   /* Swiss red — accent structurel uniquement */
}


/* ────────────────────────────────────────────────────────────
 * 6. TYPOGRAPHIE
 * ──────────────────────────────────────────────────────────── */

:root {
  /* Familles */
  --font-sans:  'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:  'IBM Plex Mono', 'Courier New', monospace;

  /* Scale */
  --text-xs:    9px;
  --text-sm:    11px;
  --text-base:  13px;
  --text-md:    16px;

  /* Display — fluid, à composer avec clamp() inline */
  /* Usage : font-size: clamp(var(--display-min), 9vw, var(--display-max)) */
  --display-min: 48px;
  --display-max: 128px;

  /* Weights */
  --weight-regular: 400;
  --weight-bold:    700;
  --weight-black:   900;

  /* Tracking */
  --tracking-tight:  -0.04em;   /* display — titres massifs    */
  --tracking-normal:  0em;
  --tracking-wide:    0.1em;    /* wordmark, nav               */
  --tracking-wider:   0.15em;   /* labels, badges              */
  --tracking-widest:  0.2em;    /* micro-labels, footers       */

  /* Line heights */
  --leading-none:   0.88;   /* display massif                  */
  --leading-tight:  1.1;    /* titres section                  */
  --leading-base:   1.5;    /* corps de texte                  */
  --leading-loose:  1.7;    /* prose longue                    */
}


/* ────────────────────────────────────────────────────────────
 * 7. ESPACEMENT — échelle 4px
 * ──────────────────────────────────────────────────────────── */

:root {
  --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;
}

/* Gutter layout */
:root {
  --gutter: 40px;       /* padding horizontal des sections */
  --gutter-sm: 20px;    /* mobile */
  --max-width: 1440px;
}


/* ────────────────────────────────────────────────────────────
 * 8. GRILLE — 12 colonnes
 * ──────────────────────────────────────────────────────────── */

:root {
  --grid-cols: 12;
  --grid-gap:  0px;     /* Swiss style : pas de gap, des borders */
}


/* ────────────────────────────────────────────────────────────
 * 9. BORDURES — épaisseurs sémantiques
 * ──────────────────────────────────────────────────────────── */

:root {
  --rule-heavy:  3px;   /* accent fort, section hero              */
  --rule-main:   2px;   /* règle principale, header/footer        */
  --rule-light:  1px;   /* séparation standard entre sections     */
  --rule-ghost:  0.5px; /* grille overlay, éléments secondaires   */
}


/* ────────────────────────────────────────────────────────────
 * 10. MOTION
 * ──────────────────────────────────────────────────────────── */

:root {
  --ease:        cubic-bezier(.19, 1, .22, 1);   /* Sónar — expo out    */
  --ease-in:     cubic-bezier(.55, 0, 1, .45);   /* entrées             */
  --ease-linear: linear;

  --duration-micro:  120ms;   /* hover, focus rings              */
  --duration-fast:   200ms;   /* micro-interactions              */
  --duration-base:   400ms;   /* transitions de composants       */
  --duration-slow:   600ms;   /* transitions de sections         */
  --duration-enter:  800ms;   /* animations d'entrée page        */
}


/* ────────────────────────────────────────────────────────────
 * 11. RÈGLES GLOBALES — fondamentales, jamais overridées
 * ──────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-radius: 0 !important;   /* Swiss style — zéro arrondi */
}

html {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--fg);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a, button, input, select, textarea,
[role="button"], .switch, .btn {
  cursor: crosshair;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--red);
  color: #ffffff;
}

img, svg {
  display: block;
  max-width: 100%;
}

/* Données chiffrées — monospace */
.mono,
.value,
.data,
td.num,
.value-cell {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}


/* ────────────────────────────────────────────────────────────
 * 12. COMPOSANTS DE BASE — réutilisables partout
 * ──────────────────────────────────────────────────────────── */

/* --- Label --- */
.label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Badge produit --- */
.badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid currentColor;
  color: var(--muted);
}

/* --- Règle horizontale --- */
.rule        { width: 100%; height: var(--rule-light); background: var(--fg); }
.rule--main  { height: var(--rule-main); }
.rule--heavy { height: var(--rule-heavy); }

/* --- Stat card (BP / pitch / landing) --- */
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.stat__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--muted);
}
.stat__value {
  font-family: var(--font-mono);
  font-size: clamp(24px, 4vw, 40px);
  font-weight: var(--weight-black);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
}
.stat__unit {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Product color borders --- */
.border-predikt  { border-color: var(--predikt); }
.border-bookr    { border-color: var(--bookr); }
.border-gigatlas { border-color: var(--gigatlas); }
.border-myroster { border-color: var(--myroster); }

/* --- Btn --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  border: 1px solid var(--fg);
  background: transparent;
  color: var(--fg);
  transition: background var(--duration-fast) var(--ease),
              color    var(--duration-fast) var(--ease);
}
.btn:hover {
  background: var(--fg);
  color: var(--bg);
}
.btn--red {
  border-color: var(--red);
  color: var(--red);
}
.btn--red:hover {
  background: var(--red);
  color: #ffffff;
}

/* --- Theme toggle --- */
.theme-toggle {
  width: 32px;
  height: 18px;
  background: var(--border);
  border: 1px solid var(--border);
  position: relative;
  transition: background var(--duration-fast) var(--ease);
}
.theme-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: var(--fg);
  transition: transform var(--duration-fast) var(--ease),
              background var(--duration-fast) var(--ease);
}
[data-theme="dark"] .theme-toggle::after {
  transform: translateX(14px);
}


/* ────────────────────────────────────────────────────────────
 * 13. LAYOUT UTILITAIRES
 * ──────────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
}

/* Sidebar layout (BP) */
.layout-sidebar {
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 100vh;
}

/* Stack */
.stack { display: flex; flex-direction: column; }
.stack--gap-1 { gap: var(--space-1); }
.stack--gap-2 { gap: var(--space-2); }
.stack--gap-4 { gap: var(--space-4); }
.stack--gap-6 { gap: var(--space-6); }
.stack--gap-8 { gap: var(--space-8); }

/* Split */
.split {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


/* ────────────────────────────────────────────────────────────
 * 14. GRILLE OVERLAY (debug / easter egg touche G)
 * ──────────────────────────────────────────────────────────── */

.grid-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease);
}
.grid-overlay.is-visible { opacity: 1; }
.grid-overlay__col {
  border-right: var(--rule-ghost) solid rgba(227, 0, 15, 0.2);
}
.grid-overlay__col:last-child { border-right: none; }


/* ────────────────────────────────────────────────────────────
 * 15. RESPONSIVE — breakpoints
 * ──────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  :root { --gutter: 32px; }
}

@media (max-width: 768px) {
  :root {
    --gutter: var(--gutter-sm);
    --display-min: 40px;
    --display-max: 80px;
  }
  .grid-12 { grid-template-columns: 1fr; }
  .layout-sidebar { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  :root {
    --display-min: 32px;
    --display-max: 64px;
  }
}


/* ────────────────────────────────────────────────────────────
 * 16. PRINT
 * ──────────────────────────────────────────────────────────── */

@media print {
  :root {
    --bg: #ffffff;
    --fg: #000000;
    --muted: #444444;
    --border: #cccccc;
  }
  .theme-toggle,
  .grid-overlay,
  nav { display: none; }
}