/* ============================================================================
   tokens.css — the ONLY place literal values live.
   Layers app-shell + scale tokens on top of the synced design system
   (assets/ds/_ds_bundle.css provides the semantic theme tokens:
   --background, --card, --primary, --sidebar, --border, --radius, --chart-*,
   in :root for light and .dark for dark). Everything else references these.
   ============================================================================ */

:root {
  /* ---- Brand color (overrides the synced DS primary; survives re-sync) ----- */
  --primary: #0f6c3d;
  --primary-dark: #0b5230;
  --primary-light: #1d9257;
  --primary-muted: #94d1b3;
  --primary-subtle: #f0f8f4;
  --sidebar-primary: #0f6c3d;
  --chart-1: #0f6c3d;

  /* ---- Chart series 1 -----------------------------------------------------
     Decoupled from --chart-1 on purpose: graphs use this teal, while
     --chart-1 stays brand green for the KPI icon chips (.kpi-icon.tone-primary)
     and table avatars (.avatar-sm.tone-primary).
     Must stay a plain hex — shell.js alpha() parses it to build chart fills. */
  --chart-series-1: #008080;

  /* ---- Brand gradient (primary buttons) ----------------------------------
     The two brand stops are literals here (tokens.css is the only place
     literals live); the hover variant deepens both stops toward
     --primary-dark so it stays in-family without new literals. */
  --gradient-primary-from: #0f6c3d;
  --gradient-primary-to:   #19ae63;
  --gradient-primary: linear-gradient(135deg, var(--gradient-primary-from), var(--gradient-primary-to));
  --gradient-primary-hover: linear-gradient(
    135deg,
    color-mix(in srgb, var(--gradient-primary-from) 86%, var(--primary-dark)),
    color-mix(in srgb, var(--gradient-primary-to) 86%, var(--primary-dark))
  );

  /* ---- Type ---------------------------------------------------------------- */
  --font-body: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Geist", ui-sans-serif, system-ui, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2rem;

  --leading-tight: 1.2;
  --leading-normal: 1.5;

  /* ---- Spacing scale (4px base) ------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  /* ---- Radii (derived from DS --radius) ----------------------------------- */
  --radius-sm: calc(var(--radius) * 0.5);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-pill: 999px;

  /* ---- Elevation ---------------------------------------------------------- */
  --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.06);
  --shadow-md: 0 2px 8px -1px rgb(15 23 42 / 0.08), 0 1px 3px -1px rgb(15 23 42 / 0.06);
  --shadow-lg: 0 12px 32px -8px rgb(15 23 42 / 0.16);

  /* ---- App-shell layout --------------------------------------------------- */
  --sidebar-width: 248px;
  --sidebar-width-collapsed: 72px;
  --topbar-height: 64px;
  --footer-height: 52px;
  --content-max: 1440px;

  /* ---- Z-index ------------------------------------------------------------ */
  --z-sidebar: 40;
  --z-topbar: 50;
  --z-dropdown: 60;
  --z-overlay: 70;

  /* ---- Motion ------------------------------------------------------------- */
  --transition-fast: 140ms ease;
  --transition-base: 220ms ease;

  /* ---- Scrim overlay (media hover, modals) -------------------------------- */
  --overlay: rgb(15 23 42 / 0.55);

  /* ---- Semantic status surfaces (tinted, theme-aware via color-mix) -------- */
  --success: var(--safe);
  --success-subtle: color-mix(in srgb, var(--safe) 14%, transparent);
  --info-subtle: color-mix(in srgb, var(--info) 14%, transparent);
  --warn-subtle: color-mix(in srgb, var(--warn) 16%, transparent);
  --danger: var(--destructive);
  --danger-subtle: color-mix(in srgb, var(--destructive) 14%, transparent);
  --primary-tint: color-mix(in srgb, var(--primary) 12%, transparent);
}

.dark {
  /* Brighter green in dark mode so primary text/accents keep contrast */
  --primary: #1ca566;
  --primary-dark: #158550;
  --primary-light: #3dbd7d;
  --primary-muted: #2a5c44;
  --primary-subtle: #122b1e;
  --sidebar-primary: #1ca566;
  --chart-1: #1ca566;
  /* Brightened teal so chart lines stay legible on the dark background,
     mirroring how --chart-1 brightens. Plain hex (see note in :root). */
  --chart-series-1: #389c9c;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
  --shadow-md: 0 2px 10px -1px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 16px 40px -10px rgb(0 0 0 / 0.6);
}