/* ============================================================================= StreetTea design tokens — HYBRID (light marketing / dark product) :root = shared ramps + type/space/radii/motion + LIGHT theme (default) [data-theme=dark]= dark product theme (storefront pages, claim flow, scoreboard) Apply dark by setting on product templates. Green ramp + surface ladder ported from the old app; the halo glows, freshness tiers, and light-theme greens are authored. Nothing invented silently. ============================================================================= */ /* Self-hosted Inter (display + wordmark). Put woff2 in /static/fonts (adjust path to app/static as needed). Body/data stay on system stacks below. */ @font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url('/static/fonts/inter-400.woff2') format('woff2')} @font-face{font-family:'Inter';font-weight:500;font-display:swap;src:url('/static/fonts/inter-500.woff2') format('woff2')} @font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url('/static/fonts/inter-600.woff2') format('woff2')} @font-face{font-family:'Inter';font-weight:700;font-display:swap;src:url('/static/fonts/inter-700.woff2') format('woff2')} @font-face{font-family:'JetBrains Mono';font-weight:400;font-display:swap;src:url('/static/fonts/jetbrains-mono-400.woff2') format('woff2')} @font-face{font-family:'JetBrains Mono';font-weight:500;font-display:swap;src:url('/static/fonts/jetbrains-mono-500.woff2') format('woff2')} :root{ /* ---- shared color ramps (theme-independent) ---- */ --green-300:#6ee7b7; --green-400:#34d399; --green-500:#10b981; --green-600:#059669; --green-700:#047857; --green-800:#065f46; --green-900:#064e3b; --green-950:#022c22; --amber-300:#fcd34d; --amber-400:#fbbf24; --amber-500:#f59e0b; --amber-800:#92400e; --amber-900:#78350f; --red-400:#f87171; --red-500:#ef4444; --red-900:#7f1d1d; /* ---- typography ---- */ --font-display:'Inter',ui-sans-serif,system-ui,sans-serif; --font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; --w-normal:400; --w-medium:500; --w-semibold:600; --w-bold:700; --wordmark-tracking:-0.045em; /* ---- spacing (4px base) ---- */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-11:44px; --s-16:64px; /* ---- radii ---- product uses 12–20px, marketing 20–28px (both larger than old app) */ --r-sm:8px; --r-md:12px; --r-lg:14px; --r-xl:20px; --r-2xl:28px; --r-full:9999px; /* ---- motion ---- */ --ease:cubic-bezier(.4,0,.2,1); --dur-fast:150ms; --dur-theme:300ms; /* ---- authored glow (dark surfaces only) ---- */ --glow-green:0 0 18px 0 rgb(16 185 129/.34); --glow-green-strong:0 0 0 1px rgb(16 185 129/.22),0 0 34px 2px rgb(16 185 129/.34),0 0 72px 14px rgb(16 185 129/.10); --glow-amber:0 0 16px 0 rgb(245 158 11/.36); /* ========================================================================= LIGHT THEME (default) — marketing surfaces (landing, about, stores index) ========================================================================= */ --bg:#ffffff; --surface:#f4f4f5; --photo:#f1f1f3; --text-primary:#18181b; --text-strong:#27272a; --text-secondary:#52525b; --text-muted:#8a8a8f; --text-faint:#a1a1aa; --border:#e4e4e7; --border-strong:#d4d4d8; --accent:#047857; /* green tuned DEEPER for contrast on white */ --btn:#059669; --btn-hover:#047857; --btn-fg:#ffffff; --badge-bg:#ecfdf5; --badge-border:#a7f3d0; --badge-text:#047857; --badge-dot:#10b981; --badge-glow:none; --band-bg:#ecfdf5; --band-border:#a7f3d0; --hero-scrim:linear-gradient(to top,rgba(9,9,11,.55),rgba(9,9,11,0) 55%); /* only if text overlays a photo */ } /* =========================================================================== DARK THEME — product surfaces (storefront page, claim flow, scoreboard) set via =========================================================================== */ [data-theme="dark"]{ --bg:#09090b; --surface:#18181b; --surface-2:#27272a; --photo:#18181b; --text-primary:#f4f4f5; --text-strong:#e4e4e7; --text-secondary:#a1a1aa; --text-muted:#71717a; --text-faint:#52525b; --border:#27272a; --border-strong:#3f3f46; --accent:#34d399; /* bright emerald reads on near-black */ --btn:#059669; --btn-hover:#10b981; --btn-fg:#ffffff; /* verified (green) badge — glows */ --badge-bg:rgb(6 78 59/.58); --badge-border:#065f46; --badge-text:#6ee7b7; --badge-dot:#10b981; --badge-glow:var(--glow-green); /* live-fuel / time-gated (amber) badge — glows */ --fuel-bg:rgb(120 53 15/.5); --fuel-border:#92400e; --fuel-text:#fbbf24; --fuel-dot:#f59e0b; --fuel-glow:var(--glow-amber); /* daypart chips: all-day = green, timed = amber */ --dp-all-bg:rgb(6 78 59/.45); --dp-all-border:#065f46; --dp-all-text:#6ee7b7; --dp-timed-bg:rgb(120 53 15/.4); --dp-timed-border:#92400e; --dp-timed-text:#fbbf24; --hero-scrim:linear-gradient(to top,rgba(9,9,11,.94) 0%,rgba(9,9,11,.55) 42%,rgba(9,9,11,.12) 74%,rgba(9,9,11,.4) 100%); } /* --------------------------------------------------------------------------- FRESHNESS TIERS (dark product surfaces) — freshness expressed as light. Apply the tier class to a badge/section based on the record's data age. Thresholds are DEFAULTS — product decision, tune freely. general (verified): live ≤7d · fresh ≤30d · aging ≤90d · stale >90d live-fuel (amber): live ≤24h · fading ≤7d · stale >7d --------------------------------------------------------------------------- */ [data-theme="dark"] .fresh-live { border-color:var(--green-500); box-shadow:var(--glow-green); } [data-theme="dark"] .fresh-fresh { border-color:var(--green-600); box-shadow:0 0 14px 0 rgb(16 185 129/.24); } [data-theme="dark"] .fresh-aging { border-color:var(--green-800); box-shadow:0 0 10px -1px rgb(6 78 59/.5); } [data-theme="dark"] .fresh-stale { border-color:var(--border-strong); box-shadow:none; } [data-theme="dark"] .fuel-live { border-color:var(--amber-500); box-shadow:var(--glow-amber); } [data-theme="dark"] .fuel-fading { border-color:var(--amber-800); box-shadow:0 0 10px -1px rgb(245 158 11/.22); } [data-theme="dark"] .fuel-stale { border-color:var(--border-strong); box-shadow:none; } @media (prefers-reduced-motion: reduce){ .pulse{animation:none !important;} } @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}