/* ==================================================================== playroom studios — Talent Portal Redesign Tokens ==================================================================== Drop this into your project as the single source of design truth. Override per-tone variants by setting [data-tone="..."] on or any wrapper element. ==================================================================== */ :root { /* ----- Brand palette ---------------------------------------------- */ --pr-paper: #FAF7F2; /* off-white, primary background of brand */ --pr-ink: #0A0A0A; /* near-black, primary text & dark surfaces */ --pr-accent: #FF4A1C; /* signal orange, used sparingly */ /* ----- Surface tokens (overridden by [data-tone]) ----------------- */ --surface-bg: var(--pr-ink); --surface-fg: var(--pr-paper); --surface-fg-2: rgba(250, 247, 242, 0.72); /* muted body text */ --surface-fg-3: rgba(250, 247, 242, 0.45); /* eyebrows, labels */ --surface-line: rgba(250, 247, 242, 0.10); /* hairlines */ --surface-card: rgba(250, 247, 242, 0.03); /* card bg */ --surface-card-hover:rgba(250, 247, 242, 0.06); --accent: var(--pr-accent); --accent-fg: var(--pr-paper); /* ----- Type ------------------------------------------------------- */ --pr-font-display: "Neuzeit Grotesk", "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --pr-font-mono: ui-monospace, "JetBrains Mono", "Fira Code", "SF Mono", Menlo, monospace; /* ----- Type scale (clamps for fluid type) ------------------------- */ --t-display: clamp(56px, 7vw, 104px); /* hero headline */ --t-h2: clamp(32px, 3.5vw, 48px); /* section heads */ --t-h3: 28px; /* card titles */ --t-h4: 22px; /* sub headlines */ --t-body: 16px; /* body */ --t-body-lg: 18px; /* lede */ --t-small: 14px; /* card body */ --t-mono: 11px; /* mono labels */ /* ----- Radius ----------------------------------------------------- */ --r-card: 4px; --r-button: 4px; --r-pill: 999px; /* ----- Spacing ---------------------------------------------------- */ --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: 80px; --sp-10: 120px; /* ----- Motion ----------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --t-fast: 0.18s; --t-base: 0.22s; --t-slow: 0.36s; } /* ==================================================================== Tone variants — apply [data-tone="…"] to (or any container) ==================================================================== */ /* T1 — Studio Dark (DEFAULT): Ink dominant, Accent als Hochlicht */ [data-tone="studio-dark"] { --surface-bg: #0E0E0E; --surface-fg: #FAF7F2; --surface-fg-2: rgba(250, 247, 242, 0.72); --surface-fg-3: rgba(250, 247, 242, 0.45); --surface-line: rgba(250, 247, 242, 0.10); --surface-card: rgba(250, 247, 242, 0.03); --surface-card-hover: rgba(250, 247, 242, 0.06); --accent: #FF4A1C; --accent-fg: #FAF7F2; } /* T2 — Editorial Paper: hell, ruhig, viel Whitespace */ [data-tone="editorial-paper"] { --surface-bg: #FAF7F2; --surface-fg: #0A0A0A; --surface-fg-2: rgba(10, 10, 10, 0.70); --surface-fg-3: rgba(10, 10, 10, 0.45); --surface-line: rgba(10, 10, 10, 0.10); --surface-card: rgba(10, 10, 10, 0.025); --surface-card-hover: rgba(10, 10, 10, 0.05); --accent: #FF4A1C; --accent-fg: #FAF7F2; } /* T3 — Bold Accent: Accent als Hero-Farbe */ [data-tone="bold-accent"] { --surface-bg: #FF4A1C; --surface-fg: #FAF7F2; --surface-fg-2: rgba(250, 247, 242, 0.85); --surface-fg-3: rgba(250, 247, 242, 0.60); --surface-line: rgba(250, 247, 242, 0.18); --surface-card: rgba(10, 10, 10, 0.10); --surface-card-hover: rgba(10, 10, 10, 0.18); --accent: #0A0A0A; --accent-fg: #FAF7F2; } /* T4 — Warm Studio: warmes Off-Black */ [data-tone="warm-studio"] { --surface-bg: #1A1714; --surface-fg: #F5EFE6; --surface-fg-2: rgba(245, 239, 230, 0.74); --surface-fg-3: rgba(245, 239, 230, 0.46); --surface-line: rgba(245, 239, 230, 0.12); --surface-card: rgba(245, 239, 230, 0.04); --surface-card-hover: rgba(245, 239, 230, 0.07); --accent: #FF6B3D; --accent-fg: #1A1714; }