/* ============================================================
   Shootless Brand Tokens — Modern Photo-Studio Layer
   Quelle: BRANDING.md §2–5 (Shootless) + Modern Photo-Studio Layer
   Designsprache: hairline borders, soft elevation, smoothe Transitions,
   kühles Off-White als Bühne, Electric-Indigo nur an primären CTAs.
   Die UI ist bewusst zurückhaltend — die generierten Produktbilder
   sollen die Bühne tragen.
   ============================================================ */

:root {
  /* === Brand Colors (Ink + Electric Indigo) === */
  --brand-primary: #101014;
  --brand-primary-shade: #000000;
  --brand-primary-tint: #2a2a31;
  --brand-accent: #5b5bd6;
  --brand-navy-deep: #1e1b4b;

  /* === Surfaces (kühles Off-White) === */
  --surface: #ffffff;
  /* Cards, Tiles, Inputs */
  --surface-alt: #eeeef1;
  /* dezenter Hover-Tint */
  --surface-paper: #f7f7f9;
  /* Bühnen/Panels (Studio-Stage, Frames) — kühles Off-White */
  --surface-canvas: #ebedf1;
  /* Body/Page-Hintergrund — tiefer als Paper, lässt weiße Panels schweben */
  --surface-blue-soft: #e9e9f3;
  --surface-blue-softer: #f2f2f8;
  --border: rgba(0, 0, 0, 0.08);
  /* hairline color */
  --border-hover: rgba(16, 16, 20, 0.2);
  --surface-hover: rgba(16, 16, 20, 0.04);

  /* === Text === */
  --text-primary: #101014;
  --text-secondary: #43434d;
  --text-muted: #8a8a93;
  --text-on-primary: #ffffff;
  --text-on-dark: #ffffff;

  /* === Semantic (funktional, vom Brand nicht eingefärbt) === */
  --error: #ba1a1a;
  --error-on: #ffffff;
  --error-soft: #ffe5e3;
  --error-deep: #410002;
  --success: #006e1c;
  --success-soft: #e1f7df;
  --warning: #855300;
  --warning-soft: #fdeed1;
  --accent-yellow: #f5b800;

  /* === Status-Dots (Console-Graft: sichtbarer Werkzeug-Zustand) === */
  --status-ok: #1f9d55;
  /* bereit / fertig — ruhiges Grün */
  --status-ok-soft: rgba(31, 157, 85, 0.16);
  --status-run: #5b5bd6;
  /* läuft — Electric Indigo (Aktions-Akzent) */
  --status-run-soft: rgba(91, 91, 214, 0.18);
  --status-idle: #8a8a93;
  /* idle / leer — gedämpftes Grau */
  --status-idle-soft: rgba(138, 138, 147, 0.16);

  /* === Typography === */
  --font-family-base: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-display: "Space Grotesk", "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* === Radii (AI-Look: kantig-industriell, halbiert vs. Modern-Layer) === */
  --radius-sm: 3px;
  /* Inputs, Chips, Mini-Buttons */
  --radius-md: 5px;
  /* Buttons, Nav-Items (Standard) */
  --radius-lg: 7px;
  /* Cards, Tiles */
  --radius-xl: 10px;
  /* Hero-Surfaces, Modals, Topbar */
  --radius-pill: 9999px;
  /* nur Status-Badges, Avatare, Status-Dot */

  /* === Elevations (Material/Apple-style soft shadows) === */
  --elevation-1: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
  /* Cards, Default-Tiles */
  --elevation-2: 0 4px 12px rgba(0, 0, 0, .06), 0 2px 4px rgba(0, 0, 0, .04);
  /* Hover, sekundäre Modals */
  --elevation-3: 0 12px 32px rgba(0, 0, 0, .08), 0 4px 8px rgba(0, 0, 0, .04);
  /* Modal, Toast, Top-Level-Float */

  /* === Glass-Surfaces (AI-Look-Layer) === */
  --glass-surface-soft: rgba(255, 255, 255, 0.4);
  --glass-surface: rgba(255, 255, 255, 0.8);
  --glass-surface-strong: rgba(255, 255, 255, 0.9);
  --glass-surface-dark: rgba(30, 27, 75, 0.55);
  --glass-blur: blur(20px) saturate(1.4);
  --glass-blur-strong: blur(28px) saturate(1.6);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-border-inner: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* === Brand-Gradients (Ink → Deep Indigo, Electric-Indigo-Akzent) === */
  --gradient-brand: linear-gradient(135deg, #101014 0%, #1e1b4b 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(16, 16, 20, 0.10) 0%, rgba(91, 91, 214, 0.08) 100%);
  --gradient-hero-text: linear-gradient(135deg, #101014 0%, #1e1b4b 55%, #5b5bd6 100%);
  --gradient-aurora:
    radial-gradient(ellipse 60% 50% at 15% 0%, rgba(16, 16, 20, 0.08), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 10%, rgba(91, 91, 214, 0.07), transparent 65%),
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(30, 27, 75, 0.05), transparent 70%);

  /* === Glow (Electric Indigo — dezenter Brand-Akzent, nur an genehmigten Surfaces) === */
  --glow-brand-soft: 0 0 18px rgba(91, 91, 214, 0.22);
  --glow-brand: 0 0 28px rgba(91, 91, 214, 0.34), 0 8px 24px rgba(30, 27, 75, 0.18);
  --glow-brand-strong: 0 0 44px rgba(91, 91, 214, 0.44), 0 12px 32px rgba(30, 27, 75, 0.22);

  /* === Progress (Generation-Modal: futuristischer Blau→Grün-Verlauf) === */
  --gradient-progress: linear-gradient(
    90deg,
    #005a87 0%,
    #006699 22%,
    #00b4d8 48%,
    #18d4a3 76%,
    #006e1c 100%
  );
  --glow-progress: 0 0 10px rgba(0, 178, 216, 0.55), 0 0 22px rgba(24, 212, 163, 0.32);
  --glow-progress-head: 0 0 12px rgba(255, 255, 255, 0.85), 0 0 26px rgba(24, 212, 163, 0.6);

  /* === Danger (destruktive CTAs: tiefer Rot-Verlauf mit Glow) === */
  --gradient-danger: linear-gradient(180deg, #e53935 0%, #c62828 55%, #9a1b1b 100%);
  --gradient-danger-hover: linear-gradient(180deg, #ef4848 0%, #d62929 55%, #a91d1d 100%);
  --glow-danger-soft: 0 0 14px rgba(186, 26, 26, 0.22), 0 4px 12px rgba(154, 27, 27, 0.18);
  --glow-danger: 0 0 22px rgba(186, 26, 26, 0.42), 0 10px 22px rgba(154, 27, 27, 0.28);

  /* === Backdrop (Modal-Overlay, AI-Look verstärkt) === */
  --backdrop-blur: blur(30px);
  --backdrop-color: rgb(255 255 255 / 20%);

  /* === Sidebar-Shell (Aperture — dunkle Ink-Sidebar als Werkzeug-Gehäuse) === */
  --sidebar-bg: #0d0d11;
  /* tiefes Ink, eine Spur dunkler als --brand-primary */
  --sidebar-bg-elevated: #17171d;
  /* aktiver/hover-State innerhalb der Sidebar */
  --sidebar-border: rgba(255, 255, 255, 0.08);
  /* hairline auf dunklem Grund */
  --sidebar-text: #a4a4ae;
  /* Standard-Nav-Text (gedämpft) */
  --sidebar-text-strong: #f5f5f7;
  /* aktiver/heller Text, Wordmark */
  --sidebar-hover: rgba(255, 255, 255, 0.05);
  /* dezenter Hover-Tint */
  --nav-active-bar: var(--brand-accent);
  /* 2px Indigo-Bar am aktiven Eintrag */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 60px;
  --shell-gutter: 24px;
  --focus-ring: 0 0 0 3px rgba(91, 91, 214, 0.4);

  /* === Layout === */
  --topbar-height: 64px;
  --content-max: 1380px;

  /* === Motion === */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --transition: 180ms var(--ease-standard);
}