/* ============================================================================ XANION Theme fuer das offizielle Hermes Dashboard Quelle: design/open-design/design-systems/xanion/DESIGN.md Eingebunden per nginx sub_filter, NICHT ins React-Bundle gepatcht — damit ein `hermes update` das Theme nicht ueberschreibt. Das Dashboard schaltet Dark ueber die Klasse .dark auf (wie die WebUI), deshalb sind beide Varianten hier gepaart definiert. ========================================================================== */ /* ---------------------------------------------------------------- LIGHT --- */ :root { /* Flaechen-Tripel des Dashboards */ --background: #ffffff; --background-base: #ffffff; --midground: #f0f9ff; --midground-base: #f0f9ff; --foreground: #1e2a32; --foreground-base: #1e2a32; /* Semantik */ --color-primary: #024d6d; --color-primary-foreground: #ffffff; --color-secondary: #a08060; /* warmes Sand als einziger Warmton */ --color-secondary-foreground: #ffffff; --color-accent: #0369a1; --color-accent-foreground: #ffffff; --color-card: #ffffff; --color-card-foreground: #1e2a32; --color-popover: #ffffff; --color-popover-foreground: #1e2a32; --color-muted: #dde5e9; --color-muted-foreground: #7a8b94; --color-border: #cdd7dc; --color-input: #cdd7dc; --color-ring: #024d6d; --color-destructive: #ef4444; --color-destructive-foreground: #ffffff; /* Xanion-Zusatz */ --xn-warm: #a08060; --xn-shadow-soft: 4px 4px 12px 0 rgba(2, 77, 109, 0.12); --xn-accent-line: linear-gradient(90deg, #024d6d 0%, #7dd3fc 100%); } /* ----------------------------------------------------------------- DARK --- */ /* Teal-getoentes Dunkel statt neutralem Grau, damit die Marke auch nachts traegt. */ .dark { --background: #0d1b24; --background-base: #0d1b24; --midground: #12232e; --midground-base: #12232e; --foreground: #e6eef2; --foreground-base: #e6eef2; --color-primary: #38bdf8; /* helle Stufe derselben Teal-Rampe */ --color-primary-foreground: #062330; --color-secondary: #c9a882; /* Sand aufgehellt fuer Kontrast */ --color-secondary-foreground: #1a1410; --color-accent: #7dd3fc; --color-accent-foreground: #062330; --color-card: #12232e; --color-card-foreground: #e6eef2; --color-popover: #12232e; --color-popover-foreground: #e6eef2; --color-muted: #1e3644; --color-muted-foreground: #a8bcc6; --color-border: #1e3644; --color-input: #274454; --color-ring: #38bdf8; --color-destructive: #ef4444; --color-destructive-foreground: #ffffff; --xn-warm: #c9a882; --xn-shadow-soft: 4px 4px 14px 0 rgba(0, 0, 0, 0.45); --xn-accent-line: linear-gradient(90deg, #38bdf8 0%, #a08060 100%); } /* ============================================================================ Charakter-Details. Bewusst sparsam und nur auf stabile Selektoren — die Klassennamen des Bundles sind kompiliert und koennen sich aendern. ========================================================================== */ /* Tiefe aus weichen teal-getoenten Schatten statt harter Rahmen */ [class*="card"], [class*="Card"], [role="dialog"], [class*="popover"] { box-shadow: var(--xn-shadow-soft); } /* Akzentlinien-Motiv unter H2 */ h2::after { content: ""; display: block; width: 40px; height: 3px; margin-top: 0.4rem; border-radius: 2px; background: var(--xn-accent-line); } /* Typografie: das Bundle bringt eigene Fonts (Collapse/Mondwest) mit. Wir ueberschreiben nur den Sans-Stack auf die Xanion-Stacks, mit System-Fallback — ohne externen Webfont-Request vom Server. */ :root { --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; } h1, h2, h3, h4 { font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.01em; }