/* * Copyright AYA e.V. * * Licensed under the EUPL, Version 1.2 only (the "Licence"); * You may not use this work except in compliance with the Licence. * * AYA-Designsystem — Tokens (uebernommen aus design_handoff_zettelwirt/_ds/). * Single Source of Truth fuer Farben, Typografie, Spacing, Radien, Schatten, * Motion. Komponenten referenzieren die semantischen Aliase (--brand-*, * --text-*, --surface-*, --status-*), nicht die Rampen. * * Schrift: Original ist Futura (lizenziert, nur als .ttf im Handoff). Hier als * freier Google-Fonts-Ersatz "Jost" (geometrisches Futura-Revival), per * in base.html.twig geladen. */ :root { /* ---- Brand: Orange (primaer) ---- */ --aya-orange-50: #FFF4ED; --aya-orange-100: #FFE3D1; --aya-orange-200: #FFC3A0; --aya-orange-300: #FF9D67; --aya-orange-400: #FB7733; --aya-orange-500: #F2611E; /* primary */ --aya-orange-600: #D74E10; --aya-orange-700: #B03D0E; --aya-orange-800: #8A3211; --aya-orange-900: #5F2410; /* ---- Brand: Blau (sekundaer/funktional) ---- */ --aya-blue-50: #ECF4FC; --aya-blue-100: #D2E5F8; --aya-blue-200: #A7CBF0; --aya-blue-300: #6FA9E4; --aya-blue-400: #3E84D3; --aya-blue-500: #1E66BC; /* secondary */ --aya-blue-600: #1553A0; --aya-blue-700: #114483; --aya-blue-800: #123A6A; --aya-blue-900: #112C4D; /* ---- Neutral: warmes Grau ---- */ --aya-grey-0: #FFFFFF; --aya-grey-25: #FBFAF8; /* Seitenhintergrund — warmes Off-White */ --aya-grey-50: #F5F3EF; --aya-grey-100: #ECE9E3; --aya-grey-200: #DCD8D0; --aya-grey-300: #C5BFB5; --aya-grey-400: #9E978B; --aya-grey-500: #766F64; --aya-grey-600: #565049; --aya-grey-700: #3C3833; --aya-grey-800: #2B2825; --aya-grey-900: #24262B; /* Shirt-Dunkelgrau — primaere Tinte */ /* ---- Status-Rampen ---- */ --aya-green-50: #E8F6EE; --aya-green-500: #1E9E5A; --aya-green-600: #167F47; --aya-amber-50: #FFF6E0; --aya-amber-500: #E8A317; --aya-amber-600: #C2850C; --aya-red-50: #FCEBEA; --aya-red-500: #D8412F; --aya-red-600: #B22F20; /* ---- Jury-Punktzonen (10er-Skala, gebaendert) ---- Die wichtigste Farblogik der App: jeder Punkte-Knopf im Bewertungsdialog traegt eine dieser Zonen, und die Legende darunter muss dieselben Werte zeigen. Deshalb hier vollstaendig und an EINER Stelle - vorher standen die Zonen in zettelwirt.css direkt aus den Rohrampen zusammengesetzt, waehrend die eigens dafuer gebauten Tokens ungenutzt herumlagen. Bewusst KEIN Rot am unteren Ende: eine reine Rot/Gruen-Achse waere fuer rot-gruen-blinde Juroren nicht unterscheidbar. Das untere Band ist neutrales Grau, und die Auswahl wird zusaetzlich ueber Rahmen und Vollfaerbung getragen, nicht nur ueber den Farbton. Vier Rollen je Band: soft = Flaeche im unausgewaehlten Zustand, line = Rahmen, text = Schrift unausgewaehlt, fill = Vollfarbe ausgewaehlt. */ --score-low-soft: var(--aya-grey-100); --score-low-line: var(--aya-grey-300); --score-low-text: var(--aya-grey-600); --score-low-fill: var(--aya-grey-500); --score-mid-soft: var(--aya-amber-50); --score-mid-line: var(--aya-amber-500); --score-mid-text: var(--aya-amber-600); --score-mid-fill: var(--aya-amber-500); --score-high-soft: var(--aya-green-50); --score-high-line: var(--aya-green-500); --score-high-text: var(--aya-green-600); --score-high-fill: var(--aya-green-500); /* ============================================================ Semantische Aliase ============================================================ */ --brand-primary: var(--aya-orange-500); --brand-primary-hover: var(--aya-orange-600); --brand-primary-press: var(--aya-orange-700); --brand-primary-soft: var(--aya-orange-50); --brand-secondary: var(--aya-blue-500); --brand-secondary-hover:var(--aya-blue-600); --brand-secondary-press:var(--aya-blue-700); --brand-secondary-soft: var(--aya-blue-50); --brand-on-primary: #FFFFFF; --brand-on-secondary: #FFFFFF; --text-strong: var(--aya-grey-900); --text-body: var(--aya-grey-700); --text-muted: var(--aya-grey-500); --text-faint: var(--aya-grey-400); --text-inverse: var(--aya-grey-25); --text-link: var(--aya-blue-600); --text-link-hover: var(--aya-orange-600); --text-on-brand: #FFFFFF; --surface-page: var(--aya-grey-25); --surface-card: var(--aya-grey-0); --surface-sunken: var(--aya-grey-50); --surface-raised: var(--aya-grey-0); --surface-inverse: var(--aya-grey-900); --surface-brand: var(--aya-orange-500); --surface-brand-soft: var(--aya-orange-50); --surface-blue: var(--aya-blue-500); --surface-blue-soft: var(--aya-blue-50); --border-subtle: var(--aya-grey-100); --border-default: var(--aya-grey-200); --border-strong: var(--aya-grey-300); --border-brand: var(--aya-orange-500); --border-focus: var(--aya-blue-500); --status-success: var(--aya-green-500); --status-success-soft: var(--aya-green-50); --status-warning: var(--aya-amber-500); --status-warning-soft: var(--aya-amber-50); --status-danger: var(--aya-red-500); --status-danger-soft: var(--aya-red-50); --status-info: var(--aya-blue-500); --status-info-soft: var(--aya-blue-50); --ring-focus: 0 0 0 3px rgba(30, 102, 188, 0.35); --ring-brand: 0 0 0 3px rgba(242, 97, 30, 0.30); /* ---- Typografie ---- Ein echtes Schriftpaar mit klarer Aufgabenteilung. Vorher standen hier zweimal dieselbe Familie: das System behauptete ein Paar, das es nicht gab. Auszeichnung = Jost (freies Futura-Revival, AYA-Designsystem). Die geometrische Sans ist die Typografie der Verstaerker-Frontplatten und Reglerskalen - sie gehoert in diese Welt und traegt die Marke. Sie steht auf Ueberschriften, Knoepfen, Badges, Panel-Koepfen und Punktzahlen. Lauftext = die Schrift des Geraets. Auf iPhone und iPad ist das SF Pro, auf Android Roboto: hohe x-Hoehe, eindeutige Ziffern, fuer 12-14px Oberflaechentext abends im Auto deutlich lesbarer als eine geometrische Sans mit ihrem kreisrunden o/e. Kostet ausserdem keinen zweiten Netz-Request auf dem Hallen-WLAN. Sie steht auf Tabellen, Formularfeldern, Notizen und Kleingedrucktem. */ --font-display: "Jost", "Futura", "Century Gothic", "Avenir Next", system-ui, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --weight-light: 300; --weight-book: 400; --weight-medium: 500; --weight-bold: 700; --weight-heavy: 800; --text-2xs: 11px; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 18px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 30px; --text-3xl: 38px; --text-4xl: 48px; --text-5xl: 62px; --text-6xl: 80px; --leading-tight: 1.04; --leading-snug: 1.18; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tighter: -0.03em; --tracking-tight: -0.015em; --tracking-normal: 0em; --tracking-wide: 0.04em; --tracking-caps: 0.12em; /* ---- Spacing (4px-Basis) ---- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 96px; --space-13: 128px; /* ---- Radien ---- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-2xl: 30px; --radius-pill: 999px; --radius-circle: 50%; --border-width: 1px; --border-width-thick: 2px; --border-width-heavy: 3px; /* ---- Schatten (warm getoent, weich) ---- */ --shadow-xs: 0 1px 2px rgba(36, 38, 43, 0.06); --shadow-sm: 0 2px 6px rgba(36, 38, 43, 0.07); --shadow-md: 0 6px 18px rgba(36, 38, 43, 0.09); --shadow-lg: 0 14px 34px rgba(36, 38, 43, 0.12); --shadow-xl: 0 26px 60px rgba(36, 38, 43, 0.16); --shadow-brand: 0 10px 26px rgba(242, 97, 30, 0.28); --shadow-blue: 0 10px 26px rgba(30, 102, 188, 0.26); --shadow-inner: inset 0 1px 2px rgba(36, 38, 43, 0.08); /* ---- Motion ---- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --dur-slower: 520ms; /* ---- Layout ---- */ --container-sm: 640px; --container-md: 840px; --container-lg: 1080px; --container-xl: 1240px; --container-2xl: 1440px; --gutter: 24px; /* ============================================================ Legacy-Aliase — die wenigen alten Tokennamen, die Templates/JS noch referenzieren, zeigen auf AYA-Werte (jetzt Orange statt Gold/Braun). Bruecke fuer die Migration; bei Gelegenheit die Call-Sites auf die semantischen --brand-*/--dur-* Tokens umstellen und dann entfernen. ============================================================ */ --aya-gold: var(--brand-primary); /* zettelwirt.css, rangliste.js, home.html.twig */ --aya-brown: var(--brand-primary); /* bewertung.js — Akzent-/Label-Farbe */ --t-fast: var(--dur-fast) var(--ease-out); /* transition-Kurzform (Dauer + Easing) */ --t-base: var(--dur-base) var(--ease-out); } /* ---- Base-Resets (vertraegt sich mit Bootstrap) ---- */ ::selection { background: var(--aya-orange-200); color: var(--aya-grey-900); } /* Eyebrow / Kicker — wiederkehrendes Markendevice */ .aya-eyebrow { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--brand-primary); }