/* =========================================================
   Dashboard DSG — Design Tokens
   Zinc base · Inter + JetBrains Mono · dark primary
   ========================================================= */

:root {
  /* ---- Surfaces (dark, default) ---- */
  --bg-app:       #09090b;  /* zinc-950 — app background */
  --bg-surface:   #18181b;  /* zinc-900 — cards, sidebar */
  --bg-elevated:  #1f1f23;  /* zinc-875 — hero/elevated cards */
  --bg-inset:     #0e0e10;  /* inset wells, inputs on surface */
  --bg-hover:     #27272a;  /* zinc-800 — hover bg */
  --bg-active:    #2e2e33;  /* pressed bg */

  /* ---- Borders ---- */
  --border-subtle:   #1f1f23;
  --border-default:  #27272a;  /* zinc-800 */
  --border-strong:   #3f3f46;  /* zinc-700 */
  --border-focus:    #52525b;

  /* ---- Text ---- */
  --text-primary:    #fafafa;  /* zinc-50 */
  --text-secondary:  #a1a1aa;  /* zinc-400 */
  --text-tertiary:   #71717a;  /* zinc-500 */
  --text-disabled:   #52525b;  /* zinc-600 */

  /* ---- Semantic (solid) ---- */
  --green:  #22c55e;
  --red:    #ef4444;
  --amber:  #eab308;
  --blue:   #3b82f6;
  --purple: #a855f7;
  --orange: #f97316;
  --pink:   #ec4899;

  /* ---- Semantic tints (14%) — pill bg, anchors ---- */
  --green-tint:  rgb(34 197 94 / .14);
  --red-tint:    rgb(239 68 68 / .14);
  --amber-tint:  rgb(234 179 8 / .14);
  --blue-tint:   rgb(59 130 246 / .14);
  --purple-tint: rgb(168 85 247 / .14);
  --orange-tint: rgb(249 115 22 / .14);

  /* ---- Semantic borders (28%) ---- */
  --green-edge:  rgb(34 197 94 / .28);
  --red-edge:    rgb(239 68 68 / .28);
  --amber-edge:  rgb(234 179 8 / .28);
  --blue-edge:   rgb(59 130 246 / .28);
  --purple-edge: rgb(168 85 247 / .28);

  /* ---- Typography ---- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale (px) */
  --fs-display:  44px;
  --fs-h1:       28px;
  --fs-h2:       20px;
  --fs-h3:       16px;
  --fs-body:     14px;
  --fs-small:    13px;
  --fs-mono:     12.5px;
  --fs-micro:    11px;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.5;

  /* Letter spacing */
  --tr-tight:   -0.02em;
  --tr-normal:  0;
  --tr-wide:    0.04em;
  --tr-wider:   0.08em;

  /* ---- Spacing (4px base) ---- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---- Radius ---- */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-full: 999px;

  /* ---- Shadows (minimal) ---- */
  --sh-0: none;
  --sh-1: 0 1px 0 0 rgb(0 0 0 / .4);
  --sh-2: 0 4px 12px -4px rgb(0 0 0 / .5), 0 1px 0 0 rgb(255 255 255 / .02) inset;
  --sh-pop: 0 16px 48px -12px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .04);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;

  /* ---- Density (tweak) ---- */
  --density-row: 36px;
  --density-gap: 12px;
  --density-card-pad: 20px;

  /* ---- Sidebar widths ---- */
  --sidebar-expanded: 240px;
  --sidebar-collapsed: 56px;
}

/* Compact density */
[data-density="compact"] {
  --density-row: 28px;
  --density-gap: 8px;
  --density-card-pad: 14px;
  --fs-body: 13px;
  --fs-small: 12px;
}

/* Light mode */
[data-theme="light"] {
  --bg-app:       #fafafa;
  --bg-surface:   #ffffff;
  --bg-elevated:  #ffffff;
  --bg-inset:     #f4f4f5;
  --bg-hover:     #f4f4f5;
  --bg-active:    #e4e4e7;

  --border-subtle:   #f4f4f5;
  --border-default:  #e4e4e7;
  --border-strong:   #d4d4d8;
  --border-focus:    #a1a1aa;

  --text-primary:    #18181b;
  --text-secondary:  #52525b;
  --text-tertiary:   #71717a;
  --text-disabled:   #a1a1aa;

  --sh-1: 0 1px 0 0 rgb(0 0 0 / .04);
  --sh-2: 0 4px 12px -4px rgb(0 0 0 / .08), 0 1px 0 0 rgb(0 0 0 / .04);
  --sh-pop: 0 16px 48px -12px rgb(0 0 0 / .18);

  --green-tint:  rgb(34 197 94 / .12);
  --red-tint:    rgb(239 68 68 / .10);
  --amber-tint:  rgb(234 179 8 / .16);
  --blue-tint:   rgb(59 130 246 / .10);
  --purple-tint: rgb(168 85 247 / .10);
  --orange-tint: rgb(249 115 22 / .10);
}