/* ============================================================================
 * connect — stylesheet (Phase 1: Cloudflare-Style Layout-Port, v1.2.1)
 *
 * Diese Datei ist die Hülle. Sie definiert nur die Tokens, das CSS-Reset
 * und ein paar Utility-Klassen. Die eigentlichen Komponenten kommen aus
 * vier Sub-Files, die per `@import` eingezogen werden.
 *
 * Wichtig: `@import`-Anweisungen müssen vor jeder anderen Regel stehen,
 * deshalb stehen sie ganz oben. Die Sub-Files greifen auf die hier
 * definierten Tokens zu — funktioniert, weil CSS-Variablen erst bei der
 * Lookup-Zeit aufgelöst werden, nicht beim Parsen.
 *
 * Datei-Aufteilung:
 *   styles.css           — Tokens, Reset, Utilities
 *   _layout.css          — App-Shell, Sidebar, Topbar, Page-Header, Chips, Responsive
 *   _components.css      — Buttons, Status atoms, Empty state
 *   _modals.css          — Push, Login, generic Modal, Forms, Dropzone, Key-Block
 *   _routes.css          — Panel/Instance-Table, Releases, Activity, Settings
 *
 * Tokens nutzen `light-dark()` — ein Token, zwei Werte. Default folgt
 * `prefers-color-scheme`; ein expliziter `data-theme="light|dark"` auf
 * <html> überschreibt das (gesetzt vom Theme-Toggle in der Topbar,
 * persistiert in localStorage als `connect-theme`).
 * ========================================================================== */

@import url('_layout.css?v=9');
@import url('_components.css?v=6');
@import url('_modals.css?v=8');
@import url('_routes.css?v=19');
@import url('_responsive.css?v=3');


/* ─── Tokens ────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light dark;

  --font-ui:   'Geist', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Flächen */
  --bg:      light-dark(oklch(0.965 0.003 80),   oklch(0.18 0.005 260));
  --bg-elev: light-dark(oklch(1.000 0     0),    oklch(0.22 0.005 260));
  --bg-sub:  light-dark(oklch(0.955 0.003 80),   oklch(0.245 0.005 260));
  --bg-ink:  light-dark(oklch(0.935 0.003 80),   oklch(0.275 0.005 260));

  /* Schrift-Hierarchie (5 Stufen, von kräftig nach leise) */
  --ink:   light-dark(oklch(0.18 0.005 260), oklch(0.97 0.003 80));
  --ink-2: light-dark(oklch(0.36 0.005 260), oklch(0.84 0.004 80));
  --ink-3: light-dark(oklch(0.54 0.006 260), oklch(0.68 0.005 80));
  --ink-4: light-dark(oklch(0.70 0.007 260), oklch(0.55 0.006 80));
  --ink-5: light-dark(oklch(0.86 0.005 260), oklch(0.42 0.006 80));

  /* Linien */
  --line:   light-dark(oklch(0.92 0.003 260), oklch(0.32 0.005 260));
  --line-2: light-dark(oklch(0.88 0.004 260), oklch(0.40 0.005 260));

  /* Status — Hue ist konstant; nur die Begleitfarben (*-soft / *-ink)
     werden im Dark-Mode angehoben, damit Pills + Inline-Text noch
     trennscharf sind. */
  --ok:        oklch(0.66 0.15 150);
  --ok-soft:   light-dark(oklch(0.94 0.05 150), color-mix(in oklch, #2ecc71 22%, transparent));
  --ok-ink:    light-dark(oklch(0.42 0.12 150), #6ee29a);

  --warn:      oklch(0.74 0.15 70);
  --warn-soft: light-dark(oklch(0.96 0.06 80),  color-mix(in oklch, #f59e0b 18%, transparent));
  --warn-ink:  light-dark(oklch(0.45 0.12 60),  #ffc46b);

  --err:       oklch(0.58 0.21 28);
  --err-soft:  light-dark(oklch(0.96 0.05 25),  color-mix(in oklch, #dc3545 22%, transparent));
  --err-ink:   light-dark(oklch(0.45 0.16 28),  #ff8492);

  /* Akzent (Connect-Grün) */
  --accent:       #2ecc71;
  --accent-hover: #27b765;
  --accent-soft:  light-dark(#e8f9ee, color-mix(in oklch, #2ecc71 22%, transparent));
  --accent-ink:   light-dark(#1d8a4d, #6ee29a);

  /* Schatten — Light-Mode-Werte; im Dark-Mode wirken sie ohnehin
     dezenter. Eine separate Dark-Variante würde nur unruhig machen. */
  --shadow-1:     0 1px 2px rgba(20,18,14,0.04), 0 1px 0 rgba(255,255,255,0.6) inset;
  --shadow-card:  0 1px 2px rgba(20,18,14,0.04), 0 1px 1px rgba(20,18,14,0.03);
  --shadow-panel: 0 1px 2px rgba(20,18,14,0.04), 0 1px 1px rgba(20,18,14,0.03), 0 12px 32px rgba(20,18,14,0.08);
  --shadow-2:     0 1px 2px rgba(20,18,14,0.05), 0 8px 24px rgba(20,18,14,0.08);
  --shadow-3:     0 30px 80px rgba(20,18,14,0.18), 0 8px 24px rgba(20,18,14,0.10);

  --radius:    10px;
  --radius-sm: 7px;
  --radius-lg: 14px;

  /* Layout-Fixwerte */
  --sidebar-w: 240px;
  --topbar-h:  56px;

  --t-fast:   120ms ease;
  --t-medium: 180ms cubic-bezier(.3, .7, .4, 1);
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark;  }


/* ─── Reset ─────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: default; }
a { color: inherit; text-decoration: none; }


/* ─── Utilities ─────────────────────────────────────────────────────────── */

.u-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.u-mono--faint { color: var(--ink-3); }
.u-mono--dim   { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 0.5px; }
.u-mono__arrow { color: var(--ink-4); margin: 0 6px; font-family: var(--font-ui); }
.u-mono__pair  { display: inline-flex; align-items: center; }

.u-muted { color: var(--ink-4); }

.u-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

[hidden] { display: none !important; }