/* FluxCompute design tokens
 * Dark-first. Light variant via [data-theme="light"].
 * All colors in oklch where possible for perceptual consistency.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* === Brand accents (theme-invariant) === */
  --flux-cyan:    oklch(78% 0.16 200);  /* #4DD8E6-ish */
  --flux-violet:  oklch(62% 0.22 295);  /* #7C5CFF-ish */
  --flux-gradient: linear-gradient(135deg, var(--flux-cyan) 0%, var(--flux-violet) 100%);

  /* === Status (muted, technical) === */
  --status-ok:    oklch(72% 0.13 155);
  --status-warn:  oklch(78% 0.13 80);
  --status-err:   oklch(65% 0.18 25);

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

  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   28px;
  --text-2xl:  40px;
  --text-3xl:  56px;
  --text-4xl:  80px;

  --leading-tight: 1.05;
  --leading-snug:  1.25;
  --leading-body:  1.5;

  --tracking-tight: -0.02em;
  --tracking-display: -0.035em;
  --tracking-mono:  -0.005em;
  --tracking-caps:  0.08em;

  /* === Spacing (8px base) === */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

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

  /* === Motion === */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 380ms;
}

/* === Dark (default) === */
:root,
[data-theme="dark"] {
  --bg-0:  oklch(15% 0.012 260);   /* base canvas, near-black cool */
  --bg-1:  oklch(18% 0.014 260);   /* card */
  --bg-2:  oklch(22% 0.016 260);   /* elevated */
  --bg-3:  oklch(27% 0.018 260);   /* input, hover */

  --line-1: oklch(100% 0 0 / 0.06);
  --line-2: oklch(100% 0 0 / 0.10);
  --line-3: oklch(100% 0 0 / 0.16);

  --fg-0: oklch(98% 0.005 90);     /* primary text, slight warm */
  --fg-1: oklch(78% 0.008 260);    /* secondary */
  --fg-2: oklch(58% 0.010 260);    /* tertiary, captions */
  --fg-3: oklch(42% 0.010 260);    /* disabled, hint */

  --shadow-1: 0 1px 0 oklch(100% 0 0 / 0.04) inset, 0 1px 2px oklch(0% 0 0 / 0.4);
  --shadow-2: 0 1px 0 oklch(100% 0 0 / 0.05) inset, 0 8px 24px -8px oklch(0% 0 0 / 0.6);
  --shadow-glow: 0 0 0 1px oklch(78% 0.16 200 / 0.3), 0 0 32px -4px oklch(62% 0.22 295 / 0.4);

  --grid-dot: oklch(100% 0 0 / 0.04);
}

[data-theme="light"] {
  --bg-0:  oklch(99% 0.003 90);
  --bg-1:  oklch(97% 0.004 90);
  --bg-2:  oklch(94% 0.005 90);
  --bg-3:  oklch(91% 0.006 90);

  --line-1: oklch(0% 0 0 / 0.06);
  --line-2: oklch(0% 0 0 / 0.10);
  --line-3: oklch(0% 0 0 / 0.16);

  --fg-0: oklch(18% 0.012 260);
  --fg-1: oklch(38% 0.010 260);
  --fg-2: oklch(55% 0.008 260);
  --fg-3: oklch(70% 0.006 260);

  --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.06);
  --shadow-2: 0 8px 24px -8px oklch(0% 0 0 / 0.12);
  --shadow-glow: 0 0 0 1px oklch(62% 0.22 295 / 0.3), 0 0 32px -4px oklch(62% 0.22 295 / 0.2);

  --grid-dot: oklch(0% 0 0 / 0.05);
}

/* === Base reset === */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--fg-0);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* === Type primitives === */
.t-display {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}
.t-h1 {
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}
.t-h2 {
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.t-h3 {
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
.t-body  { font-size: var(--text-base); line-height: var(--leading-body); }
.t-small { font-size: var(--text-sm);   line-height: var(--leading-body); color: var(--fg-1); }
.t-caps {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-mono);
}

/* === Grid background utility === */
.bg-grid {
  background-image:
    radial-gradient(circle at 1px 1px, var(--grid-dot) 1px, transparent 0);
  background-size: 24px 24px;
}

/* === Gradient text === */
.flux-gradient-text {
  background: var(--flux-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 36px;
  padding: 0 var(--s-4);
  border-radius: var(--r-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary {
  background: var(--fg-0);
  color: var(--bg-0);
}
.btn-primary:hover { background: var(--fg-1); }
.btn-flux {
  background: var(--flux-gradient);
  color: oklch(15% 0.012 260);
  font-weight: 600;
  border: none;
  position: relative;
}
.btn-flux:hover { transform: translateY(-1px); box-shadow: var(--shadow-glow); }
.btn-ghost {
  background: transparent;
  color: var(--fg-0);
  border-color: var(--line-2);
}
.btn-ghost:hover { background: var(--bg-2); border-color: var(--line-3); }
.btn-sm { height: 28px; padding: 0 var(--s-3); font-size: var(--text-xs); }
.btn-lg { height: 44px; padding: 0 var(--s-5); font-size: var(--text-base); border-radius: var(--r-3); }

/* === Card === */
.card {
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  padding: var(--s-5);
}

/* === Input === */
.input {
  height: 36px;
  padding: 0 var(--s-3);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  color: var(--fg-0);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.input:focus { border-color: var(--flux-cyan); background: var(--bg-3); }
.input::placeholder { color: var(--fg-3); }

/* === Badge === */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  height: 22px;
  padding: 0 var(--s-2);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--fg-1);
}
.badge-ok    { color: var(--status-ok);   border-color: oklch(72% 0.13 155 / 0.3); }
.badge-warn  { color: var(--status-warn); border-color: oklch(78% 0.13 80 / 0.3); }
.badge-err   { color: var(--status-err);  border-color: oklch(65% 0.18 25 / 0.3); }
.badge-flux  {
  color: var(--flux-cyan);
  border-color: oklch(78% 0.16 200 / 0.3);
  background: oklch(78% 0.16 200 / 0.08);
}
.badge-dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}

/* === Code block === */
.code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  padding: var(--s-4);
  color: var(--fg-1);
  overflow-x: auto;
  line-height: 1.7;
}
.code .k  { color: oklch(78% 0.13 295); }   /* keyword - violet */
.code .s  { color: oklch(78% 0.13 155); }   /* string - green */
.code .n  { color: oklch(78% 0.13 80); }    /* number - amber */
.code .c  { color: var(--fg-3); font-style: italic; } /* comment */
.code .f  { color: var(--flux-cyan); }      /* function */