/* ============================================================================= * ff-design/tokens.css — Design-Tokens der Lernwelt. * * Single Source of Truth fuer Farben, Schatten, Radien, Z-Index. * * Neutraler, gut lesbarer Theme mit pro Nutzer waehlbarem, persistentem * Dark-Mode (siehe :root.dark weiter unten). Neutrale, leicht graue Flaechen * mit hohem Kontrast. Warmes Lava-Rot als Akzent (Konsistenz zur Kasse), Gruen * fuer richtig/Fortschritt, Rose-Rot fuer falsch. * * Zwei Namens-Schichten auf dieselben Werte (Absicht): * 1. --ff-* — von Tailwind via @theme (src/main/frontend/css/input.css). * 2. --bg-base, --accent, --state-ok … — direkte CSS-Aliase. * ===========================================================================*/ :root { /* --- Neutrale Flaechen (neutralgrau, eine Nuance dunkler, flach/clean) --- */ --ff-bg-base: #EAEAE7; /* neutralgrauer Grund, leicht abgedunkelt */ --ff-bg-elevated: #F6F6F3; /* Karten ruhig abgesetzt (nicht stark-weiss) */ --ff-bg-subtle: #E0E0DC; /* Hover, alternierende Zeilen */ --ff-bg-overlay: rgba(15, 17, 20, 0.55); /* --- Text (WCAG-AA auf den Flaechen oben) ------------------------------- */ --ff-text-primary: #14161A; --ff-text-secondary: #3A3D44; --ff-text-muted: #5B5F66; --ff-text-faint: #84878D; --ff-text-disabled: #B0B4BC; --ff-text-on-accent: #FFFFFF; --ff-border: #D4D4CF; --ff-border-strong: #BBBBB5; --ff-border-focus: #C03A20; /* --- Lava-Rot (Akzent) -------------------------------------------------- */ --ff-accent: #C03A20; --ff-accent-hover: #A52E18; --ff-accent-subtle: #FAE5DE; /* helles Lava-Wash */ --ff-accent-text-on: #FFFFFF; /* --- Funktionale Status ------------------------------------------------- */ --ff-success: #15803D; /* richtig / Fortschritt */ --ff-success-subtle: #D9F0E0; --ff-warning: #ED6A12; --ff-warning-subtle: #FCE3D0; --ff-danger: #BE123C; /* falsch (Rose-Rot) */ --ff-danger-subtle: #FBD9E0; /* --- Schatten ----------------------------------------------------------- */ --ff-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --ff-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --ff-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10); --ff-shadow-focus: 0 0 0 3px rgba(192, 58, 32, 0.30); /* --- Radien (10/6/Pill-Trias) ------------------------------------------ */ --ff-radius-xs: 0.25rem; --ff-radius-md: 0.375rem; --ff-radius-lg: 0.625rem; --ff-radius-xl: 0.875rem; --ff-radius-full: 9999px; /* --- Z-Index (diskret) -------------------------------------------------- */ --ff-z-base: 0; --ff-z-sticky: 10; --ff-z-dropdown: 20; --ff-z-toast: 30; --ff-z-modal: 40; --ff-z-modal-content: 50; /* --- v3-Naming-Aliase --------------------------------------------------- */ --bg-base: var(--ff-bg-base); --bg-elevated: var(--ff-bg-elevated); --bg-hover: var(--ff-bg-subtle); --text-primary: var(--ff-text-primary); --text-muted: var(--ff-text-muted); --text-faint: var(--ff-text-faint); --text-disabled: var(--ff-text-disabled); --border: var(--ff-border); --border-strong: var(--ff-border-strong); --accent: var(--ff-accent); --accent-hover: var(--ff-accent-hover); --accent-soft: var(--ff-accent-subtle); --accent-text-on: var(--ff-accent-text-on); --state-ok: var(--ff-success); --state-warn: var(--ff-warning); --state-err: var(--ff-danger); --shadow-1: var(--ff-shadow-sm); --shadow-2: var(--ff-shadow-md); } /* =========================================================================== * Dark Mode — pro Nutzer waehlbar, persistent (am Konto gespeichert). Wird per * .dark-Klasse am aktiviert (serverseitig gesetzt, kein FOUC). Da alle * Komponenten ueber var(--ff-*) gehen, genuegt es, hier die --ff-* zu kippen. * =========================================================================== */ :root.dark { --ff-bg-base: #17191C; /* tiefes Neutralgrau */ --ff-bg-elevated: #202327; /* Karten heben sich ab */ --ff-bg-subtle: #2A2E33; /* Hover, alternierende Zeilen */ --ff-bg-overlay: rgba(0, 0, 0, 0.6); --ff-text-primary: #F3F4F5; --ff-text-secondary: #CBCED3; --ff-text-muted: #969BA2; --ff-text-faint: #787D85; --ff-text-disabled: #5A5F66; --ff-text-on-accent: #FFFFFF; --ff-border: #31353B; --ff-border-strong: #474C54; --ff-border-focus: #E0573C; --ff-accent: #D6452A; /* Lava, fuer Dunkel etwas heller */ --ff-accent-hover: #E15A3D; --ff-accent-subtle: #3A1F17; --ff-accent-text-on: #FFFFFF; --ff-success: #4CBF77; --ff-success-subtle: #16291C; --ff-warning: #F4863C; --ff-warning-subtle: #3A220F; --ff-danger: #F24B6E; /* Rose-Rot, heller auf Dunkel */ --ff-danger-subtle: #3A1320; --ff-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.50); --ff-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55); --ff-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.60); --ff-shadow-focus: 0 0 0 3px rgba(214, 69, 42, 0.40); } /* --------------------------------------------------------------------------- * Globale Basis-Defaults. Tailwind-Preflight macht den Rest. * ------------------------------------------------------------------------- */ html { background-color: var(--ff-bg-base); color: var(--ff-text-primary); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { background-color: var(--ff-bg-base); color: var(--ff-text-primary); min-height: 100vh; }