/* ========================================================================== Suite design tokens — static part ("Studio Clean" handoff values). -------------------------------------------------------------------------- Scoped to .cbtt-scope (wp-admin: set on for every cbtt* screen via admin_body_class; frontend/standalone pages: set on the plugin containers). Deliberately NOT :root — the CBTT-Turbo theme prints its own, differently valued --cbtt-* variables site-wide and the names must not collide. The PRESET-dependent semantic tokens (--cbtt-primary, --cbtt-bg, --cbtt-surface, --cbtt-text, --cbtt-border, --cbtt-radius-sm/md/lg, --cbtt-shadow-sm/md, --cbtt-focus-ring, --cbtt-font-sans, status colors, grid availability colors) are NOT defined here: they are printed as an inline block on this stylesheet's handle by cbtt_suite_design_inline_css() (core/design/design_tokens.php) so the teacher's chosen preset decides their values. With the 'theme' preset that block is absent on purpose and consumers fall back to their var() defaults. Values mirror design-guidelines/design_handoff_cbtt_theme/tokens.css in the Win Timetable Solver repo; documentation in markdowns/plugin/DESIGN-SYSTEM.md. ========================================================================== */ /* Figtree, self-hosted (OFL — see ../fonts/figtree/OFL.txt). No CDN request: fonts.googleapis.com/gstatic must never appear in shipped code (GDPR). Variable font, wght 300–900, latin + latin-ext. Only downloaded when a rendered element actually uses the family, so the 'theme' preset (which never prints --cbtt-font-sans) costs nothing. */ @font-face { font-family: "Figtree"; src: url("../fonts/figtree/figtree-latin-wght.woff2") format("woff2-variations"), url("../fonts/figtree/figtree-latin-wght.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Figtree"; src: url("../fonts/figtree/figtree-latin-ext-wght.woff2") format("woff2-variations"), url("../fonts/figtree/figtree-latin-ext-wght.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Selector list MUST match cbtt_suite_design_frontend_scope() (design_tokens.php): the palette prints on those containers, and the static tokens below have to reach the same elements — a container-scoped palette over :root-less static tokens left --cbtt-body/-ink/-muted undefined inside the wizard (or worse, inherited from the theme's differently valued :root variables). */ .cbtt-scope, #cbv2-modal, #cbv2-app, .cbtt-open-btn-wrap, .cbtt-sm-shell, .student-manager-container, .student-note-container, .price-table-container { /* ---- Brand constants (preset-independent) --------------------------- */ --cbtt-navy: #003f86; --cbtt-navy-deep: #002b57; --cbtt-teal: #0193aa; --cbtt-teal-ink: #086b7e; --cbtt-white: #ffffff; --cbtt-paper: #f7f3ec; --cbtt-muted: #7c8494; --cbtt-body: #4a5262; --cbtt-ink: #1f2733; /* ---- Dark surfaces (handoff [data-theme="dark"] values) --------------- The suite has exactly one dark surface: the opt-in admin chrome (modules/solver/assets/css/admin-chrome.css). It reads these names with the same literals as fallbacks, so foreign wp-admin screens (no .cbtt-scope) render identically. */ --cbtt-dark-surface: #131a24; --cbtt-dark-surface-alt: #1b2432; --cbtt-dark-border: #263140; --cbtt-dark-surface-glass: rgba(19, 26, 36, 0.85); /* ---- Info status: preset-dependent since 2026-08-29 ------------------ --cbtt-info / -info-tint / -info-ink are printed by the palette emitter (design_tokens.php) so focus rings, active tab markers and info alerts follow an orange/custom choice instead of staying navy. Consumers keep their literal fallbacks for the 'theme' preset. */ /* ---- Typography ----------------------------------------------------- */ --cbtt-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace; --cbtt-fs-display: 2.875rem; /* 46px — website hero only */ --cbtt-fs-h1: 2.125rem; /* 34px — website; admin H1 uses --cbtt-fs-h2 */ --cbtt-fs-h2: 1.5rem; /* 24px */ --cbtt-fs-h3: 1.25rem; /* 20px */ --cbtt-fs-body: 1rem; /* 16px — frontend body */ --cbtt-fs-sm: 0.875rem; /* 14px — admin body */ --cbtt-fs-caption: 0.75rem; /* 12px */ --cbtt-fw-regular: 400; --cbtt-fw-medium: 500; --cbtt-fw-semibold: 600; --cbtt-fw-bold: 700; --cbtt-fw-extrabold: 800; --cbtt-fw-black: 900; --cbtt-lh-tight: 1.05; --cbtt-lh-heading: 1.15; --cbtt-lh-body: 1.6; --cbtt-ls-tight: -0.025em; --cbtt-ls-caption: 0.08em; /* Lesbare Zeilenlaenge fuer Fliesstext (Hilfetexte, Sektions-Intros). Vorgabe des Betreibers: 50-75 Zeichen je gerenderter Zeile. ACHTUNG, haeufiger Denkfehler: 1ch ist die Vorschubbreite der Ziffer 0, NICHT die eines mittleren Prosazeichens. In Figtree ist 1ch das 1,4-fache — am 2026-09-01 im wp-admin bei 13px und 14px nachgemessen (Range.getClientRects()). Damit rendert das frueher hier verwendete 72ch rund 99 Zeichen je Zeile, also klar ausserhalb der Vorgabe; 55ch traf im Kalibriertext 72 Zeichen (englisch) bzw. 71 (deutsch) -- an echter deutscher Prosa der Suite dann aber 76-78, weil die Wortlaengen dort groesser sind. Deshalb 52ch: damit liegen auch die dichtesten gemessenen Absaetze unter 75 (nachgemessen 2026-09-01). ch statt px, damit der Wert bei anderer Schriftgroesse dieselbe ZEICHENzahl haelt — die Suite druckt Hilfetexte mit 13px und 14px. */ /* MONITOR: Das macht ein sehr schlechtes Layout --cbtt-measure: 52ch; */ /* ---- Radius / elevation extremes ------------------------------------ */ --cbtt-radius-xl: 20px; --cbtt-radius-pill: 999px; --cbtt-shadow-lg: 0 14px 40px rgba(0, 43, 87, 0.08); /* ---- Spacing scale (4px base) --------------------------------------- */ --cbtt-space-1: 4px; --cbtt-space-2: 8px; --cbtt-space-3: 12px; --cbtt-space-4: 16px; --cbtt-space-5: 20px; --cbtt-space-6: 24px; --cbtt-space-8: 32px; --cbtt-space-10: 40px; --cbtt-space-12: 48px; --cbtt-space-14: 56px; }