/* ============================================================
   ui-tokens.css
   Design tokens Gruvbox Seventies — dark (par défaut) + light.
   Sombre délavé (pas noir intense) / gris clair usé (pas blanc pur).
   ============================================================ */

:root,
[data-theme="dark"] {
  /* Couches de fond — sombre délavé, brun-gris chaud */
  --bg-0: #221c17;          /* niveau le plus profond (rare) */
  --bg-1: #2a231d;          /* fond app */
  --bg-2: #322a23;          /* panneaux */
  --bg-3: #3c332a;          /* cartes */
  --bg-4: #4a4035;          /* hover */
  --bg-5: #5a4f43;          /* press / actif */

  /* Surfaces translucides */
  --surf-glass: rgba(50, 42, 35, 0.72);
  --surf-glass-strong: rgba(50, 42, 35, 0.92);
  --surf-glass-soft: rgba(50, 42, 35, 0.42);

  /* Bordures */
  --border-1: rgba(168, 153, 132, 0.18);
  --border-2: rgba(168, 153, 132, 0.32);
  --border-3: rgba(168, 153, 132, 0.55);

  /* Texte */
  --ink-1: #f2e5c7;         /* cream principal */
  --ink-2: #d5c4a1;         /* secondaire */
  --ink-3: #a89984;         /* labels / hints */
  --ink-4: #7c6f64;         /* désactivé */

  /* Accent orange seventies */
  --accent: #fe8019;
  --accent-soft: #d65d0e;
  --accent-glow: rgba(254, 128, 25, 0.35);
  --accent-tint: rgba(254, 128, 25, 0.12);

  /* Statuts */
  --ok: #4dbb26;
  --ok-glow: rgba(77, 187, 38, 0.45);
  --warn: #fabd2f;
  --warn-glow: rgba(250, 189, 47, 0.45);
  --err: #fb4934;
  --err-glow: rgba(251, 73, 52, 0.4);
  --info: #83a598;
  --info-glow: rgba(131, 165, 152, 0.4);

  /* Couleurs additionnelles (datavis, badges, catégories) */
  --blue: #3db0d1;
  --blue-glow: rgba(61, 176, 209, 0.45);
  --purple: #c882c8;
  --purple-glow: rgba(200, 130, 200, 0.45);

  /* Ombres */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.45);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.55);
  --shadow-press: inset 0 2px 4px rgba(0,0,0,0.5);

  /* Relief 3D pour tuiles : highlight haut + ombre bas + ombre portée */
  --tile-3d:
    inset 0 1px 0 rgba(255, 230, 180, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(0, 0, 0, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 8px 18px rgba(0, 0, 0, 0.5);
  --tile-3d-strong:
    inset 0 1px 0 rgba(255, 230, 180, 0.18),
    inset 0 -2px 0 rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(0, 0, 0, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.5),
    0 14px 28px rgba(0, 0, 0, 0.55);

  /* Polices */
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-terminal: 'Share Tech Mono', 'VT323', 'Courier New', monospace;
}

[data-theme="light"] {
  /* Gris clair usé, légèrement chaud (pas blanc pur) */
  --bg-0: #b8b2a3;
  --bg-1: #d5d0c5;
  --bg-2: #dcd7cc;
  --bg-3: #e3ded3;
  --bg-4: #ccc6b8;
  --bg-5: #bdb6a7;

  --surf-glass: rgba(220, 215, 204, 0.72);
  --surf-glass-strong: rgba(220, 215, 204, 0.94);
  --surf-glass-soft: rgba(220, 215, 204, 0.42);

  --border-1: rgba(60, 56, 54, 0.15);
  --border-2: rgba(60, 56, 54, 0.28);
  --border-3: rgba(60, 56, 54, 0.5);

  --ink-1: #28241f;
  --ink-2: #3c3836;
  --ink-3: #5a544c;
  --ink-4: #8a8278;

  --accent: #af3a03;
  --accent-soft: #d65d0e;
  --accent-glow: rgba(175, 58, 3, 0.28);
  --accent-tint: rgba(175, 58, 3, 0.08);

  --ok: #3c911c;
  --ok-glow: rgba(60, 145, 28, 0.32);
  --warn: #b57614;
  --warn-glow: rgba(181, 118, 20, 0.35);
  --err: #9d0006;
  --err-glow: rgba(157, 0, 6, 0.3);
  --info: #427b58;
  --info-glow: rgba(66, 123, 88, 0.3);

  /* Couleurs additionnelles (datavis, badges, catégories) */
  --blue: #2d82a3;
  --blue-glow: rgba(45, 130, 163, 0.32);
  --purple: #8c468c;
  --purple-glow: rgba(140, 70, 140, 0.32);

  --shadow-1: 0 1px 2px rgba(40,30,20,0.12);
  --shadow-2: 0 4px 12px rgba(40,30,20,0.15);
  --shadow-3: 0 12px 32px rgba(40,30,20,0.2);
  --shadow-press: inset 0 2px 4px rgba(40,30,20,0.18);

  /* Relief light : highlight haut blanc cassé + ombre marquée */
  --tile-3d:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(60, 50, 40, 0.18),
    0 1px 0 rgba(60, 50, 40, 0.1),
    0 2px 4px rgba(60, 50, 40, 0.12),
    0 8px 18px rgba(60, 50, 40, 0.18);
  --tile-3d-strong:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -2px 0 rgba(60, 50, 40, 0.22),
    0 1px 0 rgba(60, 50, 40, 0.15),
    0 4px 8px rgba(60, 50, 40, 0.18),
    0 14px 28px rgba(60, 50, 40, 0.22);
}

/* ============================================================
   Reset minimal + base typo
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
}

.mono     { font-family: var(--font-mono); }
.terminal { font-family: var(--font-terminal); letter-spacing: 0.02em; }
.label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ============================================================
   Surfaces — relief 3D marqué, AUCUN effet hover
   ============================================================ */
.glass {
  background: var(--surf-glass);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--border-2);
  box-shadow: var(--tile-3d);
}
.glass-strong {
  background: var(--surf-glass-strong);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--border-3);
  box-shadow: var(--tile-3d-strong);
}

/* Élément cliquable : pas de hover, mais réelle pression 3D au clic */
.interactive {
  cursor: pointer;
  transition: transform .04s ease-out, box-shadow .04s, background .04s;
  transform: translateY(0);
}
.interactive:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-press) !important;
  filter: brightness(0.92);
}

/* Scrollbar custom */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--accent-soft); }