/* ============================================================ PULLZ — Design Tokens (colors + type) "Your safe way to be surprised." iOS-first mystery trading-card / mystery-pack app. ============================================================ */ /* ---- Self-hosted brand face: SF Pro Display ---- */ @font-face { font-family:"SF Pro Display"; font-weight:400; font-style:normal; src:url("./fonts/SFPRODISPLAYREGULAR.OTF") format("opentype"); font-display:swap; } @font-face { font-family:"SF Pro Display"; font-weight:500; font-style:normal; src:url("./fonts/SFPRODISPLAYMEDIUM.OTF") format("opentype"); font-display:swap; } @font-face { font-family:"SF Pro Display"; font-weight:700; font-style:normal; src:url("./fonts/SFPRODISPLAYBOLD.OTF") format("opentype"); font-display:swap; } /* Italics (uploaded set is italic-only for the lighter/heavier ends) */ @font-face { font-family:"SF Pro Display"; font-weight:200; font-style:italic; src:url("./fonts/SFPRODISPLAYULTRALIGHTITALIC.OTF") format("opentype"); font-display:swap; } @font-face { font-family:"SF Pro Display"; font-weight:100; font-style:italic; src:url("./fonts/SFPRODISPLAYTHINITALIC.OTF") format("opentype"); font-display:swap; } @font-face { font-family:"SF Pro Display"; font-weight:300; font-style:italic; src:url("./fonts/SFPRODISPLAYLIGHTITALIC.OTF") format("opentype"); font-display:swap; } @font-face { font-family:"SF Pro Display"; font-weight:600; font-style:italic; src:url("./fonts/SFPRODISPLAYSEMIBOLDITALIC.OTF") format("opentype"); font-display:swap; } @font-face { font-family:"SF Pro Display"; font-weight:800; font-style:italic; src:url("./fonts/SFPRODISPLAYHEAVYITALIC.OTF") format("opentype"); font-display:swap; } @font-face { font-family:"SF Pro Display"; font-weight:900; font-style:italic; src:url("./fonts/SFPRODISPLAYBLACKITALIC.OTF") format("opentype"); font-display:swap; } :root { /* ---------- BRAND ---------- */ --pz-purple: #6E3FF3; /* rgb(110,63,243) — primary brand */ --pz-purple-bright: #B44FFF; /* rgb(180,79,255) — gradient top-end */ --pz-periwinkle: #6D6DF6; /* rgb(109,109,246) — active nav pill */ --pz-violet-ink: #2B2A5E; /* rgb(43,42,94) — control track / icon chips */ /* The signature brand gradient (top → bottom in Figma) */ --pz-grad-brand: linear-gradient(180deg, #6E3FF3 0%, #B44FFF 100%); /* @kind color */ /* ---------- SURFACES / BACKGROUNDS ---------- */ --pz-bg: #0A0A16; /* rgb(10,10,22) — app canvas */ --pz-bg-deep: #0A0A0A; /* rgb(10,10,10) — pure ink (notch, sheets) */ --pz-bg-raise: #141422; /* rgb(20,20,34) — raised surface base */ /* Standard "glass card" fill — purple-tinted, fades to ink */ --pz-surface-card: linear-gradient(180deg, rgba(110,63,243,0.14) 0%, rgba(20,20,34,0.95) 100%); --pz-surface-stat: linear-gradient(180deg, rgba(110,63,243,0.07) 0%, rgba(20,20,34,0.475) 100%); --pz-surface-glass: linear-gradient(180deg, rgba(255,255,255,0.096) 0%, rgba(255,255,255,0.042) 100%); /* ---------- ACCENTS / SEMANTIC ---------- */ --pz-gold: #B8943A; /* rgb(184,148,58) — premium / store credit */ --pz-gold-light: #CFBD8F; /* rgb(207,189,143) */ --pz-grad-gold: linear-gradient(90deg, #B8943A 0%, #CFBD8F 100%); /* @kind color */ --pz-cream: #FFEDDB; /* rgb(255,237,219) — inner-glow on hero buttons */ /* ---------- APPLE-CLEAN STORE (light marketplace, exact Apple values) ---------- */ --pz-store-bg: #F5F5F7; /* Apple store canvas (soft cool grey) */ --pz-store-card: #FFFFFF; /* product / surface cards */ --pz-store-ink: #1D1D1F; /* primary text */ --pz-store-grey: #6E6E73; /* secondary text */ --pz-store-line: #D2D2D7; /* hairline / control border */ --pz-store-blue: #0066CC; /* links & primary CTA (Apple blue) */ /* ---------- THEMEABLE ACCENT HOOKS ---------- */ /* Default (purple brand). The Warm palette overrides these on .pz-theme-warm so every token-driven chrome surface retints together. */ --pz-accent-glow-c: rgba(110,63,243,0.55); /* TopNav active-pill glow */ --pz-pop-bg: rgba(22,18,42,0.97); /* @kind color */ --pz-arc-accent: #B44FFF; /* Arcade chrome accent */ --pz-arc-accent-soft: rgba(180,79,255,0.16); --pz-arc-accent-line: rgba(180,79,255,0.40); --pz-green: #3DBA3D; /* rgb(61,186,61) — live dot / positive */ --pz-green-deep: #1D771D; /* rgb(29,119,29) */ --pz-grad-green: linear-gradient(135deg, #205720 0%, #1E771E 50%, #ffffff 100%); /* @kind color */ /* wallet pill */ --pz-grad-wallet: linear-gradient(180deg, #1D771D 0%, #3DBA3D 50%, #95BD95 100%); /* @kind color */ /* balance card */ --pz-pink: #FF4D88; /* rgb(255,77,136) — sell-back / negative value */ --pz-value-gold: #FFE39E; /* rgb(255,227,158) — winning pull value */ /* ---------- TEXT ---------- */ --pz-text: #FFFFFF; --pz-text-90: rgba(255,255,255,0.90); --pz-text-80: rgba(255,255,255,0.80); --pz-text-75: rgba(255,255,255,0.75); --pz-text-60: rgba(255,255,255,0.60); --pz-text-30: rgba(255,255,255,0.30); /* inactive nav items */ /* ---------- BORDERS / HAIRLINES ---------- */ --pz-border-purple: 1px solid rgba(110,63,243,0.28); /* @kind other */ /* glass card edge */ --pz-border-white: 1px solid rgba(255,255,255,0.13); /* @kind other */ /* gradient pill edge */ --pz-border-glass: 1px solid rgba(255,255,255,0.40); /* @kind other */ /* glass chip edge */ --pz-hairline: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(255,255,255,0.08) 50%, rgba(0,0,0,0) 100%); /* @kind other */ /* top inner highlight */ /* ---------- RADII ---------- */ --pz-r-chip: 12px; --pz-r-btn: 16px; --pz-r-card: 24px; --pz-r-sheet: 25px; --pz-r-pill: 100px; --pz-r-avatar: 22px; /* on a 44px element = circle */ /* ---------- SHADOWS / ELEVATION ---------- */ /* Soft purple-tinted card lift */ --pz-shadow-card: 0px 4px 20px 0px rgba(0,0,0,0.35), 0px 0px 24px 0px rgba(110,63,243,0.12); /* Brand glow — used on avatars, badges, the purple chip */ --pz-glow-purple: 0px 0px 16px 0px rgba(110,63,243,0.55); /* The signature "hero CTA" — white ring, cream halo, layered purple drop + inner cream glow */ --pz-shadow-hero: 0 0 0 5px #FFFFFF, 0 0 0 4px #F1E7E0, 0 3.714px 4.846px 0 rgba(184,148,58,0.1533), 0 10.268px 13.398px 0 rgba(82,46,181,0.22), 0 24.721px 32.257px 0 rgba(138,97,255,0.1867), 0 42px 107px 0 rgba(98,52,227,0.34), inset 0 1px 4px 2px #FFEDDB, inset 0 1px 18px 2px #FFEDDB; /* Gold variant of the hero CTA (store-credit "Spend" button) */ --pz-shadow-hero-gold: 0 0 0 5px #FFFFFF, 0 0 0 4px #F1E7E0, 0 3.714px 4.846px 0 rgba(184,148,58,0.1533), 0 10.268px 13.398px 0 rgba(184,148,58,0.22), 0 24.721px 32.257px 0 rgba(184,148,58,0.1867), 0 42px 107px 0 rgba(184,148,58,0.34), inset 0 1px 4px 2px #FFEDDB, inset 0 1px 18px 2px #FFEDDB; --pz-glow-live: 0px 0px 8px 0px rgba(61,186,61,0.9); /* live activity dot */ /* Grain texture overlaid on hero buttons (copy assets/button-grain.png alongside) */ --pz-grain: url("./assets/button-grain.png"); /* @kind other */ /* ============================================================ TYPE Primary face = SF Pro Display (Apple system font; renders natively on Apple devices). On non-Apple platforms the stack falls back to the OS UI sans. See README → VISUAL FOUNDATIONS. ============================================================ */ --pz-font: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", system-ui, sans-serif; /* Weights actually used in the file */ --pz-w-regular: 400; /* @kind font */ --pz-w-medium: 500; /* @kind font */ --pz-w-semibold: 600; /* @kind font */ --pz-w-bold: 700; /* @kind font */ /* Type scale (px, from the Figma) */ --pz-display: 45px; /* bold — hero headline ("$10 pack…") */ --pz-balance: 44px; /* bold — wallet balance number */ --pz-h1: 25px; /* bold — sheet title ("Welcome Back!") */ --pz-h2: 20px; /* bold — screen / nav-bar title */ --pz-h3: 18px; /* bold — card / section heading */ --pz-body-lg: 16px; /* reg/bold — buttons, body emphasis */ --pz-body: 14px; /* reg — default body / list copy */ --pz-caption: 12px; /* med/bold — badge & micro labels */ --pz-micro: 10px; /* reg — tiniest meta */ } /* ---------- SEMANTIC ROLE CLASSES ---------- */ .pz-display { font: var(--pz-w-bold) var(--pz-display)/1 var(--pz-font); letter-spacing: -0.5px; color: var(--pz-text); text-wrap: balance; } .pz-h1 { font: var(--pz-w-bold) var(--pz-h1)/1 var(--pz-font); color: var(--pz-text); } .pz-h2 { font: var(--pz-w-bold) var(--pz-h2)/1 var(--pz-font); color: var(--pz-text); } .pz-h3 { font: var(--pz-w-bold) var(--pz-h3)/1 var(--pz-font); color: var(--pz-text); } .pz-body-lg { font: var(--pz-w-regular) var(--pz-body-lg)/1.35 var(--pz-font); color: var(--pz-text-80); } .pz-body { font: var(--pz-w-regular) var(--pz-body)/1.4 var(--pz-font); color: var(--pz-text-60); } .pz-caption { font: var(--pz-w-semibold) var(--pz-caption)/1 var(--pz-font); color: var(--pz-text-75); letter-spacing: 0.2px; } .pz-label { font: var(--pz-w-bold) var(--pz-caption)/1 var(--pz-font); color: var(--pz-text); } /* ============================================================ WARM THEME — premium charcoal + champagne-gold chrome. Applied to .pz-device when the Warm palette is active. Retints every token-driven chrome surface (top nav, glass cards/boxes, buttons, toggles, avatars, glows, Arcade chrome) into the warm family so nothing reads as leftover purple against the graphite ground. ============================================================ */ .pz-theme-warm { --pz-purple: #C2A059; /* champagne gold — primary accent */ --pz-purple-bright: #E0C684; /* gradient top-end */ --pz-periwinkle: #B89248; /* active bottom-nav pill */ --pz-violet-ink: #26232E; /* nav track — warm charcoal */ --pz-grad-brand: linear-gradient(180deg, #D9B978 0%, #AE8838 100%); /* @kind color */ --pz-surface-card: linear-gradient(180deg, rgba(255,244,224,0.06) 0%, rgba(26,24,30,0.95) 100%); --pz-surface-stat: linear-gradient(180deg, rgba(255,244,224,0.045) 0%, rgba(26,24,30,0.5) 100%); --pz-border-purple: 1px solid rgba(194,160,89,0.26); /* @kind other */ --pz-glow-purple: 0 0 16px 0 rgba(194,160,89,0.45); --pz-shadow-card: 0 4px 20px 0 rgba(0,0,0,0.42), 0 0 24px 0 rgba(194,160,89,0.10); --pz-shadow-hero: var(--pz-shadow-hero-gold); --pz-accent-glow-c: rgba(194,160,89,0.50); --pz-pop-bg: rgba(26,24,30,0.97); --pz-arc-accent: #D9B978; --pz-arc-accent-soft: rgba(217,185,120,0.15); --pz-arc-accent-line: rgba(217,185,120,0.42); }