/* ========================================================================== izzit — Colors & Type -------------------------------------------------------------------------- Source-of-truth design tokens, extracted from the iOS DesignSystem.swift / AdaptiveTypography.swift / Theme.kt files in the izzit codebase. The shipping iOS / Android apps use platform system fonts. For HTML mocks and the marketing site we use the izzit two-font web stack: • Bricolage Grotesque → display + body + UI (was -apple-system / Roboto) • JetBrains Mono → logo wordmark + meta (timestamps, counters) These are loaded from Google Fonts here. Native apps still use system stacks; the role mapping is consistent so designs read the same. See README.md → Visual Foundations → Typography for the full rationale. ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&family=JetBrains+Mono:wght@400;500;700;800&display=swap"); /* -------------------------------------------------------------------------- */ /* 1. Color Tokens */ /* -------------------------------------------------------------------------- */ :root { /* --- Brand ------------------------------------------------------------- */ --izz-coral: #FF6B6B; /* Brand Primary — "izz", buttons, headlines */ --izz-teal: #4ECDC4; /* Brand Secondary — "it", sparkle, accents */ --izz-cream: #FFF4E6; /* Brand Background — warm page tint */ /* --- Surfaces ---------------------------------------------------------- */ --izz-surface-cream: #FFF8F0; /* Elevated surfaces */ --izz-bg-warm: #FFFDF9; /* Page bg */ --izz-canvas-white: #FFFFFF; /* Drawing canvas */ --izz-card-bg: #FAF1E8; /* UI card */ --izz-system-bg: #FFFFFF; /* Fallback */ /* --- Text -------------------------------------------------------------- */ --izz-fg: #1C1B1F; /* primary text */ --izz-fg-secondary: rgba(28, 27, 31, 0.60); --izz-fg-tertiary: rgba(28, 27, 31, 0.40); --izz-fg-on-coral: #FFFFFF; --izz-fg-on-teal: #FFFFFF; /* --- Achievement / Tier ----------------------------------------------- */ --izz-gold: #FFD700; --izz-gold-secondary: #FFA500; --izz-gold-accent: #FFEB3B; --izz-gold-shimmer: #FFF5CD; --izz-gold-placard: #FFBE00; --izz-silver: #C0C0C0; /* iOS — neutral gray */ --izz-silver-android: #B3C7DE; /* Android — cooler blue-silver */ --izz-silver-secondary: #738CAE; --izz-silver-accent: #D1DEEB; --izz-silver-shimmer: #EBF2FA; --izz-silver-placard: #93A9C6; --izz-bronze: #CD7F32; --izz-bronze-secondary: #8B4513; --izz-bronze-accent: #E79A50; --izz-bronze-shimmer: #EEBB8A; --izz-bronze-placard: #AC6223; --izz-mystery: #8C4060; /* AI-stumped tier */ --izz-mystery-primary: #A64D73; --izz-mystery-secondary:#73334D; --izz-mystery-accent: #CC8099; --izz-mystery-shimmer: #E6BFCC; --izz-diamond: #B9E2F2; /* Shiny / rare tier (light blue) */ /* --- Streak ----------------------------------------------------------- */ --izz-streak: #FFA500; --izz-streak-android: #FF8C00; /* --- Semantic --------------------------------------------------------- */ --izz-success: #31C74C; --izz-warning: #FF9500; --izz-error: #EA3B3A; /* --- Drawing palette (FIXED — does not adapt to dark mode) ----------- */ --izz-draw-black: #000000; --izz-draw-red: #FF0000; --izz-draw-blue: #0000FF; --izz-draw-yellow: #FFFF00; --izz-draw-brown: #663300; --izz-draw-green: #009900; /* --- Borders & overlays ---------------------------------------------- */ --izz-border: rgba(28, 27, 31, 0.10); --izz-border-strong: rgba(28, 27, 31, 0.20); --izz-canvas-frame: rgba(255, 255, 255, 0.7); /* on dark previews */ --izz-canvas-frame-ink: #B3B3B3; /* white(0.7) on light */ /* --- Shadows ---------------------------------------------------------- */ --izz-shadow-card: 0 10px 20px rgba(0, 0, 0, 0.08); --izz-shadow-button: 0 5px 10px rgba(255, 107, 107, 0.30); --izz-shadow-trading: 0 4px 12px rgba(0, 0, 0, 0.30); /* --- Gradients -------------------------------------------------------- */ --izz-gradient-brand: linear-gradient(90deg, var(--izz-coral) 0%, var(--izz-teal) 100%); --izz-gradient-streak: linear-gradient(180deg, #FFA500 0%, #FF3B30 100%); --izz-gradient-page: linear-gradient(180deg, var(--izz-cream) 0%, rgba(255,244,230,0.8) 50%, #FFFFFF 100%); --izz-gradient-gold: linear-gradient(135deg, var(--izz-gold-shimmer) 0%, var(--izz-gold) 50%, var(--izz-gold-secondary) 100%); --izz-gradient-silver: linear-gradient(135deg, var(--izz-silver-shimmer) 0%, var(--izz-silver-android) 50%, var(--izz-silver-secondary) 100%); --izz-gradient-bronze: linear-gradient(135deg, var(--izz-bronze-shimmer) 0%, var(--izz-bronze) 50%, var(--izz-bronze-secondary) 100%); --izz-gradient-mystery: linear-gradient(135deg, var(--izz-mystery-shimmer) 0%, var(--izz-mystery-primary) 50%, var(--izz-mystery-secondary) 100%); /* --- Spacing scale --------------------------------------------------- */ --izz-space-xs: 4px; --izz-space-s: 8px; --izz-space-m: 12px; --izz-space-base: 16px; --izz-space-l: 24px; --izz-space-xl: 32px; --izz-space-xxl: 48px; /* --- Corner radii ---------------------------------------------------- */ --izz-radius-s: 4px; --izz-radius-m: 8px; --izz-radius-l: 12px; --izz-radius-xl: 16px; --izz-radius-xxl: 24px; --izz-radius-pill: 50px; /* --- Typography ------------------------------------------------------- */ /* Two-font system (Option G): */ /* sans — Bricolage Grotesque — display, body, all UI */ /* mono — JetBrains Mono — logo wordmark + meta (timestamps, */ /* counters, version strings, etc.) */ /* The legacy --izz-font-rounded alias points at sans now, so any old */ /* references keep working without a visual jolt. */ --izz-font-sans: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --izz-font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace; --izz-font-rounded: var(--izz-font-sans); /* deprecated alias — prefer --izz-font-sans */ --izz-weight-regular: 400; --izz-weight-medium: 500; --izz-weight-semibold: 600; --izz-weight-bold: 700; --izz-weight-black: 900; /* --- Animation timings ----------------------------------------------- */ --izz-spring-standard: cubic-bezier(0.32, 0.72, 0.30, 1.0); --izz-spring-quick: cubic-bezier(0.30, 0.80, 0.30, 1.0); --izz-ease-out: cubic-bezier(0.16, 1, 0.30, 1); --izz-press-scale: 0.95; } /* The marketing site forces the warm light theme regardless of the user's OS dark-mode preference (see comment in index.html / privacy / support). Most page sections hardcode white card backgrounds and warm cream tints that don't have dark counterparts — flipping the tokens only inverts half the page. The dark-mode block is preserved here as a comment for when a proper dark-mode redesign happens. When that day comes: every #fff / #1c1b1f / rgba(255,253,249,...) / rgba(28,27,31,...) literal in index.html / privacy/index.html / support/index.html needs to migrate to a token, and the warm gradients in `.hero::before`, `.tiers .t-card-back`, `.cta-ticket`, the marquee, and the privacy section need dark variants. Once that work is done, restore this media query and drop the `color-scheme: light` overrides in the page