/* ============================================================================ APV Design Tokens — AlphaPet CI / Style Guide v2.4 ============================================================================ Einzige Quelle fuer Farbe, Schrift, Raum und Bewegung. `style.css` enthaelt keine Literale mehr; wer hier etwas aendert, aendert die ganze App. Der Style Guide ist ein *Dashboard*-Guide. Lesetypografie, Touch-Ergonomie und eine Tint-Rampe fehlen dort und sind unten als Ableitung markiert. DREI REGELN, DIE AUS MESSUNGEN KOMMEN — NICHT AUS GESCHMACK ----------------------------------------------------------------------- 1) APV Blue (#46c0e9) ist auf Weiss 2,1:1 und damit NIE Textfarbe. Erlaubt: Flaechen ab 24px, 1/2/4px-Regeln, Fokusring, Chart-Marks. Text/Ikonografie unter 24px = --color-primary (Navy, 15,3:1). 2) Auf Navy dreht sich das: #46c0e9 auf #002060 sind 7,3:1 — dort ist es eine voll konforme Textfarbe (--color-accent-on-primary). Umgekehrt gilt: ein cyaner Button traegt ein NAVY-Label. Weiss auf Cyan waere 2,1:1 und damit unzulaessig. 3) Die vier Semantikfarben des Guides fallen ALLE als Textfarbe durch (#e53935 4,2:1 · #43a047 3,3:1 · #fb8c00 2,4:1 · #00acc1 2,7:1). Deshalb je Rolle zwei Token: der nackte Name ist die *Flaeche*, `-ink` die gepruefte Textfarbe. Nie den nackten Namen auf Text legen. Die Reihenfolge der Chart-Palette ist verbindlich (APV Blue immer zuerst). ============================================================================ */ :root { color-scheme: light; /* --- Marke ------------------------------------------------------------- */ /* Akzent: Flaeche, Highlight, Outline, Fokus, Tint — siehe Regel 1 */ --color-accent: #46c0e9; /* Guide-Regel „Hover = 10 % dunkler als die Grundfarbe", je Kanal gerechnet. Gemessen: das Navy-Label darauf traegt 5,8:1 und bleibt damit konform. */ --color-accent-hover: #3facd1; --color-accent-tint: #daf2fb; /* Ableitung: Guide hat keine Tint-Rampe */ --color-accent-tint-border: #bde9f6; /* Ableitung */ --color-accent-on-primary: #46c0e9; /* nur auf --color-primary, 7,3:1 (Regel 2) */ /* Primaer: Text, Header, Primaeraktion */ --color-primary: #002060; --color-primary-hover: #001440; --color-on-primary: #ffffff; /* --- Text und Links ---------------------------------------------------- */ --color-text: #002060; /* 15,3:1 auf Weiss */ --color-text-muted: #2b4563; /* 9,8:1 auf Weiss */ --color-link: #002060; --color-link-hover: #001440; --color-link-underline: #46c0e9; /* Ableitung: Links verlieren ohne dies ihre Affordanz */ /* --- Flaechen und Struktur --------------------------------------------- */ --color-bg: #f2f2f2; --color-surface: #ffffff; --color-border: #e5e5e5; /* Trennlinien — 1,2:1, rein dekorativ */ --color-border-strong: #d8d8d8; /* Guide: Hover-States, nachrangige UI */ --color-hover-bg: #e5e5e5; --color-zebra: #f2f2f2; /* Ableitung, erzwungen von WCAG 1.4.11 (3:1 fuer Bedienelement-Grenzen): der Guide hat keinen tauglichen Feldrahmen. #c8d0d8 (heute) = 1,56:1, #d8d8d8 = 1,4:1, #e5e5e5 = 1,2:1 — alle drei fallen durch. #8f8f8f ist 3,2:1 und fuehrt bewusst KEINEN neuen Farbton ein, nur eine Graustufe; ein abgeleiteter Navy-Ton wuerde gegen "nie Blautoene mischen" verstossen. */ --color-field-border: #8f8f8f; /* Navy-Band (App-Header, Eintritts-Screens) */ --color-header-bg: #002060; --color-on-header: #ffffff; /* --- Textur ------------------------------------------------------------- */ /* Millimeterpapier-Grund: ein 8px-Punktfeld, das den Grund als Flaeche kenntlich macht, statt ihn als leeres Grau stehen zu lassen. Es ist die einzige Dekoration der App und bewusst eine Rasterung, kein Verlauf — die Slop-Liste verbietet Gradienten, Blobs und Aurora, nicht Struktur. Auf Navy traegt der Akzent den Punkt (Grau waere dort unsichtbar); 24 % Deckung, weil ein voller Cyanpunkt bei 8px Abstand flimmert. */ --texture-step: 8px; --texture-dot: var(--color-border-strong); --texture-dot-on-primary: color-mix(in srgb, var(--color-accent) 24%, transparent); /* --- Semantik: Flaeche / Tinte / Tint (siehe Regel 3) ------------------ */ --color-success: #43a047; --color-success-ink: #2e7d32; /* 5,1:1 */ --color-success-bg: #ecf7ed; --color-success-border: #c8e6c9; --color-warning: #fb8c00; --color-warning-ink: #7a4100; /* 8,1:1 */ --color-warning-bg: #fff3e0; --color-warning-border: #ffe0b2; --color-error: #e53935; --color-error-ink: #c62828; /* 5,6:1 — auch die Flaeche des Danger-Buttons */ --color-error-hover: #a82323; /* 7,2:1 — Guide: "10 % dunkler als Grundfarbe" */ --color-error-bg: #fdecec; --color-error-border: #f5c6c5; --color-info: #00acc1; --color-info-ink: #006064; /* 7,3:1 */ --color-info-bg: #e0f7fa; --color-info-border: #b2ebf2; /* --- Fremde Markenfarbe ------------------------------------------------ */ /* Slack-Aubergine fuer den OIDC-Knopf. Gehoert nicht zur APV-Palette und wird nur dort verwendet — steht hier, damit style.css literalfrei bleibt und der Guard-Test keine Ausnahme braucht. Weiss darauf: 12,4:1. */ --color-slack: #4a154b; --color-slack-hover: #3b1139; /* --- Chart-Palette (Reihenfolge verbindlich) --------------------------- */ --chart-1: #46c0e9; --chart-2: #002060; --chart-3: #e53935; --chart-4: #fb8c00; --chart-5: #fdd835; --chart-6: #7cb342; --chart-7: #26a69a; --chart-8: #5e35b1; /* --- Typografie -------------------------------------------------------- */ /* DM Sans humanistisch fuer Fliesstext, Space Grotesk technisch fuer Headlines, Zahlen und Labels. Keine dritte Familie. */ --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Space Grotesk", var(--font-body); --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Zwei Regler (--text-base, --text-ratio) spannen die ganze Skala auf. */ --text-base: 1rem; --text-ratio: 1.125; --text-xs: 0.75rem; /* 12px — Labels, Badges */ --text-sm: calc(var(--text-base) / var(--text-ratio)); /* ~14px */ --text-md: var(--text-base); /* 16px */ --text-lg: calc(var(--text-base) * var(--text-ratio)); /* 18px */ --text-xl: calc(var(--text-lg) * var(--text-ratio)); /* ~20px */ --text-2xl: calc(var(--text-xl) * var(--text-ratio) * var(--text-ratio)); /* ~26px */ --text-3xl: calc(var(--text-2xl) * var(--text-ratio) * var(--text-ratio)); /* ~32px — Page-H1 */ /* Ableitung: der Guide kennt nur H1 48–72px. Das schiebt auf dem Lernschirm den Tutor unter die Falz. Darum zwei Register — Display nur fuer Marke/Eintritt (index, login, Zertifikat), --text-3xl fuer Arbeitsseiten. */ --text-display: clamp(2.5rem, 6vw, 4.5rem); /* 40–72px */ --leading-tight: 1.25; /* Display */ --leading-snug: 1.4; /* Ueberschriften, Tabellenzellen */ --leading-normal: 1.5; --leading-relaxed: 1.7; /* Fliesstext, Tutor-Antworten */ /* Label-Stil: die identitaetstragendste Regel des Guides. Space Grotesk 10–14px / 600–700 / uppercase / letter-spacing 2–4px. */ --label-size: var(--text-xs); --label-weight: 700; --label-tracking: 0.16em; /* 0,16em bei 12px ≈ 2px */ /* --- Raum -------------------------------------------------------------- */ /* Ein Regler skaliert den ganzen Rhythmus. Namen = Vielfache der Einheit. */ --space-unit: 0.25rem; --space-1: var(--space-unit); /* 4px */ --space-2: calc(var(--space-unit) * 2); /* 8px */ --space-3: calc(var(--space-unit) * 3); /* 12px */ --space-4: calc(var(--space-unit) * 4); /* 16px */ --space-6: calc(var(--space-unit) * 6); /* 24px */ --space-8: calc(var(--space-unit) * 8); /* 32px */ --space-12: calc(var(--space-unit) * 12); /* 48px */ --space-16: calc(var(--space-unit) * 16); /* 64px */ /* --- Maasse ------------------------------------------------------------ */ --container-data: 1200px; /* Guide-Wert — nur fuer Datenflaechen */ --container-app: 1100px; /* App-Standard */ --container-narrow: 880px; --container-form: 420px; /* Ableitung: 1200px DM Sans 16px sind ~140 Zeichen pro Zeile. Prosa, Chat und Lerntext laufen deshalb auf einem Satzspiegel, nicht im Container. */ --measure: 64ch; --control-min: 44px; /* Trefferflaeche, nur bei coarse pointer erzwungen */ --card-pad: clamp(0.875rem, 3vw, 1.5rem); /* Guide sagt 1.5rem — auf 390px zu viel */ --row-h: 3.25rem; /* 52px Tabellenzeile */ --header-h: 3.5rem; /* 56px mobil, 64px ab Tablet */ /* --- Form -------------------------------------------------------------- */ /* EINE Skala, drei Stufen, und jede Kante der App sitzt auf einer davon. Gemischte Radien (8px-Karte, 4px-Badge, 3px-Flagge, 999px-Pille, 12px-Dialog — der Stand vorher) lesen als Unfall, nicht als System. Die Zuordnung ist nach Bauteilgroesse gestaffelt, damit verschachtelte Ecken parallel laufen: Innenradius = Aussenradius minus Polster. badge Chips, Marker, Flaggen, Zaehler, Logo-Plakette control Knoepfe, Felder, Menueeintraege, Teilflaechen, Hinweisbloecke card Karten, Panels, Dialoge, Tabellenflaechen Nichts in der App hat eine scharfe Ecke. */ --radius-badge: 6px; --radius-control: 8px; --radius-card: 12px; /* Rund ist keine vierte Stufe, sondern eine eigene Form: der 6px-Punkt vor einem Status-Badge. Ein Punkt ist ein Punkt, kein Rechteck mit Radius. */ --radius-round: 50%; /* Genau zwei Elevations, navy getoent statt schwarz. */ --shadow-card: 0 1px 3px rgba(0, 32, 96, 0.06); --shadow-overlay: 0 12px 32px rgba(0, 32, 96, 0.12); --scrim: rgba(0, 32, 96, 0.45); --focus-width: 2px; --focus-offset: 2px; /* Der Guide schreibt „Focus outline 2px solid #46C0E9" vor. Auf Weiss sind das 2,10:1 — WCAG 1.4.11 fordert fuer Bedienelement-Indikatoren 3:1, der cyane Ring faellt also durch. Der heutige Ring liegt bei 19:1, und dieses Audit-Ergebnis ist nicht wert, es fuer eine Guide-Zeile herzugeben. Auf Navy-Flaechen ist es umgekehrt: dort traegt --color-accent (7,25:1). */ --focus-color: var(--color-primary); --focus-color-on-primary: var(--color-accent); /* --- Bewegung ---------------------------------------------------------- */ --motion-fast: 120ms; /* Hover, Press */ --motion-base: 240ms; /* Reveal */ --motion-slow: 400ms; --ease-out: cubic-bezier(0.2, 0, 0, 1); --reveal-distance: 8px; --reveal-step: 40ms; } /* Bewegung an der Quelle abschalten: alles, was die Motion-Token nutzt, wird dadurch automatisch still. Den harten Kill-Switch fuer fremde Animationen setzt zusaetzlich `style.css`. */ @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 1ms; --motion-base: 1ms; --motion-slow: 1ms; --reveal-distance: 0px; --reveal-step: 0ms; } } /* ============================================================================ Breakpoints — bewusst als Literale ---------------------------------------------------------------------------- Custom Properties funktionieren in @media nicht, und @custom-media braeuchte einen Build-Step. Der Guide gibt fuenf Stufen vor, mobile-first: (kein Query) < 576px Mobil — eine Spalte @media (min-width: 576px) Phablet @media (min-width: 768px) Tablet — zwei Spalten @media (min-width: 1024px) Desktop — drei/vier Spalten @media (min-width: 1200px) Desktop XL — Container greift Trefferflaechen: @media (pointer: coarse), (max-width: 767px) ============================================================================ */