/**
 * ─────────────────────────────────────────────
 *  SPB Git — Personal Git Platform
 * ─────────────────────────────────────────────
 *  Author  : Simon-Pierre Boucher
 *  Contact : contact@spboucher.ai
 *  File    : src/web/assets/css/tokens.css
 *  Purpose : Design tokens v2 — colors, gradients, depth, themes
 *  License : MIT © Simon-Pierre Boucher
 * ─────────────────────────────────────────────
 */

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root,
html[data-theme='dark'] {
  --bg: #0b0e14;
  --bg-glow-1: rgba(79, 140, 255, 0.055);
  --bg-glow-2: rgba(34, 211, 170, 0.04);
  --surface: #11151c;
  --surface-2: #161b24;
  --surface-3: #1b2130;
  --border: #1f2530;
  --border-strong: #2a3242;
  --text: #e6e9ef;
  --text-bright: #f4f6fa;
  --muted: #8b93a3;
  --faint: #5c6474;
  --accent: #4f8cff;
  --accent-hover: #6ea1ff;
  --accent-soft: rgba(79, 140, 255, 0.14);
  --accent-glow: rgba(79, 140, 255, 0.35);
  --accent-2: #22d3aa;
  --accent-2-soft: rgba(34, 211, 170, 0.12);
  --gradient-brand: linear-gradient(120deg, #4f8cff 0%, #22d3aa 100%);
  --gradient-text: linear-gradient(100deg, #e6e9ef 20%, #9db6e8 60%, #4f8cff 100%);
  --danger: #ff5d5d;
  --success: #3fb950;
  --warning: #d29922;
  --add-bg: rgba(63, 185, 80, 0.14);
  --add-bg-strong: rgba(63, 185, 80, 0.28);
  --add-text: #56d364;
  --del-bg: rgba(248, 81, 73, 0.13);
  --del-bg-strong: rgba(248, 81, 73, 0.28);
  --del-text: #ff7b72;
  --hunk-bg: rgba(79, 140, 255, 0.07);
  --code-bg: #0d1117;
  --code-head: #131922;
  --chip-bg: rgba(79, 140, 255, 0.12);
  --heat-0: #161b24;
  --heat-1: #0e4429;
  --heat-2: #006d32;
  --heat-3: #26a641;
  --heat-4: #39d353;
  --radius: 10px;
  --radius-lg: 14px;
  --font-ui: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 6px 24px -8px rgba(0, 0, 0, 0.55);
  --shadow-card: 0 14px 40px -18px rgba(0, 0, 0, 0.6);
  --ring: 0 0 0 3px rgba(79, 140, 255, 0.32);
  --nav-bg: rgba(11, 14, 20, 0.82);
  color-scheme: dark;
}

html[data-theme='light'] {
  --bg: #f6f8fb;
  --bg-glow-1: rgba(47, 111, 224, 0.05);
  --bg-glow-2: rgba(13, 158, 128, 0.04);
  --surface: #ffffff;
  --surface-2: #f1f4f8;
  --surface-3: #e9edf4;
  --border: #dbe1ea;
  --border-strong: #c3ccd9;
  --text: #1c2330;
  --text-bright: #0d1320;
  --muted: #57606e;
  --faint: #8a93a3;
  --accent: #2f6fe0;
  --accent-hover: #1e5ecf;
  --accent-soft: rgba(47, 111, 224, 0.1);
  --accent-glow: rgba(47, 111, 224, 0.25);
  --accent-2: #0d9e80;
  --accent-2-soft: rgba(13, 158, 128, 0.1);
  --gradient-brand: linear-gradient(120deg, #2f6fe0 0%, #0d9e80 100%);
  --gradient-text: linear-gradient(100deg, #1c2330 20%, #29456f 60%, #2f6fe0 100%);
  --danger: #d33636;
  --success: #1a7f37;
  --warning: #9a6700;
  --add-bg: rgba(26, 127, 55, 0.1);
  --add-bg-strong: rgba(26, 127, 55, 0.22);
  --add-text: #1a7f37;
  --del-bg: rgba(207, 34, 46, 0.09);
  --del-bg-strong: rgba(207, 34, 46, 0.2);
  --del-text: #cf222e;
  --hunk-bg: rgba(47, 111, 224, 0.06);
  --code-bg: #f6f8fa;
  --code-head: #eef1f5;
  --chip-bg: rgba(47, 111, 224, 0.1);
  --heat-0: #ebedf0;
  --heat-1: #9be9a8;
  --heat-2: #40c463;
  --heat-3: #30a14e;
  --heat-4: #216e39;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-2: 0 6px 24px -10px rgba(16, 24, 40, 0.16);
  --shadow-card: 0 14px 40px -20px rgba(16, 24, 40, 0.22);
  --ring: 0 0 0 3px rgba(47, 111, 224, 0.25);
  --nav-bg: rgba(246, 248, 251, 0.85);
  color-scheme: light;
}

/* Shiki dual-theme switch */
html[data-theme='dark'] .shiki,
html[data-theme='dark'] .shiki span {
  color: var(--shiki-dark) !important;
  background-color: transparent !important;
}
html[data-theme='light'] .shiki,
html[data-theme='light'] .shiki span {
  color: var(--shiki-light) !important;
  background-color: transparent !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}