/* ============================================================
   base.css — design tokens, typography reset, theme variables.
   Light theme is the default; dark via [data-theme="dark"].
   ============================================================ */

:root {
  /* Spacing scale */
  --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;

  /* Radii */
  --r-1: 3px; --r-2: 6px; --r-3: 10px; --r-4: 14px; --r-pill: 999px;

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-lg: 15px;
  --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 28px;
  --lh-tight: 1.2; --lh-normal: 1.45;

  /* Brand */
  --brand-red: #c8102e;
  --brand-red-soft: #e63946;
  --brand-red-bg: #fef2f4;
  --brand-amber: var(--brand-red);
  --brand-amber-soft: var(--brand-red-soft);

  /* Easing + duration tokens for animations */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med: 200ms;
}

/* ===== LIGHT theme (default) ===== */
:root,
[data-theme="light"] {
  /* Surfaces */
  --bg-0: #f1f4fa;                    /* App background (subtle cool tint, not pure white) */
  --bg-1: #ffffff;                    /* Cards / panels */
  --bg-2: #f7f9fd;                    /* Subtle nested surfaces (table headers, etc.) */
  --bg-3: #eaeef7;                    /* Resting hover */
  --bg-hover: #eef2fa;                /* Interactive hover */
  --bg-active: #e2e8f4;
  --bg-tint: linear-gradient(180deg, #f5f8fd 0%, #eef3fb 100%);
  --bg-sidebar: #ffffff;

  /* Borders */
  --border-1: #e3e8f1;
  --border-2: #c8d1e0;
  --border-3: #a8b4c8;
  --border-strong: #5b6678;

  /* Text */
  --text-1: #0f172a;                  /* Primary */
  --text-2: #45526b;
  --text-3: #6b7790;
  --text-mute: #97a1b3;

  /* Accents */
  --accent: #2563eb;                  /* Interactive blue */
  --accent-soft: #dbe7ff;
  --accent-text: #1d3a8a;
  --accent-hover: #1d4ed8;

  --success: #047857;
  --success-soft: #d1fae5;
  --success-bg: #ecfdf5;
  --warning: #b45309;
  --warning-soft: #fef3c7;
  --warning-bg: #fffbeb;
  --danger: #b91c1c;
  --danger-soft: #fee2e2;
  --danger-bg: #fef2f2;
  --info: #0369a1;
  --info-soft: #e0f2fe;
  --info-bg: #f0f9ff;

  /* Shadows — layered, soft. Multiple offsets for depth. */
  --shadow-1: 0 1px 1px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-2: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-3: 0 4px 8px rgba(15, 23, 42, 0.06), 0 12px 24px rgba(15, 23, 42, 0.10);
  --shadow-hover: 0 2px 4px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.12);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);

  --ring-brand: 0 0 0 3px color-mix(in srgb, var(--brand-red) 22%, transparent);
}

/* ===== DARK theme ===== */
[data-theme="dark"] {
  --bg-0: #0a1020;
  --bg-1: #111a2e;
  --bg-2: #16223a;
  --bg-3: #1d2c48;
  --bg-hover: #1a2640;
  --bg-active: #233358;
  --bg-tint: linear-gradient(180deg, #111a2e 0%, #0c1424 100%);
  --bg-sidebar: #0e1626;

  --border-1: #1f2c48;
  --border-2: #2c3d63;
  --border-3: #3a5081;
  --border-strong: #4c6699;

  --text-1: #e8edf6;
  --text-2: #aab4c8;
  --text-3: #7b8aa6;
  --text-mute: #5a6987;

  --accent: #5b9aff;
  --accent-soft: #1f3a6b;
  --accent-text: #cfe1ff;
  --accent-hover: #7caeff;

  --success: #34d399;
  --success-soft: #103627;
  --success-bg: #0d2a1f;
  --warning: #fbbf24;
  --warning-soft: #3a2a08;
  --warning-bg: #2a1f06;
  --danger: #f87171;
  --danger-soft: #3d1414;
  --danger-bg: #2a0e0e;
  --info: #38bdf8;
  --info-soft: #082f3e;
  --info-bg: #061f2c;

  --brand-red-bg: #2a0e13;

  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.55);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);

  --ring-brand: 0 0 0 3px color-mix(in srgb, var(--brand-red) 35%, transparent);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color var(--dur-med) var(--ease-out),
              color var(--dur-med) var(--ease-out);
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: var(--lh-tight); color: var(--text-1); }
h1 { font-size: var(--fs-3xl); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-2xl); letter-spacing: -0.015em; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p  { margin: 0; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-hover); text-decoration: underline; }

code, pre, .mono { font-family: var(--font-mono); font-size: 0.92em; }

button {
  font-family: inherit;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: var(--r-2); border: 2px solid var(--bg-0); }
::-webkit-scrollbar-thumb:hover { background: var(--border-3); }

/* Utilities */
.muted { color: var(--text-3); }
.dim   { color: var(--text-mute); }
.tabular { font-variant-numeric: tabular-nums; }
.uppercase-label {
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-3);
}
.row-gap { display: flex; flex-direction: column; gap: var(--sp-4); }
.col-gap { display: flex; gap: var(--sp-4); }
.spacer { flex: 1; }

[hidden] { display: none !important; }

::selection { background: var(--accent-soft); color: var(--text-1); }