/* PORTIS Design Tokens
 * Layout, type scale, spacing, radii, shadows.
 * These are theme-agnostic — they never change between palettes.
 * Color tokens live in portis-themes.css.
 */

:root {
  /* Type families */
  --font-display: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 14px;
  --fs-md:   15px;
  --fs-lg:   17px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  32px;
  --fs-4xl:  44px;

  /* Spacing — 4px grid */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 80px;

  /* Radii */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Borders */
  --bw-1: 1px;
  --bw-2: 2px;

  /* Shadows — adjusted per theme via opacity/color */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);

  /* Shell dimensions */
  --rail-w-collapsed: 64px;
  --rail-w-expanded:  240px;
  --topbar-h:         60px;
  --content-max:      1480px;

  /* Density (overridable on [data-density="compact"]) */
  --row-h:        40px;
  --card-pad:     20px;
  --card-pad-tight: 14px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 320ms;
}

[data-density="compact"] {
  --row-h: 32px;
  --card-pad: 14px;
  --card-pad-tight: 10px;
  --fs-base: 13px;
  --fs-md: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv11', 'ss01';
}
.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }