/* TagYourSample — app.css v3 ──────────────────────────────────────────────────────────────────── */ /* ── Font ── (preconnect + preload links handled in HTML ) */ @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700;800;900&display=swap"); /* ═══════════════════════════════════════════════════════ CSS VARIABLES — single source of truth, changed per theme ═══════════════════════════════════════════════════════ */ :root { /* Backgrounds */ --bg: #f1f5f9; --bg-soft: #f8fafc; --card: #ffffff; --card-2: #f8fafc; /* Text */ --txt: #0f172a; --muted: #64748b; --muted-2: #94a3b8; /* Borders */ --border: #e2e8f0; --border-soft: #f1f5f9; /* Accent — sky blue */ --accent: #0284c7; --accent-2: #38bdf8; --accent-hover: #0369a1; --accent-ghost: rgba(2, 132, 199, 0.10); --accent-glow: rgba(2, 132, 199, 0.22); --accent-txt: #fff; /* Waveform */ --wave-accent: #0284c7; --wave-border: rgba(2, 132, 199, 0.22); --wave-grid: rgba(2, 132, 199, 0.07); --wave-bg: #f8fafc; /* Semantic */ --danger: #dc2626; --danger-ghost: rgba(220, 38, 38, 0.10); --success: #16a34a; /* Shadows */ --shadow: 0 1px 4px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04); --shadow-md: 0 2px 8px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.05); --shadow-lg: 0 4px 16px rgba(0,0,0,0.10), 0 8px 32px rgba(0,0,0,0.06); /* Radii */ --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; } /* ── Dark theme — override only variables ── */ html[data-theme="dark"] { color-scheme: dark; --bg: #0d0e17; --bg-soft: #121420; --card: #16192a; --card-2: #1c2035; --txt: #e2e8f0; --muted: #6b7a9f; --muted-2: #4a5578; --border: rgba(148,163,220,0.10); --border-soft: rgba(148,163,220,0.05); --accent: #38bdf8; --accent-2: #7dd3fc; --accent-hover: #0ea5e9; --accent-ghost: rgba(56, 189, 248, 0.12); --accent-glow: rgba(56, 189, 248, 0.28); --wave-bg: #16192a; --shadow: 0 1px 4px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.4); --shadow-md: 0 2px 8px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.5); --shadow-lg: 0 4px 20px rgba(0,0,0,0.7), 0 8px 40px rgba(0,0,0,0.5); } /* ── 420 Cannabis theme ── */ html[data-theme="420"] { color-scheme: dark; --bg: #060e07; --bg-soft: #0a1609; --card: #0e1c0f; --card-2: #132115; --txt: #d1fae5; --muted: #6ee7b7; --muted-2: #34d399; --border: rgba(34, 197, 94, 0.18); --border-soft: rgba(34, 197, 94, 0.07); --accent: #22c55e; --accent-2: #4ade80; --accent-hover: #16a34a; --accent-ghost: rgba(34, 197, 94, 0.14); --accent-glow: rgba(34, 197, 94, 0.32); --accent-txt: #052e16; --wave-accent: #22c55e; --wave-border: rgba(34, 197, 94, 0.25); --wave-grid: rgba(34, 197, 94, 0.08); --wave-bg: #0e1c0f; --danger: #f87171; --shadow: 0 1px 4px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.4); --shadow-md: 0 2px 8px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.5); --shadow-lg: 0 4px 16px rgba(0,0,0,0.7), 0 8px 32px rgba(0,0,0,0.6); } /* ═══════════════════════════════════════════════════════ RESET + BASE ═══════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; color: var(--txt); background: var(--bg); font-family: "Outfit", system-ui, -apple-system, sans-serif; font-size: 14px; line-height: 1.55; min-height: 100vh; min-height: 100dvh; padding: 16px; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Subtle tinted bg — static, no animation for performance */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 10% 10%, rgba(2,132,199,0.07) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 85% 85%, rgba(14,165,233,0.05) 0%, transparent 55%); } html[data-theme="dark"] body::before { background: radial-gradient(ellipse 60% 50% at 10% 10%, rgba(56,189,248,0.10) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 85% 85%, rgba(99,102,241,0.08) 0%, transparent 55%); } html[data-theme="420"] body::before { background: radial-gradient(ellipse 60% 50% at 10% 10%, rgba(22,163,74,0.18) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 85% 85%, rgba(16,185,129,0.12) 0%, transparent 55%); } /* ── Logo master pulse — theme-overrides ── */ /* Default & dark: use the tys_masterPulse animation already defined in SVG