/* ═══════════════════════════════════════════════════════════════════════════ bytefret — styles/base.css ─────────────────────────────────────────────────────────────────────────── Foundation: design-tokens (light + dark theme), reset, body atmosphere, theme-transitions, noscript-banner. MUSS first geladen werden — alle Komponenten-Files referenzieren die :root-Tokens via var(--…). Reset etabliert box-sizing für alle. Dependencies: keine. Konsumenten: alle anderen styles/-Files. ═══════════════════════════════════════════════════════════════════════════ */ /* ─── LIGHT-Tokens (Default) ──────────────────────────────────────────────── */ :root { /* Sizing / motion (theme-unabhängig) */ --radius: 8px; --radius-lg: 12px; --ease: cubic-bezier(.4, 0, .2, 1); /* B9 Audit-Architektur 2026-05-10: --cell-width ist die Single-Source- of-Truth für die Bar-Content-Spaltenbreite. .cell, .bar-num, .chord- slot, .section-slot multiplizieren mit var(--bar-size) damit alle vier Rows (string-row, bar-numbers, chord-line, section-line) gleich breit pro Bar sind. Coarse-Mode (Touch) überschreibt auf 2.5rem für Finger-Tap-Genauigkeit (M1, WCAG 2.2 SC 2.5.8 ✓), und alle vier Rows skalieren automatisch mit. Vor B9 hatten .cell und .bar-num literal-1.7rem-Werte mit nur .cell coarse-overridden → bar-numbers- row 32% schmaler als string-row pro Bar in coarse-mode. */ --cell-width: 1.7rem; /* Surfaces — warm cream paper */ --bg: #FAF7F0; /* page background */ --bg-elevated: #F2EDE0; /* topbar, meta-bar */ --bg-sunken: rgba(60, 40, 20, .07); /* btn-group, hover wells */ --bg-page: #FFFCF7; /* the sheet card top */ --bg-page-2: #FAF6EC; /* sheet card gradient end */ /* Body atmosphere */ --bg-pattern: radial-gradient(ellipse 900px 600px at 12% -8%, rgba(216, 102, 0, .045), transparent 55%), radial-gradient(ellipse 700px 500px at 110% 110%, rgba(138, 111, 71, .06), transparent 55%); /* Text */ --text: #1F1A14; /* warm espresso */ --text-muted: #6B5F4F; /* warm secondary */ --text-subtle: #8C7E6B; /* warm tertiary */ /* Borders */ --border: #D9D0BC; --border-soft: #E8E1D2; --border-strong:#B6A98E; /* Accent — warm orange (slightly print-toned for light bg) */ --accent: #D86600; --accent-hover: #E97000; --accent-soft: rgba(216, 102, 0, .12); --accent-glow: rgba(216, 102, 0, .22); --accent-on: #FFFFFF; /* text-on-accent */ /* Secondary brand — warm bronze (replaces cold teal) */ --secondary: #8A6F47; /* bronze */ --secondary-soft: rgba(138, 111, 71, .15); --secondary-line: #A3855B; /* Strings — warm graphite */ --string: #B0A28A; /* Danger */ --danger: #B83D2C; --danger-soft: rgba(184, 61, 44, .15); --danger-text: #8A2A1D; /* Card shadow (warm, not blue-grey) */ --shadow-card: 0 6px 24px rgba(60, 40, 20, .08), 0 2px 8px rgba(60, 40, 20, .05), inset 0 1px 0 rgba(255, 255, 255, .6); /* Topbar / footer fills (semi-transparent for backdrop blur) */ --bg-topbar: rgba(242, 237, 224, .82); --bg-meta: rgba(242, 237, 224, .55); --bg-footer: rgba(242, 237, 224, .65); /* Select chevron color (matches accent) */ --chevron: D86600; /* Cell hover (subtle warm wash) */ --cell-hover: rgba(138, 111, 71, .12); /* Bar-Highlight: subtler Akzent-Tint für Cells im aktiven Bar */ --bar-active-bg: rgba(216, 102, 0, .06); color-scheme: light; } /* ─── DARK-Tokens (Override) ──────────────────────────────────────────────── */ [data-theme="dark"] { /* Surfaces — warm anthracite, not blue-black */ --bg: #1A1614; --bg-elevated: #221E1A; --bg-sunken: rgba(0, 0, 0, .28); --bg-page: #25201B; /* leather-warm */ --bg-page-2: #1F1B17; /* Atmosphere — bronze + orange hints */ --bg-pattern: radial-gradient(ellipse 900px 600px at 12% -8%, rgba(165, 132, 85, .12), transparent 55%), radial-gradient(ellipse 700px 500px at 110% 110%, rgba(253, 125, 0, .07), transparent 55%); /* Text — warm off-white */ --text: #F2EBDC; --text-muted: #9C8E78; --text-subtle: #6B5E4A; /* Borders */ --border: #3A322A; --border-soft: #2D2823; --border-strong:#564938; /* Accent — full digital orange in dark */ --accent: #FD7D00; --accent-hover: #FF8E1F; --accent-soft: rgba(253, 125, 0, .15); --accent-glow: rgba(253, 125, 0, .35); --accent-on: #1A1614; /* Secondary — brass / warm bronze */ --secondary: #A48455; --secondary-soft: rgba(165, 132, 85, .18); --secondary-line: #C4A472; /* Strings — muted warm brown-grey */ --string: #4A4135; /* Danger */ --danger: #D04A3A; --danger-soft: rgba(208, 74, 58, .25); --danger-text: #FFB0A6; /* Card shadow — deep, warm */ --shadow-card: 0 14px 44px rgba(0, 0, 0, .55), 0 4px 12px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .04); /* Topbar / footer fills */ --bg-topbar: rgba(34, 30, 26, .85); --bg-meta: rgba(34, 30, 26, .55); --bg-footer: rgba(34, 30, 26, .55); /* Select chevron */ --chevron: FD7D00; /* Cell hover */ --cell-hover: rgba(165, 132, 85, .22); /* Bar-Highlight: bisschen stärker auf Dark, weil Background-Kontrast geringer */ --bar-active-bg: rgba(253, 125, 0, .10); color-scheme: dark; } /* ─── Noscript-Banner (O4) ────────────────────────────────────────────────── */ .noscript-warning { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; padding: 2rem; background: var(--bg); color: var(--text); text-align: center; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 1rem; line-height: 1.5; } .noscript-warning p { max-width: 540px; margin: 0; } .noscript-warning strong { color: var(--accent); } /* ─── Reset / Base ────────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { /* Scrollbar-Farben adaptiv (Firefox) */ scrollbar-color: var(--border-strong) transparent; } body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg-pattern), var(--bg); background-attachment: fixed; color: var(--text); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Smooth Theme-Übergänge auf den großen Surfaces. Targeted (nicht universal *) damit Hover/Focus auf cells/buttons snappy bleibt. */ body, .topbar, .tab-area, .tab-page, .tab-page::before, footer { transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); }