/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   ActNow OS · Tokens („Glass Cockpit“), Ebene `tokens` (21.10.2026)
   EINE Quelle für Farben, Schrift, Abstände, Rundungen, Schatten, Bewegung und Ebenen.
   Namen folgen shadcn/Basecoat (--background, --primary …), damit Basecoat-Bausteine später ohne
   Umbau passen. Darunter: Brücke für die alten ActNow-Namen (--bg, --text-primary, --accent …),
   damit alle bestehenden Seiten sofort im neuen Look erscheinen.
   Dunkel zuerst. Theme kommt über html[data-theme] (alt) und html.dark (Basecoat) — beide setzt
   core/theme.js. Standard: folgt der Geräte-Einstellung.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Geist';
  src: url('/fonts/geist-var.woff2') format('woff2-variations'), url('/fonts/geist-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── Dunkel (Standard-Gestaltung): neutrales Graphit, Grün nur als Marken-Akzent (21.10.2026) ── */
:root {
  color-scheme: dark;

  /* Grund & Flächen — Glas: halbtransparent, dahinter Unschärfe */
  --background: #09090b;
  --background-2: #111114;
  --foreground: #f4f4f6;
  --card: rgba(30, 30, 35, .58);
  --card-solid: #1b1b1f;
  --popover: rgba(24, 24, 28, .95);
  --popover-foreground: var(--foreground);
  --card-foreground: var(--foreground);
  --surface-hover: rgba(255, 255, 255, .06);
  --surface-press: rgba(255, 255, 255, .10);
  --selected: rgba(255, 255, 255, .11);
  --selected-border: rgba(255, 255, 255, .22);

  /* Hauptknopf: weiß auf Graphit (hell: schwarz) — wie Apple/Linear */
  --cta: #f4f4f6;
  --cta-hover: #ffffff;
  --cta-foreground: #09090b;

  /* Marke: ACT-Grün als kleiner Akzent (Logo, „da“, Fortschritt, Haken). Auf Grün dunkle Schrift */
  --primary: #84cb3a;
  --primary-hover: #95d84c;
  --primary-foreground: #0b1606;
  --primary-ink: #9bd65a;
  --primary-soft: rgba(132, 203, 58, .14);
  --primary-rgb: 132, 203, 58;

  --secondary: rgba(255, 255, 255, .07);
  --secondary-foreground: #e9e9ee;
  --muted: rgba(255, 255, 255, .04);
  --muted-foreground: #a1a1aa;
  --subtle-foreground: #8a8a94;

  /* Zustände (nie als Deko) */
  --destructive: #ff6b61;
  --destructive-soft: rgba(255, 107, 97, .14);
  --warning: #ffb340;
  --warning-soft: rgba(255, 179, 64, .14);
  --success: #5fd068;
  --success-soft: rgba(95, 208, 104, .14);
  --info: #5ab0ff;
  --info-soft: rgba(90, 176, 255, .14);
  --violet: #b69cff;
  --violet-soft: rgba(182, 156, 255, .16);

  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .14);
  --input: rgba(255, 255, 255, .05);
  --ring: rgba(90, 176, 255, .6);

  /* Glas */
  --glass-blur-v: saturate(170%) blur(20px);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .07);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, .40), var(--glass-edge);
  --shadow-3: 0 24px 70px rgba(0, 0, 0, .55), var(--glass-edge);
  --glow-primary: 0 8px 24px rgba(0, 0, 0, .30);

  /* Hintergrund: ruhige Farbschleier (blau, violett, türkis, warm, ein Hauch Grün) */
  --aurora-1: rgba(94, 92, 230, .20);
  --aurora-2: rgba(48, 176, 199, .13);
  --aurora-3: rgba(255, 149, 0, .07);
  --aurora-4: rgba(132, 203, 58, .06);

  /* Schrift */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --font-heading: var(--font-sans);
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --text-xs: 12px; --text-sm: 13.5px; --text-base: 15px; --text-md: 17px; --text-lg: 20px; --text-xl: 26px;
  --text-display: clamp(24px, 1.6vw + 14px, 34px);   /* Seitentitel: Arbeits-App, kein Werbeplakat */

  /* Maße */
  --radius: 14px;
  --radius-sm-v: 10px;
  --radius-card: 22px;
  --radius-sheet: 26px;
  --radius-pill: 999px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --gutter: clamp(16px, 2.6vw, 32px);
  --tap: 44px;

  /* Bewegung — federnd wie iOS, kurz */
  --ease-spring: cubic-bezier(.2, .9, .25, 1.15);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-1: 120ms; --dur-2: 180ms; --dur-3: 260ms;

  /* Ebenen — alles Modale liegt in der Browser-Oberebene (<dialog>), braucht kein z-index.
     Eigene Namen (--layer-*): die alte CSS nutzt --z-* mit Werten 1000–1400, die bis zum
     neuen Rahmen (Etappe 2) gelten müssen. */
  --layer-sticky: 10;
  --layer-shell: 100;
  --layer-dropdown: 200;
  --layer-sidebar-overlay: 300;
  --layer-toast: 400;

  /* Diagramme */
  --chart-1: #84cb3a; --chart-2: #5ab0ff; --chart-3: #ffb340; --chart-4: #b69cff; --chart-5: #ff8fb1;

  /* Seitenleiste */
  --sidebar: rgba(22, 22, 26, .72);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--selected);
  --sidebar-primary-foreground: var(--foreground);
  --sidebar-accent: var(--surface-hover);
  --sidebar-accent-foreground: var(--foreground);
  --sidebar-border: var(--border);
  --sidebar-ring: var(--ring);
}

