/* ============================================================
Worldwise · Brand · Web — Terra-Play-Ableitung
worldwise.app + Marketing-Flächen.
Kontrakt: Farbwerte sind 1:1 identisch mit
directions/terra-play/tokens.css (App-Quelle der Wahrheit).
Neu hier: Web-Typografie (Nunito/Nunito Sans statt SF Rounded/
SF Pro), Typo-Skala, Spacing-Skala, Container, Chart-Farben.
Typografie Web:
--font-display → Nunito 700–1000 (OFL). Gerundete Terminals
auf normaler Proportion = nächstes freies
Äquivalent zu SF Rounded Heavy.
--font-body → Nunito Sans 400–800 (OFL). Dasselbe Skelett
ohne Rundung — spiegelt SF Rounded ↔ SF Pro.
Fallback: ui-rounded / System — auf Apple-Geräten fällt die
Marke damit wörtlich auf die App-Schriften zurück.
Google-Fonts-Einbindung (in jedem ):
Breakpoints (Empfehlung, keine Pflicht-Media-Queries — die
Typo-Skala clamp()t selbst):
≥1280 Desktop — Container 1280, Gutter 40, Hero 2-spaltig
1024 Laptop — Gutter 32, Method-Karten 3 → 3 schmal
744 Tablet — Hero stapelt (Text → Karte → Phone),
Method-Karten 1-spaltig, Nav → Burger
≤480 Phone — Gutter 20, Karten randnah, Fakten-Pills
umbrechen; Referenz-Layout: landing-mobile
============================================================ */
:root {
/* ---- Farbwelt (Kontrakt: Terra Play, Light) ---- */
--background: #F9F3E6; /* warmes Papier */
--surface: #FFFFFF;
--surface-elevated: #FFFFFF;
--surface-sunken: #F1EADA;
--separator: #E9E0CC;
--shadow: rgba(46, 61, 71, .14);
--text-primary: #20303A; /* Ink */
--text-secondary: #6E7A87;
--accent: #0AA6A6; /* Petrol */
--accent-secondary: #E56B3C; /* Terracotta */
--on-accent: #FFFFFF;
--button-edge: #077E7E;
--success: #47B45F;
--danger: #E0524A;
--xp: #F2B441;
--streak: #F08A24;
--mastery-0: #E8D9B8;
--mastery-1: #D4DF8E;
--mastery-2: #9ECB6B;
--mastery-3: #5CAF4C;
--mastery-4: #2F8A3E;
--crown-1: #B87333;
--crown-2: #9AA5B4;
--crown-3: #D9A417;
--locked: #CEC6B3;
--pill: #EFE7D3;
--on-pill: #4E5D6B;
--glass-tint: rgba(252, 248, 238, .62);
--glass-border: rgba(255, 255, 255, .65);
--progress-shine: rgba(255, 255, 255, .45);
--progress-glow: rgba(10, 166, 166, .45);
--success-edge: #339549;
--danger-edge: #BA3B34;
--accent-secondary-edge: #C24E24;
--xp-edge: #CF9422;
--streak-edge: #C96A14;
--crown-1-edge: #935B24;
--crown-2-edge: #78849A;
--crown-3-edge: #B5850D;
--locked-edge: #B3AA94;
/* ---- Web: Nacht-Panel (Footer — beide Schemes Nachtkartografie) ---- */
--night: #14222E;
--on-night: #F3ECDC;
--on-night-muted: #93A2AE;
/* ---- Web: Typografie ---- */
--font-display: "Nunito", ui-rounded, "SF Pro Rounded",
"Arial Rounded MT Bold", -apple-system, system-ui, sans-serif;
--font-body: "Nunito Sans", -apple-system, "SF Pro Text",
system-ui, "Segoe UI", sans-serif;
/* Skala (Desktop → Phone via clamp) */
--fs-display: clamp(2.75rem, 1.4rem + 4.5vw, 4.75rem); /* 44–76 */
--fs-h1: clamp(2.1rem, 1.5rem + 2vw, 3rem); /* 34–48 */
--fs-h2: clamp(1.65rem, 1.3rem + 1.4vw, 2.25rem); /* 26–36 */
--fs-h3: 1.25rem; /* 20 */
--fs-lead: clamp(1.1rem, 1rem + .4vw, 1.25rem); /* 18–20 */
--fs-body: 1.0625rem; /* 17 */
--fs-small: .9375rem; /* 15 */
--fs-caption: .8125rem; /* 13 */
--fs-eyebrow: .75rem; /* 12, ls .14em, caps */
--lh-display: 1.02;
--lh-heading: 1.12;
--lh-body: 1.55;
--w-display: 1000; /* Nunito Black+ ≈ SF Rounded Heavy */
--w-heading: 900;
--w-semibold: 700;
/* ---- Web: Spacing (4er-Raster) & Layout ---- */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
--sp-9: 96px;
--section-pad: clamp(64px, 5vw + 40px, 112px);
--container: 1280px;
--board: 960px;
--gutter: clamp(20px, 4vw, 40px);
--nav-h: 68px;
/* ---- Geometrie (Kontrakt: App) ---- */
--radius-card: 22px;
--radius-control: 14px;
--radius-chip: 10px;
--radius-pill: 999px;
--depth: 4px;
/* ---- Web: Schatten-Stufen ---- */
--shadow-card: 0 6px 18px var(--shadow);
--shadow-pop: 0 10px 26px var(--shadow);
--shadow-hero: 0 24px 60px var(--shadow);
/* ---- Web: Chart-Serien (validiert: CVD-ΔE ≥ 15, beide Surfaces;
Petrol auf Weiß 2,99:1 → immer mit Legende + Direktlabels) ---- */
--chart-1: #0AA6A6; /* mit Wiederholung */
--chart-2: #E56B3C; /* ohne Wiederholung */
--chart-grid: var(--separator);
}
:root[data-theme="dark"] {
/* ---- Farbwelt (Kontrakt: Terra Play, Dark — Nachtkartografie) ---- */
--background: #0B1526;
--surface: #152238;
--surface-elevated: #1D2C47;
--surface-sunken: #070F1D;
--separator: #26354F;
--shadow: rgba(2, 7, 15, .55);
--text-primary: #E9EFF6;
--text-secondary: #94A2B3;
--accent: #2BC4C4;
--accent-secondary: #F08356;
--on-accent: #05282E;
--button-edge: #17908F;
--success: #52C46C;
--danger: #E8655D;
--xp: #F5C14F;
--streak: #F49B3D;
--mastery-0: #E8D9B8;
--mastery-1: #D4DF8E;
--mastery-2: #9ECB6B;
--mastery-3: #5CAF4C;
--mastery-4: #2F8A3E;
--crown-1: #C98444;
--crown-2: #A7B2C2;
--crown-3: #E5B22A;
--locked: #2C3B58;
--pill: #21324F;
--on-pill: #B7C4D6;
--glass-tint: rgba(18, 30, 51, .58);
--glass-border: rgba(228, 238, 249, .14);
--progress-shine: rgba(255, 255, 255, .30);
--progress-glow: rgba(43, 196, 196, .50);
--success-edge: #3B9D53;
--danger-edge: #C24A43;
--accent-secondary-edge: #D2643B;
--xp-edge: #D8A234;
--streak-edge: #D57C24;
--crown-1-edge: #A2662F;
--crown-2-edge: #838FA3;
--crown-3-edge: #C39316;
--locked-edge: #1E2B44;
--night: #070F1D;
--on-night: #E9EFF6;
--on-night-muted: #94A2B3;
/* Chart-Serien: die Light-Hexes bestehen die Prüfung auch auf
Navy (#152238) — bewusst NICHT auf die helleren Dark-Akzente
gewechselt (zu hell für Marken-Flächen im L-Band 0.48–0.67). */
--chart-1: #0AA6A6;
--chart-2: #E56B3C;
--chart-grid: var(--separator);
}