/* =============================================================================
   NOVA DESIGN TOKENS — Single Source of Truth der Produktlinie Nova
   Herausgeber: Aetheris GmbH i. G.
   -----------------------------------------------------------------------------
   Diese Datei ist framework-neutral (reine CSS Custom Properties) und wird in
   jedes Nova-Produkt kopiert. Änderungen IMMER hier im Original machen
   (Hetzner/nova-brand/tokens/nova-tokens.css) und dann in die Produkte spiegeln.

   Ebene 1 = Primitive (rohe Farbwerte, nie direkt in Komponenten verwenden)
   Ebene 2 = Semantisch (--nova-bg, --nova-text, ...) — das benutzt man im Code
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     EBENE 1 — PRIMITIVE
     --------------------------------------------------------------------------- */

  /* Ink / Deep Space — Basis der Marke. 900 ist das Mitternachtsblau #0F172A. */
  --nova-ink-950: #020617;
  --nova-ink-900: #0f172a;
  --nova-ink-800: #1e293b;
  --nova-ink-700: #334155;
  --nova-ink-600: #475569;
  --nova-ink-500: #64748b;
  --nova-ink-400: #94a3b8;
  --nova-ink-300: #cbd5e1;
  --nova-ink-200: #e2e8f0;
  --nova-ink-100: #f1f5f9;
  --nova-ink-50: #f8fafc;
  --nova-white: #ffffff;

  /* Akzent Cyan — Interaktion, Fokus, Marken-Glow. */
  --nova-accent-50: #ecfeff;
  --nova-accent-100: #cffafe;
  --nova-accent-200: #a5f3fc;
  --nova-accent-300: #67e8f9;
  --nova-accent-400: #22d3ee;
  --nova-accent-500: #06b6d4;
  --nova-accent-600: #0891b2;
  --nova-accent-700: #0e7490;
  --nova-accent-800: #155e75;
  --nova-accent-900: #164e63;

  /* Mint — Erfolg, bestätigte Zustände. */
  --nova-mint-50: #ecfdf5;
  --nova-mint-100: #d1fae5;
  --nova-mint-400: #34d399;
  --nova-mint-500: #10b981;
  --nova-mint-600: #059669;
  --nova-mint-700: #047857;

  /* Amber — Warnung, Frist läuft. */
  --nova-amber-50: #fffbeb;
  --nova-amber-100: #fef3c7;
  --nova-amber-500: #f59e0b;
  --nova-amber-600: #d97706;
  --nova-amber-700: #b45309;

  /* Rose — Fehler, überfällig, destruktiv. */
  --nova-rose-50: #fff1f2;
  --nova-rose-100: #ffe4e6;
  --nova-rose-500: #e11d48;
  --nova-rose-600: #be123c;
  --nova-rose-700: #9f1239;

  /* ---------------------------------------------------------------------------
     EBENE 2 — SEMANTISCH (hell / Standard)
     --------------------------------------------------------------------------- */

  /* Flächen */
  --nova-bg: var(--nova-ink-50);          /* Seitenhintergrund, Dashboards */
  --nova-surface: var(--nova-white);      /* Cards, Panels, Modals */
  --nova-surface-raised: var(--nova-white);
  --nova-surface-sunken: var(--nova-ink-100);
  --nova-border: var(--nova-ink-200);     /* zarte Trennlinien */
  --nova-border-strong: var(--nova-ink-300);

  /* Text */
  --nova-text: var(--nova-ink-900);
  --nova-text-muted: var(--nova-ink-500);
  --nova-text-subtle: var(--nova-ink-400);
  --nova-text-on-dark: var(--nova-ink-50);
  --nova-text-on-accent: var(--nova-white);

  /* Interaktion
     Wichtig für Barrierefreiheit (WCAG AA, 4.5:1 auf Weiß):
       --nova-primary (accent-700 #0e7490) = 4.9:1  → für Text, Links, Solid-Buttons OK
       accent-600 (#0891b2)                = 3.6:1  → NUR für große Schrift, Icons, Rahmen
     Der Standard-Button der Linie ist dunkel (ink-900) im Stripe-Stil, der
     Akzent-Button ist die farbige CTA-Variante. */
  --nova-primary: var(--nova-accent-700);
  --nova-primary-hover: var(--nova-accent-800);
  --nova-primary-subtle: var(--nova-accent-50);
  --nova-accent-visual: var(--nova-accent-500); /* Glow, Charts, Emblem-Details */

  /* Primärbutton: farbig (wie Stripe), Weiß auf accent-700 = 4.9:1 ✓ */
  --nova-btn-bg: var(--nova-primary);
  --nova-btn-bg-hover: var(--nova-primary-hover);
  --nova-btn-text: var(--nova-white);
  /* Ink-Button: die ruhige Alternative für Marketingflächen und dunkle Kontexte */
  --nova-btn-ink-bg: var(--nova-ink-900);
  --nova-btn-ink-bg-hover: var(--nova-ink-800);

  --nova-focus-ring: var(--nova-accent-500);
  --nova-focus-ring-alpha: rgba(6, 182, 212, 0.35);

  /* Status */
  --nova-success: var(--nova-mint-600);
  --nova-success-bg: var(--nova-mint-50);
  --nova-success-border: var(--nova-mint-100);
  --nova-warning: var(--nova-amber-700);
  --nova-warning-bg: var(--nova-amber-50);
  --nova-warning-border: var(--nova-amber-100);
  --nova-danger: var(--nova-rose-600);
  --nova-danger-bg: var(--nova-rose-50);
  --nova-danger-border: var(--nova-rose-100);
  --nova-info: var(--nova-accent-700);
  --nova-info-bg: var(--nova-accent-50);
  --nova-info-border: var(--nova-accent-100);

  /* ---------------------------------------------------------------------------
     TYPOGRAFIE — Inter für alles (UI, Headlines, Fließtext)
     --------------------------------------------------------------------------- */
  /* --nova-font-inter wird vom Framework-Loader gesetzt (next/font/google →
     variable: "--nova-font-inter"). Fehlt er, greift die lokal/über CDN
     eingebundene Inter, danach die System-Sans. */
  --nova-font-sans: var(--nova-font-inter, "Inter"), ui-sans-serif, system-ui,
    -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --nova-font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono",
    "Menlo", "Consolas", monospace;

  /* Größen (rem, 16px-Basis) */
  --nova-text-xs: 0.75rem;    /* 12 — Labels, Meta */
  --nova-text-sm: 0.875rem;   /* 14 — UI-Standard */
  --nova-text-base: 1rem;     /* 16 — Fließtext */
  --nova-text-lg: 1.125rem;   /* 18 — Lead */
  --nova-text-xl: 1.375rem;   /* 22 — H3 */
  --nova-text-2xl: 1.75rem;   /* 28 — H2 */
  --nova-text-3xl: 2.25rem;   /* 36 — H1 */
  --nova-text-4xl: 3rem;      /* 48 — Display */

  /* Eng anliegende Headlines sind ein Kernmerkmal der Linie. */
  --nova-tracking-display: -0.03em;
  --nova-tracking-heading: -0.02em;
  --nova-tracking-body: -0.006em;
  --nova-tracking-label: 0.02em;

  --nova-leading-tight: 1.15;
  --nova-leading-heading: 1.25;
  --nova-leading-body: 1.6;

  --nova-weight-regular: 400;
  --nova-weight-medium: 500;
  --nova-weight-semibold: 600;
  --nova-weight-bold: 700;
  --nova-weight-wordmark: 800; /* nur die Wortmarke "nova" */

  /* ---------------------------------------------------------------------------
     FORM — Radien, Schatten, Abstände
     --------------------------------------------------------------------------- */
  --nova-radius-sm: 6px;
  --nova-radius-md: 8px;
  --nova-radius-lg: 12px;
  --nova-radius-xl: 16px;
  --nova-radius-full: 9999px;

  /* Weiche Schatten — Elemente schweben subtil, nie plakativ. */
  --nova-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --nova-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --nova-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --nova-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.1);
  --nova-shadow-focus: 0 0 0 3px var(--nova-focus-ring-alpha);

  /* 4px-Raster */
  --nova-space-1: 0.25rem;
  --nova-space-2: 0.5rem;
  --nova-space-3: 0.75rem;
  --nova-space-4: 1rem;
  --nova-space-5: 1.25rem;
  --nova-space-6: 1.5rem;
  --nova-space-8: 2rem;
  --nova-space-10: 2.5rem;
  --nova-space-12: 3rem;
  --nova-space-16: 4rem;

  /* Icons: Lucide, Linienstärke der Linie */
  --nova-icon-stroke: 1.75;

  --nova-duration-fast: 120ms;
  --nova-duration-base: 180ms;
  --nova-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================================================
   DARK — invertiert auf Deep Space. Gleiche semantischen Namen, andere Werte.
   Aktiv über <html class="dark"> ODER Systemeinstellung.
   ============================================================================= */