/* ── Hell ── (gleiche Rollen, eigene Werte) */
:root[data-theme="light"] {
  color-scheme: light;
  --background: #f2f2f5;
  --background-2: #fbfbfd;
  --foreground: #0b0b0f;
  --card: rgba(255, 255, 255, .70);
  --card-solid: #ffffff;
  --popover: rgba(255, 255, 255, .96);
  --surface-hover: rgba(0, 0, 0, .045);
  --surface-press: rgba(0, 0, 0, .08);
  --selected: rgba(0, 0, 0, .07);
  --selected-border: rgba(0, 0, 0, .16);

  --cta: #0b0b0f;
  --cta-hover: #26262b;
  --cta-foreground: #ffffff;

  --primary-hover: #77bf2e;
  --primary-ink: #3a7a12;
  --primary-soft: rgba(132, 203, 58, .16);

  --secondary: rgba(0, 0, 0, .05);
  --secondary-foreground: #1c1c22;
  --muted: rgba(0, 0, 0, .035);
  --muted-foreground: #5c5c66;
  --subtle-foreground: #6b6b75;

  --destructive: #d93025;
  --destructive-soft: rgba(217, 48, 37, .10);
  --warning: #a35f00;
  --warning-soft: rgba(255, 159, 10, .16);
  --success: #248a3d;
  --success-soft: rgba(36, 138, 61, .11);
  --info: #0a66c2;
  --info-soft: rgba(10, 102, 194, .10);
  --violet: #6a3fd1;
  --violet-soft: rgba(124, 77, 255, .10);

  --border: rgba(0, 0, 0, .08);
  --border-strong: rgba(0, 0, 0, .14);
  --input: rgba(255, 255, 255, .85);
  --ring: rgba(10, 102, 194, .45);

  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .85);
  --shadow-1: 0 1px 2px rgba(20, 20, 40, .08);
  --shadow-2: 0 10px 30px rgba(20, 20, 40, .08), var(--glass-edge);
  --shadow-3: 0 24px 70px rgba(20, 20, 40, .16), var(--glass-edge);
  --glow-primary: 0 8px 22px rgba(0, 0, 0, .16);

  --aurora-1: rgba(94, 92, 230, .15);
  --aurora-2: rgba(48, 176, 199, .13);
  --aurora-3: rgba(255, 149, 0, .10);
  --aurora-4: rgba(132, 203, 58, .08);

  --sidebar: rgba(255, 255, 255, .64);
}

/* ═══ Brücke: alte ActNow-Namen → neue Tokens ═══════════════════════════════════════════════════
   Gilt für hell und dunkel (die Ziele wechseln oben). Die alte style.css liegt in der Ebene
   `legacy` darunter — ihre :root/[data-theme]-Werte werden hier überschrieben. */
:root, :root[data-theme="light"], :root[data-theme="dark"] {
  --bg: var(--background);
  --bg-card: var(--card);
  --bg-secondary: var(--muted);
  --bg-tertiary: var(--secondary);
  --text-primary: var(--foreground);
  --text-secondary: var(--muted-foreground);
  --text-tertiary: var(--subtle-foreground);
  --separator: var(--border);

  --glass-bg: var(--card);
  --glass-strong: var(--popover);
  --glass-border: var(--border);
  --glass-blur: var(--glass-blur-v);

  /* Ein Akzent für alle: ACT-Grün (die persönliche Nutzerfarbe heißt jetzt --user-accent) */
  --accent: var(--primary);
  --accent-rgb: var(--primary-rgb);
  --brand: var(--primary);
  --brand-strong: var(--primary-hover);
  --brand-rgb: var(--primary-rgb);
  --brand-subtle: var(--primary-soft);
  --brand-line: var(--border-strong);
  --brand-glow: rgba(var(--primary-rgb), .30);   /* alte CSS nutzt das als FARBE in Schatten/Verläufen */

  --blue: var(--info);
  --purple: var(--violet);
  --green: var(--success);
  --orange: var(--warning);
  --red: var(--destructive);

  --shadow-sm: var(--shadow-1);
  --shadow-md: var(--shadow-2);
  --shadow-lg: var(--shadow-2);
  --shadow-xl: var(--shadow-3);

  --radius-sm: var(--radius-sm-v);
  --radius-md: var(--radius);
  --radius-lg: var(--radius-card);
  --radius-xl: var(--radius-sheet);

  --app-bg:
    radial-gradient(900px 620px at 8% -10%, var(--aurora-1), transparent 62%),
    radial-gradient(800px 560px at 96% 4%, var(--aurora-2), transparent 60%),
    radial-gradient(760px 560px at 55% 112%, var(--aurora-3), transparent 60%),
    radial-gradient(520px 420px at 30% 62%, var(--aurora-4), transparent 70%),
    linear-gradient(180deg, var(--background-2), var(--background));
}

/* Bewegung reduzieren / Transparenz reduzieren (Gerät) — volle Flächen, keine Unschärfe */
@media (prefers-reduced-transparency: reduce) {
  :root { --card: var(--card-solid); --popover: var(--card-solid); --glass-blur-v: none; --sidebar: var(--card-solid); }
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}