/* =========================================================================
   SetWise Design System — Colors & Type
   SetWise Dark Pro: a late-night professional DJ preparation tool.
   Dark navy base, cyan/electric-blue accent, subtle indigo/purple for AI.
   ========================================================================= */

@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-Italic-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Backgrounds (darkest → elevated) ---------- */
  --sw-bg-root:        #070B10;   /* app viewport / outside window */
  --sw-bg-app:         #0B0F14;   /* main app background */
  --sw-bg-sidebar:     #08111C;   /* left nav */
  --sw-bg-deep:        #0D141F;   /* deep panel (inspector shadows) */
  --sw-surface-1:      #101722;   /* primary surface (cards) */
  --sw-surface-2:      #131C29;   /* secondary surface (nested) */
  --sw-surface-3:      #182233;   /* elevated surface (hover, active) */
  --sw-surface-input:  #0F1620;   /* inputs & selects */

  /* ---------- Borders ---------- */
  --sw-border-subtle:  #1A2332;   /* default card/table border */
  --sw-border-strong:  #223044;   /* emphasized border */
  --sw-border-active:  #2563EB;   /* focus / active input */
  --sw-border-hover:   #2E7BFF;   /* hover on bordered control */

  /* ---------- Text ---------- */
  --sw-text-primary:   #F3F6FB;   /* titles, table rows, numbers */
  --sw-text-secondary: #A8B3C2;   /* body secondary */
  --sw-text-muted:     #748195;   /* metadata, captions */
  --sw-text-label:     #8E9AAF;   /* uppercase section labels */
  --sw-text-placeholder:#5C6B80;  /* input placeholder */
  --sw-text-on-accent: #FFFFFF;   /* text on blue button */

  /* ---------- Brand / Accents ---------- */
  --sw-blue-500:       #2563EB;   /* primary brand blue */
  --sw-blue-400:       #3B82F6;
  --sw-blue-300:       #60A5FA;
  --sw-blue-600:       #1D4ED8;
  --sw-cyan-500:       #22B8FF;   /* primary cyan accent */
  --sw-cyan-400:       #38D5FF;   /* soft cyan glow */
  --sw-cyan-600:       #0891B2;
  --sw-indigo-500:     #4F46E5;   /* secondary indigo */
  --sw-purple-500:     #8B5CF6;   /* AI / premium accent ONLY */
  --sw-purple-400:     #A78BFA;

  /* ---------- Semantic / States ---------- */
  --sw-success-500:    #22C55E;
  --sw-success-400:    #4ADE80;
  --sw-success-bg:     rgba(34, 197, 94, 0.12);
  --sw-warning-500:    #F59E0B;
  --sw-warning-400:    #FBBF24;
  --sw-warning-bg:     rgba(245, 158, 11, 0.12);
  --sw-error-500:      #EF4444;
  --sw-error-400:      #F87171;
  --sw-error-bg:       rgba(239, 68, 68, 0.12);
  --sw-info-500:       var(--sw-cyan-500);
  --sw-info-bg:        rgba(34, 184, 255, 0.12);

  /* ---------- Glows (use sparingly) ---------- */
  --sw-glow-blue:      0 0 0 1px rgba(37, 99, 235, 0.35), 0 0 24px -6px rgba(37, 99, 235, 0.55);
  --sw-glow-cyan:      0 0 0 1px rgba(34, 184, 255, 0.30), 0 0 20px -4px rgba(34, 184, 255, 0.45);
  --sw-glow-purple:    0 0 0 1px rgba(139, 92, 246, 0.35), 0 0 22px -4px rgba(139, 92, 246, 0.45);

  /* ---------- Shadows / Elevation ---------- */
  --sw-shadow-sm:      0 1px 0 rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --sw-shadow-md:      0 4px 12px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.02) inset;
  --sw-shadow-lg:      0 12px 32px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.03) inset;
  --sw-shadow-inset-hi:inset 0 1px 0 rgba(255,255,255,0.04);

  /* ---------- Radii ---------- */
  --sw-radius-xs: 4px;
  --sw-radius-sm: 6px;
  --sw-radius-md: 8px;
  --sw-radius-lg: 12px;
  --sw-radius-xl: 16px;
  --sw-radius-2xl: 20px;
  --sw-radius-pill: 999px;

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

  /* ---------- Typography ---------- */
  --sw-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --sw-font-mono: "JetBrains Mono", "SF Mono", ui-monospace, "Menlo", monospace;
  --sw-font-num:  "Inter", ui-monospace, monospace; /* tabular nums via feature-settings */

  /* Type scale — desktop UI (dense, performant) */
  --sw-text-display: 28px; --sw-lh-display: 34px; --sw-tr-display: -0.02em;
  --sw-text-h1:      22px; --sw-lh-h1:      28px; --sw-tr-h1:      -0.01em;
  --sw-text-h2:      18px; --sw-lh-h2:      24px; --sw-tr-h2:      -0.005em;
  --sw-text-h3:      15px; --sw-lh-h3:      22px; --sw-tr-h3:       0;
  --sw-text-body:    14px; --sw-lh-body:    20px;
  --sw-text-sm:      13px; --sw-lh-sm:      18px;
  --sw-text-xs:      12px; --sw-lh-xs:      16px;
  --sw-text-label:   11px; --sw-lh-label:   14px; --sw-tr-label:    0.08em;
  --sw-text-metric:  32px; --sw-lh-metric:  36px; --sw-tr-metric:  -0.02em;

  /* ---------- Motion ---------- */
  --sw-dur-fast:   120ms;
  --sw-dur-med:    200ms;
  --sw-dur-slow:   320ms;
  --sw-ease-out:   cubic-bezier(0.2, 0.7, 0.3, 1);
  --sw-ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Z-index ---------- */
  --sw-z-base:   0;
  --sw-z-sticky: 10;
  --sw-z-nav:    50;
  --sw-z-overlay:100;
  --sw-z-modal:  200;
  --sw-z-toast:  300;
}

