/* =====================================================================
   Mes finances · Design tokens (Pulse v2)
   Repris de design-handoff/project/tokens.css. Sombre indigo, Inter.
   ===================================================================== */

/* ---------- Font faces ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---------- Surfaces ---------- */
  --surface-0: #0D1018;
  --surface-1: #161A22;
  --surface-2: #1C2029;
  --surface-3: #272C37;
  --surface-4: #323845;

  /* Legacy aliases */
  --bg-0: var(--surface-0);
  --bg-1: var(--surface-1);
  --bg-2: var(--surface-1);
  --bg-3: var(--surface-2);
  --bg-4: var(--surface-3);

  /* ---------- Foreground ---------- */
  --fg-1: #F3F4F6;
  --fg-2: #B3B8C2;
  --fg-3: #7A8291;
  --fg-4: #4A5060;
  --fg-inv: #0F1115;

  /* ---------- Borders ---------- */
  --border-1: rgba(255,255,255,0.07);
  --border-2: rgba(255,255,255,0.11);
  --border-3: rgba(255,255,255,0.18);

  /* ---------- Accent (cool indigo) ---------- */
  --accent:        #8FA8FF;
  --accent-soft:   rgba(143,168,255,0.10);
  --accent-glow:   rgba(143,168,255,0.18);
  --blue-300: #B5C5FF;
  --blue-400: #8FA8FF;
  --blue-500: #8FA8FF;
  --blue-600: #6F8AE8;

  /* ---------- Semantic ---------- */
  --cash:  #6EE7A7;
  --hp:    #FB7185;
  --xp:    #FBBF24;
  --vip:   #C4B5FD;
  --glow:  #8FA8FF;

  /* ---------- Typography ---------- */
  --font-display: 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px;
  --fs-18: 18px; --fs-20: 20px; --fs-22: 22px; --fs-28: 28px;

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;

  /* ---------- Spacing ---------- */
  --space-1: 4px; --space-2: 6px; --space-3: 8px; --space-4: 10px;
  --space-5: 12px; --space-6: 14px; --space-7: 16px; --space-8: 18px;
  --space-9: 20px; --space-10: 22px; --space-12: 24px; --space-14: 28px;
  --space-16: 32px; --space-18: 36px;

  /* Espace entre les grandes sections d'une vue */
  --gap-section: 22px;

  /* ---------- Radii ---------- */
  --r-1: 4px; --r-2: 6px; --r-3: 7px; --r-4: 8px; --r-5: 10px;
  --r-6: 12px; --r-7: 14px; --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 24px 48px rgba(0,0,0,0.5);
  --shadow-lg: 0 24px 48px rgba(0,0,0,0.45);
  --shadow-window: 0 50px 100px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.6), 0 0 80px rgba(143,168,255,0.04);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   120ms;
  --dur-base:   160ms;
  --dur-slow:   220ms;
  --dur-page:   260ms;

  --ambient:
    radial-gradient(ellipse 900px 500px at 85% -5%, rgba(143,168,255,0.07), transparent 60%),
    radial-gradient(ellipse 700px 400px at 5% 110%, rgba(110,231,167,0.04), transparent 60%);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--surface-0);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
}
button, input, select { font-family: var(--font-body); }
a { color: inherit; text-decoration: none; }

/* ---------- Semantic typography ---------- */
h1, .h1 { font-family: var(--font-display); font-size: var(--fs-22); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-snug); color: var(--fg-1); margin: 0; }
h2, .h2 { font-family: var(--font-display); font-size: var(--fs-20); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-snug); color: var(--fg-1); margin: 0; }
h3, .h3 { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--fg-1); margin: 0; }
.kpi-value { font-size: var(--fs-28); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }
p, .body { font-size: var(--fs-13); color: var(--fg-2); line-height: 1.5; }
.body-sm { font-size: var(--fs-12); color: var(--fg-3); }
.label { font-size: var(--fs-11); font-weight: var(--fw-medium); color: var(--fg-3); }
.code, code { font-family: var(--font-mono); font-size: var(--fs-12); }
.numeric { font-variant-numeric: tabular-nums; }

/* ---------- Live pulse ---------- */
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50% { box-shadow: 0 0 0 4px transparent; opacity: 0.6; }
}
.live-dot { animation: livePulse 2s ease-in-out infinite; }

/* ---------- Animations utilisées par les vues / modales ---------- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 800ms linear infinite; }
@keyframes pulse { 0%, 100% { background-position: 0% 0; } 50% { background-position: -100% 0; } }

/* ---------- Grilles responsives (reprises de la maquette) ---------- */
@container (max-width: 880px) {
  .resp { grid-template-columns: 1fr !important; }
  .resp2 { grid-template-columns: repeat(2, 1fr) !important; }
}
@container (max-width: 560px) {
  .resp2 { grid-template-columns: 1fr !important; }
  .tx-grid { grid-template-columns: 40px 1fr auto !important; }
  .tx-acc { display: none !important; }
}

/* ---------- Barre d'onglets mobile (cachée par défaut) ---------- */
.mobile-tabbar { display: none; }

/* ---------- Responsive: bascule mobile sous 640px ---------- */
@media (max-width: 640px) {
  .app-shell { grid-template-columns: 1fr !important; }
  .app-sidebar { display: none !important; }
  .app-body { padding: 14px 13px 88px !important; }
  .mobile-tabbar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
    background: var(--surface-0);
    border-top: 1px solid var(--border-1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .app-shell main > div:first-child { padding: 0 14px !important; }
}

/* ---------- Custom scrollbar ---------- */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 10px; border: 2px solid var(--surface-0); }
*::-webkit-scrollbar-thumb:hover { background: var(--surface-4); }