/* ============================================================= SWEETNOTE — REVEAL-PAGE & TENANT-THEME TOKENS ============================================================= SCOPE: Token system used by the recipient reveal page (scan.html) and any other surface that must re-theme per tenant. The reveal uses a SURFACE + ACCENT, full-bleed model (June 2026 redesign): the brand picks a Surface (the full background — fills the whole reveal, body + desktop card, never a strip) and an Accent (brand color for CTA / dividers / reaction highlights). Four surface presets — Clean, Soft tint (a ~9% wash of the accent, the DEFAULT), Warm, Immersive dark — plus any custom hex. Ink AUTO-CONTRASTS to the surface (WCAG luminance) so any brand color stays legible (a benchmark-safety property too). Brand-deferential: every reveal looks like the brand's page, not SweetNote's; the platform attribution drops to a small footer line. For the marketing site, Insights portal, transactional emails, and any platform/marketing collateral (LinkedIn banners, decks, social cards, ads), DO NOT READ FROM THIS FILE. Use the --sn-* tokens in styles/site.css instead — that's the Stripe-style modern system. Reference renders for the platform brand: index.html, clients/index.html, and the email-templates/ folder (see its README for the full guide). WCAG 2.1 AA: every color verified against its intended background — 4.5:1 for small text, 3:1 for large text. THREE-LAYER STRUCTURE (inside this file): Layer 1 — Raw palette (--color-*) Fixed color values. The Warm surface palette (paper #FAF7F2, gold #C8A040, navy #0C1B2E) stays defined here — it backs the "Warm" surface preset and the legacy editorial-warm theme key. Layer 2 — Semantic brand tokens (--brand-*) Tenant-overridable abstractions, DEFAULTS to the Soft-tint / neutral surface look (light surface, auto-contrast ink, deep-cyan accent, Inter fonts). Tenant configs and the wizard's Surface + Accent picks override via tenant-loader.js / per-reveal --c-* overrides. Reveal-page CSS reads from these. Layer 3 — Legacy theme presets (body[data-theme-preset="..."]) SUPERSEDED by the Surface + Accent model above, kept only for back-compat with old ?theme= links. The three named keys — (default), editorial-warm, corporate — still resolve and redefine the --brand-* tokens, but the wizard no longer asks a tenant to "pick one of three presets"; it drives Surface (full-bleed background) + Accent (brand color) instead, with ink auto-contrasting. Tenant/per-reveal overrides layer on top. Do NOT reintroduce the "pick one of three presets" framing or the white-page-with-coloured-strip look. ============================================================= */ :root { /* ========================================================= SURFACES ========================================================= */ --color-paper: #FAF7F2; /* primary page background (warm) */ --color-paper-deep: #F4EFE5; /* alternating section bg */ --color-paper-warm: #EDE6D3; /* deeper surface (callouts, tables) */ --color-cream: #FAF5EC; /* card surfaces, subtle panels */ --color-cream-soft: #FFFDF5; /* video insets, reveal surfaces */ --color-white: #FFFFFF; /* ========================================================= INK (text) ========================================================= */ --color-ink: #0C1B2E; /* primary text (matches navy) */ --color-ink-soft: #4B4440; /* body copy (warmer than pure black) */ --color-ink-muted: #635E5B; /* secondary text, meta */ --color-ink-faint: #7A6E62; /* tertiary — WCAG AA on white (3.3:1 needs larger text) */ /* ========================================================= BRAND ========================================================= */ --color-navy: #0C1B2E; /* primary dark */ --color-navy-deep: #091523; /* deeper navy for dark bgs */ --color-navy-soft: #1F3045; /* hover, elevated surfaces */ --color-gold: #C8A040; /* accent (matches existing) */ --color-gold-light: #DDB85A; /* emphasis on dark bg */ --color-gold-deep: #A88030; /* dark emphasis (pass 3:1 large text) */ --color-gold-dark: #7A5A20; /* WCAG AA small text on light bg (4.69:1) */ --color-gold-soft: #E8C378; /* gold tint bg */ --color-rose: #C85072; /* card accent — warm highlights */ --color-rose-dark: #A63458; /* WCAG AA rose for small text (4.52:1 on cream) */ --color-rose-soft: #E8A8BC; /* blush background */ /* ========================================================= EYEBROW — editorial label convention ========================================================= */ --color-eyebrow: #7A5A20; /* eyebrow labels, small uppercase */ /* ========================================================= SEMANTIC ========================================================= */ --color-success: #2A6B3E; /* confirmed, shipped, delivered */ --color-success-soft: #E4F0E4; /* success bg */ --color-success-ink: #1A4A28; /* success text on soft bg (6.3:1) */ --color-error: #A01F26; /* denied, errors */ --color-error-soft: #FDF0EE; --color-error-ink: #7A1820; /* error text on soft bg */ --color-warning: #A88030; --color-warning-soft: #FBF2DC; --color-warning-ink: #5A4A10; /* warning text on soft bg */ /* ========================================================= LINES & BORDERS ========================================================= */ --color-line: rgba(12, 27, 46, 0.08); /* subtle dividers */ --color-line-strong: rgba(12, 27, 46, 0.16); /* input borders */ --color-line-accent: rgba(200, 160, 74, 0.4); /* gold accent lines */ --color-line-on-dark: rgba(243, 239, 229, 0.15); /* lines on navy bg */ /* ========================================================= TYPOGRAPHY — families ========================================================= */ --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-serif: 'Playfair Display', Georgia, serif; /* card greetings, editorial */ --font-serif-warm: 'Fraunces', 'Fraunces 144pt', serif; --font-serif-class: 'Bodoni Moda', Didot, serif; /* formal, wedding, corporate */ --font-serif-eb: 'EB Garamond', Georgia, serif; --font-serif-light: 'Cardo', Georgia, serif; /* baby, soft */ --font-italiana: 'Italiana', Georgia, serif; /* modern minimalist */ --font-body: 'DM Sans', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Consolas', monospace; /* ========================================================= TYPOGRAPHY — scale (rem-based for accessibility) ========================================================= */ --font-size-xs: 0.6875rem; /* 11px — eyebrows, fine print */ --font-size-sm: 0.8125rem; /* 13px */ --font-size-base: 0.9375rem; /* 15px — body default */ --font-size-md: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.75rem; /* 28px */ --font-size-4xl: 2.125rem; /* 34px */ --font-size-5xl: 2.75rem; /* 44px */ --font-size-6xl: 3.5rem; /* 56px */ --font-size-7xl: 4.5rem; /* 72px */ /* ========================================================= LINE HEIGHTS ========================================================= */ --line-tight: 1.1; --line-snug: 1.3; --line-normal: 1.5; --line-relaxed: 1.7; --line-loose: 1.85; /* ========================================================= LETTER SPACING ========================================================= */ --tracking-tight: -0.02em; /* large display headings */ --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.18em; /* eyebrows, uppercase labels */ /* ========================================================= SPACING (8pt system) ========================================================= */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 80px; --space-10: 96px; --space-11: 128px; --space-12: 160px; /* ========================================================= RADIUS ========================================================= */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 100px; --radius-full: 9999px; /* ========================================================= SHADOWS ========================================================= */ --shadow-sm: 0 2px 6px rgba(12, 27, 46, 0.04); --shadow-md: 0 4px 18px rgba(12, 27, 46, 0.08); --shadow-lg: 0 12px 28px rgba(12, 27, 46, 0.12); --shadow-xl: 0 20px 50px rgba(12, 27, 46, 0.16); --shadow-card: 0 4px 18px rgba(12, 27, 46, 0.08), 0 2px 6px rgba(12, 27, 46, 0.04); --shadow-card-hover: 0 12px 32px rgba(12, 27, 46, 0.14), 0 4px 12px rgba(12, 27, 46, 0.06); /* ========================================================= TRANSITIONS ========================================================= */ --transition-fast: 0.15s ease; --transition-base: 0.24s ease; --transition-slow: 0.4s ease; /* ========================================================= LAYOUT ========================================================= */ --container-narrow: 760px; /* legal pages, long-form */ --container-base: 1100px; /* creative studio, account */ --container-wide: 1280px; /* homepage sections */ --container-xwide: 1400px; /* gallery, hero areas */ --nav-height: 68px; /* sticky site header */ /* ========================================================= Z-INDEX ========================================================= */ --z-base: 1; --z-sticky: 100; --z-overlay: 200; --z-modal: 300; --z-tooltip: 400; --z-noise: 9999; /* ========================================================= SEMANTIC BRAND TOKENS — PLATFORM LAYER ========================================================= These are the only tokens platform-embeddable surfaces (the reveal page, the contextual brand footer) should reference. Everything else reads from --color-* directly. DEFAULTS to the neutral light-surface look (light surface, auto-contrast dark ink, deep cyan accent, Inter fonts) — the base the Surface + Accent model builds on. The brand's actual reveal is driven by its Surface (Clean / Soft tint default / Warm / Immersive dark, or custom hex) + Accent picks, applied via tenant-loader.js / per-reveal --c-* overrides, with ink auto-contrasting. The legacy data-theme-preset selectors below still resolve for old ?theme= links but are superseded. In 2027, adding a tenant is as simple as: [data-tenant="duke"] { --brand-primary: #012169; ... } No CSS rewrite. No component changes. Just token overrides. */ --brand-primary: #0A2540; /* modern dark navy */ --brand-primary-deep: #061A2D; --brand-primary-soft: #1F3045; --brand-accent: #0891B2; /* deep cyan — grounded for a moment, not chrome-bright */ --brand-accent-deep: #075F73; --brand-accent-dark: #075F73; --brand-ink: #0A2540; /* modern dark navy */ --brand-ink-soft: #4B5563; /* neutral slate-gray for body copy */ --brand-ink-muted: #6B7280; --brand-paper: #FFFFFF; /* pure white */ --brand-paper-deep: #F8FAFC; /* faint cool grey for alternating sections */ --brand-cream: #FFFFFF; --brand-line: rgba(10, 37, 64, 0.08); /* hairline border */ --brand-font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --brand-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --brand-font-mono: var(--font-mono); --brand-logo-url: none; --brand-name: 'SweetNote'; --brand-platform-name: 'SweetNote'; } /* ============================================================= LEGACY THEME KEY — EDITORIAL WARM (back-compat only) ============================================================= SUPERSEDED by the Surface + Accent model. The warm look (Cormorant Garamond + warm paper #FAF7F2 + gold #C8A040) now lives as the "Warm" surface preset; this selector is retained only so old ?theme=editorial-warm links keep resolving. The wizard no longer offers it as one of three presets to pick — a brand chooses the Warm surface (or any custom surface) plus its own accent. Activated by (scan.html maps the legacy ?theme= value). ============================================================= */ body[data-theme-preset="editorial-warm"] { --brand-primary: var(--color-navy); --brand-primary-deep: var(--color-navy-deep); --brand-primary-soft: var(--color-navy-soft); --brand-accent: var(--color-gold); --brand-accent-deep: var(--color-gold-deep); --brand-accent-dark: var(--color-gold-dark); --brand-ink: var(--color-ink); --brand-ink-soft: var(--color-ink-soft); --brand-ink-muted: var(--color-ink-muted); --brand-paper: var(--color-paper); /* #FAF7F2 warm */ --brand-paper-deep: var(--color-paper-deep); --brand-cream: var(--color-cream); --brand-line: var(--color-line); --brand-font-display: var(--font-display); /* Cormorant Garamond */ --brand-font-body: var(--font-body); /* DM Sans */ } /* ============================================================= LEGACY THEME KEY — CORPORATE (back-compat only) ============================================================= SUPERSEDED by the Surface + Accent model. A buttoned-up sans-heavy look (light surface, slate accent, Source Sans 3) retained only so old ?theme=corporate links keep resolving; the wizard no longer offers it as one of three presets to pick. A brand that wants this reads as choosing a clean surface + a slate accent. Activated by (scan.html maps the legacy ?theme= value). ============================================================= */ body[data-theme-preset="corporate"] { --brand-primary: #0A2540; --brand-primary-deep: #061A2D; --brand-primary-soft: #1F3045; --brand-accent: #4A6E82; /* slate */ --brand-accent-deep: #2F4E60; --brand-accent-dark: #2F4E60; --brand-ink: #0A2540; --brand-ink-soft: #455263; --brand-ink-muted: #6B7280; --brand-paper: #FFFFFF; --brand-paper-deep: #F2F4F7; --brand-cream: #FFFFFF; --brand-line: rgba(10, 37, 64, 0.10); --brand-font-display: 'Source Sans 3', 'IBM Plex Sans', system-ui, sans-serif; --brand-font-body: 'Source Sans 3', 'IBM Plex Sans', system-ui, sans-serif; }