.dark {
  --nova-bg: #0b1220;
  --nova-surface: var(--nova-ink-900);
  --nova-surface-raised: var(--nova-ink-800);
  --nova-surface-sunken: var(--nova-ink-950);
  --nova-border: var(--nova-ink-800);
  --nova-border-strong: var(--nova-ink-700);

  --nova-text: var(--nova-ink-50);
  --nova-text-muted: var(--nova-ink-400);
  --nova-text-subtle: var(--nova-ink-500);

  /* Auf dunklem Grund tragen die helleren Akzentstufen den Kontrast. */
  --nova-primary: var(--nova-accent-300);
  --nova-primary-hover: var(--nova-accent-200);
  --nova-primary-subtle: rgba(8, 145, 178, 0.16);
  --nova-accent-visual: var(--nova-accent-400);

  --nova-btn-bg: var(--nova-accent-400);
  --nova-btn-bg-hover: var(--nova-accent-300);
  --nova-btn-text: var(--nova-ink-950);
  --nova-btn-ink-bg: var(--nova-ink-800);
  --nova-btn-ink-bg-hover: var(--nova-ink-700);

  --nova-success: var(--nova-mint-400);
  --nova-success-bg: rgba(16, 185, 129, 0.12);
  --nova-success-border: rgba(16, 185, 129, 0.28);
  --nova-warning: var(--nova-amber-500);
  --nova-warning-bg: rgba(245, 158, 11, 0.12);
  --nova-warning-border: rgba(245, 158, 11, 0.28);
  --nova-danger: #fb7185;
  --nova-danger-bg: rgba(225, 29, 72, 0.14);
  --nova-danger-border: rgba(225, 29, 72, 0.3);
  --nova-info: var(--nova-accent-300);
  --nova-info-bg: rgba(6, 182, 212, 0.12);
  --nova-info-border: rgba(6, 182, 212, 0.28);

  --nova-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --nova-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
  --nova-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --nova-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
}

