/* ============================================================
   tokens.css — Estudio G404 Business Suite design system
   Colours, type, radii, shadows, motion + the base reset.
   Load FIRST. Every other file only uses these variables.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Shell (dark sidebar, translucent top bar) */
  --sidebar-bg: #0e0c1b;
  --sidebar-bg-2: #16132a;
  --sidebar-text: rgba(255, 255, 255, 0.62);
  --sidebar-text-strong: #ffffff;
  --sidebar-hover: rgba(255, 255, 255, 0.06);
  --sidebar-active: rgba(124, 108, 255, 0.16);
  --topbar-bg: rgba(255, 255, 255, 0.78);
  --topbar-border: rgba(15, 23, 42, 0.06);

  /* Backgrounds */
  --bg-primary: #f3f4f8;   /* page */
  --bg-secondary: #ffffff; /* cards, inputs, modals */
  --bg-subtle: #f8f9fc;    /* table headers, hover rows */

  /* Text */
  --color-primary-text: #0f172a;
  --color-secondary-text: #5b6478;
  --color-muted-text: #98a1b3;

  /* Accent: indigo → violet */
  --color-accent: #5b5bf6;
  --color-accent-hover: #4646e3;
  --color-accent-light: rgba(91, 91, 246, 0.1);
  --color-accent-ring: rgba(91, 91, 246, 0.22);
  --color-accent-2: #9b5cf6;   /* violet end of the gradient */
  --color-glow: #7c6cff;       /* the sidebar's violet glow */
  --gradient-brand: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-2) 100%);

  /* Semantic */
  --color-success: #10b981;
  --color-success-light: #ecfdf5;
  --color-warning: #f59e0b;
  --color-warning-light: #fffbeb;
  --color-danger: #ef4444;
  --color-danger-light: #fef2f2;

  /* Borders & shadows */
  --color-border: #e6e8ef;
  --color-border-strong: #d5d9e3;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 6px 16px -6px rgba(16, 24, 40, 0.10), 0 2px 4px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 24px 48px -16px rgba(16, 24, 40, 0.22);

  /* Radii */
  --radius-sm: 0.5rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.25rem;   /* cards, tables, modals */

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Charts (series in this order) */
  --chart-1: #5b5bf6;
  --chart-2: #22b8cf;
  --chart-3: #f59e0b;
  --chart-4: #10b981;
  --chart-grid: #eef0f5;
  --chart-muted: #c9cde0;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--bg-primary);
  color: var(--color-primary-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; }
h2 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; }
h3 { font-size: 1rem; font-weight: 600; letter-spacing: -0.015em; }

::selection { background: var(--color-accent-ring); }
* { scrollbar-width: thin; scrollbar-color: #cdd2de transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #cdd2de; border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
[hidden] { display: none !important; } /* modals and panels use the hidden attribute */

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }