/* PliumPic landing — design tokens Mirrors ios/PliumPic/PliumPic/DesignSystem/Theme.swift + ios/DESIGN_SYSTEM.md Light is the default; dark applies via prefers-color-scheme AND a manual [data-theme] attribute on (the toggle), which always wins. */ :root { color-scheme: light; /* Brand primitives (fixed across themes) */ --c-primary: #38bdf8; /* brand sky blue — accent */ --c-orange: #f97316; /* secondary accent / icon gradient */ --c-success: #22c55e; --c-amber: #f59e0b; --c-error: #ef4444; /* Brand gradient (app icon: blue -> orange, diagonal) */ --grad-brand: linear-gradient(135deg, var(--c-primary) 0%, #a855f7 48%, var(--c-orange) 100%); --grad-brand-simple: linear-gradient(135deg, var(--c-primary), var(--c-orange)); /* Avatar color cycle (Theme.AvatarColors) */ --avatar-1: #0ea5e9; --avatar-2: #8b5cf6; --avatar-3: #10b981; --avatar-4: #f59e0b; --avatar-5: #f43f5e; --avatar-6: #6366f1; /* Semantic — light mode */ --c-bg: #ffffff; --c-bg-elevated: #ffffff; --c-fg: #1a1a2e; /* ink */ --c-muted: color-mix(in srgb, var(--c-fg) 55%, transparent); --c-border: color-mix(in srgb, var(--c-fg) 12%, transparent); --c-hairline: color-mix(in srgb, var(--c-fg) 10%, transparent); --c-card: rgba(255, 255, 255, 0.75); --c-card-solid: #ffffff; --c-input: color-mix(in srgb, var(--c-fg) 4%, transparent); --c-platter: color-mix(in srgb, var(--c-fg) 7%, transparent); --c-glass-tint: color-mix(in srgb, var(--c-primary) 6%, transparent); --c-scrim: rgba(10, 14, 30, 0.55); /* Link/text blue must stay AA on white — darker than #38BDF8 (2.1:1) */ --c-primary-text: #0a80c4; /* Ambient hero blobs */ --blob-blue: rgba(56, 189, 248, 0.20); --blob-orange: rgba(249, 115, 22, 0.14); /* Radii (Theme.Radii) */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; /* default */ --r-xl: 20px; --r-xxl: 24px; --r-pill: 999px; /* Spacing (Theme.Spacing) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* Elevation */ --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.08); --shadow-phone: 0 30px 80px rgba(10, 14, 30, 0.28); --glow-primary: 0 4px 10px rgba(56, 189, 248, 0.30); --glow-primary-lg: 0 10px 40px rgba(56, 189, 248, 0.35); /* Type */ --font-stack: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, system-ui, sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Layout */ --content-max: 1120px; --content-narrow: 720px; /* Motion */ --ease-spring: cubic-bezier(0.2, 0.9, 0.3, 1); --dur-fast: 0.2s; --dur: 0.4s; --glass-blur: saturate(1.4) blur(20px); } /* Dark via OS preference (only when the user hasn't forced a theme) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --c-bg: #1a1a1e; /* granite */ --c-bg-elevated: #23232a; --c-fg: #ffffff; --c-muted: color-mix(in srgb, var(--c-fg) 55%, transparent); --c-border: color-mix(in srgb, var(--c-fg) 12%, transparent); --c-hairline: color-mix(in srgb, var(--c-fg) 10%, transparent); --c-card: rgba(255, 255, 255, 0.08); --c-card-solid: #26262e; --c-input: color-mix(in srgb, var(--c-fg) 8%, transparent); --c-platter: color-mix(in srgb, var(--c-fg) 15%, transparent); --c-glass-tint: color-mix(in srgb, var(--c-primary) 10%, transparent); --c-primary-text: #7dd3fc; --blob-blue: rgba(56, 189, 248, 0.16); --blob-orange: rgba(249, 115, 22, 0.12); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.5); --shadow-phone: 0 30px 80px rgba(0, 0, 0, 0.6); } } /* Dark forced by the toggle (wins over OS preference) */ :root[data-theme="dark"] { color-scheme: dark; --c-bg: #1a1a1e; --c-bg-elevated: #23232a; --c-fg: #ffffff; --c-muted: color-mix(in srgb, var(--c-fg) 55%, transparent); --c-border: color-mix(in srgb, var(--c-fg) 12%, transparent); --c-hairline: color-mix(in srgb, var(--c-fg) 10%, transparent); --c-card: rgba(255, 255, 255, 0.08); --c-card-solid: #26262e; --c-input: color-mix(in srgb, var(--c-fg) 8%, transparent); --c-platter: color-mix(in srgb, var(--c-fg) 15%, transparent); --c-glass-tint: color-mix(in srgb, var(--c-primary) 10%, transparent); --c-primary-text: #7dd3fc; --blob-blue: rgba(56, 189, 248, 0.16); --blob-orange: rgba(249, 115, 22, 0.12); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.5); --shadow-phone: 0 30px 80px rgba(0, 0, 0, 0.6); }