/* ============================================================================ * THEME TOKENS — the one file to edit to re-skin the whole app. * ---------------------------------------------------------------------------- * Grounded in the official Tony Robbins digital style guide: * • Canvas: pure black / near-black, charcoal surfaces * • Type: "Suisse Int'l" (medium). Inter is the free, near-identical match. * • Accent: a single confident red CTA; gold reserved for premium moments. * Change a value here and it cascades everywhere. Want a light theme or a * different brand? Override these variables — no other CSS needs to change. * ==========================================================================*/ :root { /* ── Brand canvas (black + charcoal) ───────────────────────────────────── */ --color-bg: #000000; /* page background */ --color-bg-2: #0B0B0D; /* deep panels */ --color-surface: #141417; /* cards */ --color-surface-2: #1C1C20; /* raised / active card */ --color-line: #2A2A30; /* hairline borders */ --color-line-soft: #1F1F24; /* ── Text ──────────────────────────────────────────────────────────────── */ --color-text: #FFFFFF; --color-text-soft: rgba(255,255,255,0.72); --color-text-muted: rgba(255,255,255,0.46); --color-text-on-accent:#FFFFFF; /* ── Accent (the single bright CTA red) ────────────────────────────────── */ --color-accent: #E11D2D; --color-accent-hover: #B8121F; --color-accent-soft: rgba(225,29,45,0.14); /* ── Gold (premium — used on the final MAP) ────────────────────────────── */ --color-gold: #E0A938; --color-gold-bright: #F4C95B; --color-gold-soft: rgba(224,169,56,0.14); /* ── Step status (checklist circles) ───────────────────────────────────── */ --status-done: #22C55E; /* green — complete */ --status-active: #F5B528; /* amber/yellow — working on it now */ --status-todo: #45454C; /* grey — not done yet */ /* ── Phase accents (R / P / M) ─────────────────────────────────────────── */ --phase-r: #E11D2D; /* Results — red */ --phase-p: #E0A938; /* Purpose — gold */ --phase-m: #C9CCD4; /* Massive Action — platinum */ /* ── Typography ────────────────────────────────────────────────────────── */ --font-heading: "Suisse Intl", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Suisse Intl", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-eyebrow: 0.22em; /* uppercase kicker labels */ --leading-heading: 1.05; --leading-body: 1.6; /* Fluid type scale */ --fs-display: clamp(2.4rem, 5.5vw, 4.25rem); --fs-h1: clamp(1.9rem, 3.6vw, 3rem); --fs-h2: clamp(1.4rem, 2.4vw, 2rem); --fs-h3: 1.25rem; --fs-lg: 1.125rem; --fs-body: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.75rem; /* ── Shape & depth ─────────────────────────────────────────────────────── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.5); --shadow-md: 0 10px 30px rgba(0,0,0,0.55); --shadow-cta: 0 8px 24px rgba(225,29,45,0.35); --shadow-gold:0 8px 28px rgba(224,169,56,0.28); /* ── Buttons ───────────────────────────────────────────────────────────── */ --btn-pad: 0.85rem 1.6rem; --btn-radius: var(--radius-sm); --btn-transform: uppercase; --btn-tracking: 0.08em; --btn-weight: var(--fw-semibold); --btn-fs: 0.875rem; /* ── Layout ────────────────────────────────────────────────────────────── */ --container: 760px; --container-wide: 1080px; --space: 1rem; --gutter: clamp(1rem, 4vw, 2.5rem); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur: 0.42s; } /* ============================================================================ * SURFACE TOKENS shared by all themes (defaults = the dark brand theme above). * Each [data-theme] block below overrides the color tokens only. * ==========================================================================*/ :root { --color-on-gold: #1a1206; /* text on a gold fill */ --topbar-bg: rgba(0,0,0,0.82); --login-bg: radial-gradient(120% 90% at 50% 0%, #16060a 0%, #000 55%); --ceremony-bg: radial-gradient(120% 90% at 50% 30%, #1a0a0d 0%, #000 60%); --map-bg: linear-gradient(180deg, #0c0c0e 0%, #000 100%); } /* ── THEME: Daylight (light mode) ──────────────────────────────────────── */ [data-theme="light"] { --color-bg: #F6F7F9; --color-bg-2: #EDEFF3; --color-surface: #FFFFFF; --color-surface-2: #F2F4F7; --color-line: #E1E4EA; --color-line-soft: #ECEEF2; --color-text: #15171B; --color-text-soft: rgba(21,23,27,0.72); --color-text-muted: rgba(21,23,27,0.50); --color-text-on-accent: #FFFFFF; --color-accent: #E11D2D; --color-accent-hover: #B8121F; --color-accent-soft: rgba(225,29,45,0.10); --color-gold: #B0801F; /* darker so it reads on white */ --color-gold-bright: #946914; --color-gold-soft: rgba(176,128,31,0.13); --status-done: #17A957; --status-active: #C7891A; --status-todo: #C3C8D0; --phase-r: #E11D2D; --phase-p: #B0801F; --phase-m: #5F6671; --shadow-sm: 0 1px 3px rgba(20,30,55,0.08); --shadow-md: 0 10px 30px rgba(20,30,55,0.12); --shadow-cta: 0 8px 22px rgba(225,29,45,0.22); --shadow-gold:0 8px 24px rgba(176,128,31,0.20); --color-on-gold: #FFFFFF; --topbar-bg: rgba(255,255,255,0.85); --login-bg: radial-gradient(120% 90% at 50% 0%, #FFF0F1 0%, #EDEFF3 55%); --ceremony-bg: radial-gradient(120% 90% at 50% 30%, #FFFFFF 0%, #EAEDF2 60%); --map-bg: linear-gradient(180deg, #FFFFFF 0%, #F4F6FA 100%); } [data-theme="light"] .btn-ghost:hover:not(:disabled) { background: rgba(0,0,0,0.04); } /* ── THEME: Ocean (navy + blue, à la the prior demo) ───────────────────── */ [data-theme="ocean"] { --color-bg: #06111E; --color-bg-2: #0A1A2C; --color-surface: #0F2438; --color-surface-2: #163049; --color-line: #1E3A52; --color-line-soft: #14283A; --color-text: #EAF4FB; --color-text-soft: rgba(234,244,251,0.74); --color-text-muted: rgba(234,244,251,0.50); --color-text-on-accent: #FFFFFF; --color-accent: #1E88C9; --color-accent-hover: #1568A0; --color-accent-soft: rgba(30,136,201,0.16); --color-gold: #E9C46A; --color-gold-bright: #F4D585; --color-gold-soft: rgba(233,196,106,0.14); --status-done: #2BC48A; --status-active: #F2B53C; --status-todo: #34506B; --phase-r: #1E88C9; --phase-p: #E9C46A; --phase-m: #9DB8CC; --shadow-cta: 0 8px 24px rgba(30,136,201,0.35); --shadow-gold:0 8px 28px rgba(233,196,106,0.24); --color-on-gold: #1a1206; --topbar-bg: rgba(6,17,30,0.85); --login-bg: radial-gradient(120% 90% at 50% 0%, #0A2238 0%, #04101D 55%); --ceremony-bg: radial-gradient(120% 90% at 50% 30%, #0C2C47 0%, #04101D 60%); --map-bg: linear-gradient(180deg, #0A1C2E 0%, #04101D 100%); } /* ── THEME: Slate (muted, neutral, professional) ───────────────────────── */ [data-theme="slate"] { --color-bg: #16181C; --color-bg-2: #1C1F24; --color-surface: #22262C; --color-surface-2: #2A2F36; --color-line: #343A42; --color-line-soft: #24292F; --color-text: #E8E9EB; --color-text-soft: rgba(232,233,235,0.72); --color-text-muted: rgba(232,233,235,0.46); --color-text-on-accent: #FFFFFF; --color-accent: #4F6D7A; /* desaturated slate-teal */ --color-accent-hover: #3D5763; --color-accent-soft: rgba(79,109,122,0.18); --color-gold: #B8A07E; /* muted sand/taupe in place of gold */ --color-gold-bright: #CDB894; --color-gold-soft: rgba(184,160,126,0.14); --status-done: #6FA98C; --status-active: #C9A85C; --status-todo: #3C434B; --phase-r: #4F6D7A; --phase-p: #B8A07E; --phase-m: #9AA1A8; --shadow-cta: 0 8px 22px rgba(79,109,122,0.30); --shadow-gold:0 8px 24px rgba(184,160,126,0.20); --color-on-gold: #20180E; --topbar-bg: rgba(22,24,28,0.85); --login-bg: radial-gradient(120% 90% at 50% 0%, #20242A 0%, #131519 55%); --ceremony-bg: radial-gradient(120% 90% at 50% 30%, #23272E 0%, #121418 60%); --map-bg: linear-gradient(180deg, #1B1E23 0%, #121418 100%); }