/* ============================================================ Clamor — Design Tokens ------------------------------------------------------------ Theater metaphor: Curtain (page) → Stage (elevated) → Velvet (hairlines) → Marquee (amber accent) → OnAir (live red). Dark-mode only for v1. ============================================================ */ /* -- Webfonts ------------------------------------------------ */ /* Note for designers: native iOS targets use Apple's "New York" serif and "SF Pro" sans. Neither ships on Google Fonts. We substitute for web previews only: • New York → Newsreader (Google Fonts, editorial serif) • SF Pro → system-ui / -apple-system stack, Inter fallback Fonts are loaded via in each page's (with the Newsreader italic axis), so there is no @import here. */ :root { /* ------- Palette (raw) ----------------------------------- */ --curtain: #0A0E1A; /* page background — deep theater navy */ --stage: #11172B; /* elevated opaque surface, reduceTransparency fallback */ --velvet: #1B2138; /* hairline borders, dividers */ --marquee: #F4B860; /* brand amber — CTA, tonight markers, glass tint */ --on-air: #FF4D4D; /* live status / recording — used ONLY in live contexts */ --house-lights: #F5F1E8; /* primary text — warm off-white, never pure white */ --audience: #8B95A8; /* secondary text, metadata */ /* ------- Semantic colors --------------------------------- */ --bg: var(--curtain); --bg-elevated: var(--stage); --border: var(--velvet); --fg: var(--house-lights); --fg-muted: var(--audience); --accent: var(--marquee); --accent-live: var(--on-air); /* ------- Marquee tint scale (the "Marcus signature") ----- */ /* Applied as glass tint or as an overlay on the opaque fallback. Values are amber at the listed alpha. */ --tint-marquee-08: rgba(244, 184, 96, 0.08); /* sheet, sign-in */ --tint-marquee-10: rgba(244, 184, 96, 0.10); /* editorial card */ --tint-marquee-12: rgba(244, 184, 96, 0.12); /* hero, primary CTA, composer-watching */ --tint-marquee-20: rgba(244, 184, 96, 0.20); /* chip-selected opaque fallback */ --tint-onair-14: rgba(255, 77, 77, 0.14); /* composer when room is live */ --tint-onair-18: rgba(255, 77, 77, 0.18); /* LIVE pill */ --tint-onair-30: rgba(255, 77, 77, 0.30); /* LIVE pill opaque fallback */ /* ------- Type — voices ----------------------------------- */ /* Marquee voice — serif, for episode titles, section heads, wordmark */ --font-marquee: "Newsreader", "New York", ui-serif, Georgia, "Times New Roman", serif; /* Program voice — sans, body */ --font-program: -apple-system, BlinkMacSystemFont, system-ui, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif; /* Digit voice — mono digits for air times, RSVP counts, minute markers */ --font-digit: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace; /* ------- Type — scale (iOS Dynamic Type defaults) ------- */ --size-large-title: 34px; --size-title-1: 28px; --size-title-2: 22px; --size-title-3: 20px; --size-headline: 17px; --size-body: 17px; --size-callout: 16px; --size-subhead: 15px; --size-footnote: 13px; --size-caption: 12px; --tracking-marquee: 0.5px; /* serif voice always +0.5pt tracking */ /* ------- Spacing — 8pt grid; 4 only for chip internals --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-screen-margin: 20px; --space-card-padding: 16px; --space-stack-gap: 12px; /* ------- Radius ------------------------------------------ */ --radius-card: 20px; --radius-sheet: 28px; --radius-composer: 24px; --radius-hero: 24px; --radius-bubble: 18px; --radius-editorial: 16px; --radius-pill: 999px; /* .capsule */ /* ------- Aspect ------------------------------------------ */ --poster-aspect: 2 / 3; /* portrait poster mosaic */ /* ------- Shadow / elevation ------------------------------ */ /* Soft drop for the floating composer + sheets */ --shadow-composer: 0 2px 8px rgba(0, 0, 0, 0.18); --shadow-glow-onair: 0 0 24px rgba(255, 77, 77, 0.35); /* ------- Motion ------------------------------------------ */ --motion-snap: cubic-bezier(0.32, 0.85, 0.32, 1); /* spring-ish */ --motion-glide: cubic-bezier(0.4, 0.0, 0.2, 1); /* easeInOut */ --duration-snap: 320ms; --duration-glide: 400ms; --duration-breathe: 1800ms; --duration-showtime: 1600ms; } /* ============================================================ Semantic type roles — match Theme.swift token names ============================================================ */ .t-marquee-title { font-family: var(--font-marquee); font-size: var(--size-large-title); font-weight: 700; letter-spacing: var(--tracking-marquee); line-height: 1.1; color: var(--fg); } .t-marquee-headline { font-family: var(--font-marquee); font-size: var(--size-title-2); font-weight: 700; letter-spacing: var(--tracking-marquee); line-height: 1.2; color: var(--fg); } .t-marquee-section { font-family: var(--font-marquee); font-size: var(--size-headline); font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--fg); } .t-program-body { font-family: var(--font-program); font-size: var(--size-body); font-weight: 400; line-height: 1.4; color: var(--fg); } .t-program-caption { font-family: var(--font-program); font-size: var(--size-caption); font-weight: 400; color: var(--fg-muted); } .t-digit-meta { font-family: var(--font-digit); font-size: var(--size-caption); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg-muted); } /* ============================================================ Base reset for previews / UI kit ============================================================ */ html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--font-program); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } * { box-sizing: border-box; }