/* ---------- Base semantic styles ---------- */
html, body {
  background: var(--sw-bg-app);
  color: var(--sw-text-primary);
  font-family: var(--sw-font-sans);
  font-size: var(--sw-text-body);
  line-height: var(--sw-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

h1, .sw-h1 {
  font-size: var(--sw-text-h1);
  line-height: var(--sw-lh-h1);
  letter-spacing: var(--sw-tr-h1);
  font-weight: 600;
  color: var(--sw-text-primary);
  margin: 0;
}
h2, .sw-h2 {
  font-size: var(--sw-text-h2);
  line-height: var(--sw-lh-h2);
  letter-spacing: var(--sw-tr-h2);
  font-weight: 600;
  color: var(--sw-text-primary);
  margin: 0;
}
h3, .sw-h3 {
  font-size: var(--sw-text-h3);
  line-height: var(--sw-lh-h3);
  font-weight: 600;
  color: var(--sw-text-primary);
  margin: 0;
}
.sw-display {
  font-size: var(--sw-text-display);
  line-height: var(--sw-lh-display);
  letter-spacing: var(--sw-tr-display);
  font-weight: 700;
}
.sw-metric {
  font-size: var(--sw-text-metric);
  line-height: var(--sw-lh-metric);
  letter-spacing: var(--sw-tr-metric);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sw-text-primary);
}
p, .sw-body {
  font-size: var(--sw-text-body);
  line-height: var(--sw-lh-body);
  color: var(--sw-text-secondary);
  margin: 0;
}
.sw-small { font-size: var(--sw-text-sm); line-height: var(--sw-lh-sm); color: var(--sw-text-secondary); }
.sw-muted { color: var(--sw-text-muted); }
.sw-label {
  font-size: var(--sw-text-label);
  line-height: var(--sw-lh-label);
  letter-spacing: var(--sw-tr-label);
  text-transform: uppercase;
  color: var(--sw-text-label);
  font-weight: 600;
}
.sw-num, .sw-tabular { font-variant-numeric: tabular-nums; }
code, .sw-mono {
  font-family: var(--sw-font-mono);
  font-size: 12px;
  color: var(--sw-text-secondary);
}

/* selection */
::selection { background: rgba(37, 99, 235, 0.35); color: var(--sw-text-primary); }