/* Nova bleibt HELL, auch wenn das Betriebssystem im Dunkelmodus laeuft.
   Vorher stand hier ein prefers-color-scheme-Block, der color-scheme:dark gesetzt hat.
   Folge: Eingabefelder, Auswahllisten und Rollbalken wurden vom Browser dunkel gezeichnet,
   waehrend Karten und Flaechen weiss blieben - ein Mischzustand, der unaufgeraeumt wirkt.
   Stripe macht es genauso: die Anwendung gibt den Ton an, nicht das Betriebssystem.
   Der Dunkelmodus bleibt als Klasse .dark verfuegbar - er wird bewusst gesetzt, nie geerbt. */
:root {
  color-scheme: light;
}

/* =============================================================================
   BASIS-ANWENDUNG — optional, aber empfohlen als gemeinsame Grundlage
   ============================================================================= */

.nova-root {
  background-color: var(--nova-bg);
  color: var(--nova-text);
  font-family: var(--nova-font-sans);
  font-size: var(--nova-text-base);
  line-height: var(--nova-leading-body);
  letter-spacing: var(--nova-tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Inter-Feinschliff: echte Ziffernabstände + kontextuelle Alternativen */
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

.nova-h1,
.nova-h2,
.nova-h3 {
  font-weight: var(--nova-weight-semibold);
  line-height: var(--nova-leading-heading);
  letter-spacing: var(--nova-tracking-heading);
  color: var(--nova-text);
}

.nova-h1 { font-size: var(--nova-text-3xl); letter-spacing: var(--nova-tracking-display); }
.nova-h2 { font-size: var(--nova-text-2xl); }
.nova-h3 { font-size: var(--nova-text-xl); }

/* Card — das Arbeitspferd der Linie: weiß, zarte Border, weicher Schatten. */
.nova-card {
  background-color: var(--nova-surface);
  border: 1px solid var(--nova-border);
  border-radius: var(--nova-radius-lg);
  box-shadow: var(--nova-shadow-sm);
}

/* Fokus ist immer sichtbar — nie wegstylen. */
.nova-focusable:focus-visible {
  outline: 2px solid var(--nova-focus-ring);
  outline-offset: 2px;
}

/* Tabellenziffern für alles Zahlenhafte (Beträge, Fristen, KPIs). */
.nova-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}