@import 'tailwindcss'; @import '@mana/themes/variants/forest.css'; /** * Cards — Theming-Setup. * * 12-Token-Vokabular kommt aus `@mana/themes/variants/forest.css`. * `data-theme="forest"` ist in `app.html` gesetzt; Light/Dark via * Class `.dark` auf . Konvention: `hsl(var(--color-X))`. Bare * `var(--color-X)` ist verboten (silent inherit-fallback). Detail in * mana/docs/THEMING.md. * * Diese Datei trägt nur Cards-spezifische Ergänzungen: * 1. Bridge-Aliase für shared-ui@0.1.x — bis shared-ui@2.0 entfällt * 2. Brand-Literals (--brand-cards-forest) * 3. Layer-Base-Regeln (html, focus-ring, sr-only, skip-link) * 4. Reduced-Motion-Override */ @theme { /* ===== Bridge-Aliase für Cards' Eigen-Komponenten ===== * Cards' eigener Code (Header, Modals, Routen, Marketplace) * nutzt historisch --color-card, --color-popover, --color-accent * etc. — Tokens die im 12er-Mana-Set NICHT existieren. Diese * Aliase mappen sie auf das 12er-Set, damit Cards' eigene UI * weiter rendert. Wird nur noch entfernbar wenn Cards' eigener * Code komplett auf das 12er-Vokabular umgezogen ist * (eigener Refactor-Sprint). shared-ui-2-Komponenten brauchen * diese Aliase NICHT. */ --color-card: var(--color-surface); --color-card-foreground: var(--color-foreground); --color-popover: var(--color-surface); --color-popover-foreground: var(--color-foreground); --color-secondary: var(--color-surface); --color-secondary-foreground: var(--color-foreground); --color-accent: var(--color-primary); --color-accent-foreground: var(--color-primary-foreground); --color-input: var(--color-border); --color-ring: var(--color-primary); --color-border-strong: var(--color-foreground); --color-surface-elevated: var(--color-surface); --color-surface-elevated-1: var(--color-surface); --color-surface-elevated-2: var(--color-surface); --color-surface-elevated-3: var(--color-surface); --color-app-accent: var(--color-primary); --color-mana: var(--color-primary); --color-destructive: var(--color-error); --color-destructive-foreground: var(--color-primary-foreground); /* ===== Brand-Literals (NICHT theme-aware) ===== */ --brand-cards-forest: #16a34a; /* ===== Fonts ===== */ --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } @layer base { html { background-color: hsl(var(--color-background)); color: hsl(var(--color-foreground)); font-family: var(--font-sans); } body { min-height: 100dvh; } /* Sichtbarer Fokus-Ring für Tastatur-Nutzer. Tailwind 4 strippt die Browser-Defaults; expliziter Outline. Nur :focus-visible, damit Maus-Klicks visuell sauber bleiben. */ :focus-visible { outline: 2px solid hsl(var(--color-primary)); outline-offset: 2px; border-radius: 2px; } /* Screen-Reader-only Utility. Wird im Study-View genutzt, um die Prompt-/Answer-Regionen unsichtbar zu betiteln. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* Skip-Link: versteckt bis Fokus, dann sprung zur Main-Region. */ .skip-link { position: absolute; top: 0; left: 0; padding: 0.5rem 0.75rem; background: hsl(var(--color-primary)); color: hsl(var(--color-primary-foreground)); z-index: 50; transform: translateY(-200%); transition: transform 0.15s; } .skip-link:focus { transform: translateY(0); } } /* Reduce-Motion-Respekt: Animationen + Transitions ausschalten, wenn der User das im OS so eingestellt hat. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }