/** * tokens.premium.css * * PURPOSE: The "premium" design-token SET — the second standard aesthetic for the inMotion template * system (brief TPL-002). Same semantic token NAMES as tokens.luxury.css (the cross-project * contract), with PREMIUM values: a neutral modern palette, a modern sans display, brighter * imagery, and dialed-up motion. Swapping this file for tokens.luxury.css re-skins every page * with zero markup changes. * * THE LOOK (PROJECT_ARCHITECTURE §10): premium is the DEFAULT for the bulk of the market — clean, * modern, approachable, unintimidating to a first-time buyer, yet sophisticated enough that a * high-end client returns. Restraint + quality execution, not ornamentation. Where luxury is * restrained / cinematic / serif, premium is current / bright / energetic / sans. * "You belong here, and this is done well." * * CONTEXT: STANDALONE, SELF-CONTAINED swappable unit — defines tokens (and @imports its own fonts); * styles nothing. Static preview loads it by repointing main.css's @import; the CMS renderer * loads it DYNAMICALLY when SiteConfig.themeVariant = "premium". * * STATUS (v1, TPL-002): this is a tasteful FIRST version. The brand hue, font choice, and heading * weight are JOEY's call — he refines from the rendered screenshots. Build values, not the * final word. * * IMAGERY (TPL-003 — DONE): premium's brighter imagery is now wired. --im-img-scrim-strength (a 0–1 * opacity multiplier, premium 0.6) lifts the dark scrims on the dedicated photo-overlay layers; * --im-img-scrim (premium = a lighter gradient) feeds the combined-bg hero. Luxury renders * pixel-identical (strength 1 = no-op; its scrim = the prior literal). --im-img-filter remains * available (unused) for true image brightness later. * * CONVENTION: identical to tokens.luxury.css — --im-{category}-{role}[-{variant}]. Primitives are * internal (premium-named: --im-blue, --im-slate, …); SEMANTIC tokens are the contract. * See docs/TOKENS.md. * * TENANT OVERRIDES: the renderer may override --im-color-brand (← SiteConfig.brandColor) and * --im-color-accent (← SiteConfig.secondaryColor) with a :root rule loaded after this file. * * LAST MODIFIED: 2026-06-29 by RE Web Templates Lead Agent (TPL-002) */ /* Premium fonts — modern sans, loaded via the existing Google-Fonts mechanism (markup-free, no build). Production renderer self-hosts these families via next/font; the tokens just name them. @import MUST precede all other rules. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700&display=swap'); :root { /* ===================================================================== 1. COLOR — neutral, modern, bright (vs luxury's warm gold/charcoal) ===================================================================== */ /* --- Primitives: the raw premium palette (internal; not the contract) --- */ --im-blue: #3380A4; /* premium brand — clear, confident ocean blue (Joey may refine the hue) */ --im-blue-dark: #245C77; /* darker blue — hovers, gradient stops */ --im-blue-deep: #1A4456; /* deepest blue accent */ --im-blue-soft: #8FB8CC; /* muted/light blue */ --im-clay: #D98E5A; /* secondary accent — warm clay for energy/warmth, used sparingly */ --im-slate: #1F2A30; /* primary ink — deep cool slate (softer/friendlier than near-black) */ --im-slate-strong:#11181D; /* strongest ink — dark fills/sections (still dark: white text stays legible) */ --im-gray: #5B6B75; /* softened text */ --im-gray-2: #6E7B84; /* secondary text */ --im-gray-3: #8A949B; /* tertiary text */ --im-gray-4: #A7AFB5; /* quaternary text */ --im-white: #FFFFFF; /* pure white (theme-stable neutral) */ --im-mist: #F4F6F8; /* cool light section background (bright + modern, vs luxury's warm cream) */ --im-cloud: #E6EBEF; /* soft cool hairline / border neutral */ --im-green: #16A34A; /* status: positive/success (kept — proven/accessible) */ --im-red: #DC2626; /* status: negative/danger (kept) */ /* Data-visualization series — brighter, harmonious modern set */ --im-chart-blue: #3380A4; --im-chart-sky: #4FA3C7; --im-chart-green: #5FB58D; --im-chart-amber: #E0A458; --im-chart-violet: #8E7CC3; /* --- Semantic color roles (THE CONTRACT — identical names to luxury) --- */ --im-color-brand: var(--im-blue); /* primary brand accent ← SiteConfig.brandColor */ --im-color-brand-dark: var(--im-blue-dark); /* brand, darker (hovers/gradients) */ --im-color-brand-deep: var(--im-blue-deep); --im-color-brand-soft: var(--im-blue-soft); --im-color-accent: var(--im-clay); /* secondary accent ← SiteConfig.secondaryColor */ --im-color-ink: var(--im-slate); /* primary text */ --im-color-ink-strong: var(--im-slate-strong); /* strongest text / dark fills */ --im-color-ink-soft: var(--im-gray); /* softened text */ --im-color-ink-muted: var(--im-gray-2); /* secondary text */ --im-color-ink-faint: var(--im-gray-3); /* tertiary text */ --im-color-ink-faintest: var(--im-gray-4); /* quaternary text */ --im-color-bg: var(--im-white); /* page background */ --im-color-bg-alt: var(--im-mist); /* alternate/section background */ --im-color-border: var(--im-cloud); /* dividers / hairlines */ --im-color-on-brand: var(--im-white); /* text/icon on a brand fill */ --im-color-on-dark: var(--im-white); /* text/icon on a dark fill (polarity preserved) */ --im-color-success: var(--im-green); --im-color-danger: var(--im-red); --im-color-chart-1: var(--im-chart-blue); --im-color-chart-2: var(--im-chart-sky); --im-color-chart-3: var(--im-chart-green); --im-color-chart-4: var(--im-chart-amber); --im-color-chart-5: var(--im-chart-violet); /* Brand-tinted translucencies (premium blue with alpha) — literal, like luxury (no color-mix/build). */ --im-tint-brand-strong: rgba(51, 128, 164, 0.4); --im-tint-brand-med: rgba(51, 128, 164, 0.3); --im-tint-brand-soft: rgba(51, 128, 164, 0.1); /* ===================================================================== 2. TYPOGRAPHY — modern sans (vs luxury's serif display) ===================================================================== */ /* Families (Joey may swap the faces) */ --im-font-display: 'Manrope', sans-serif; /* modern geometric-humanist sans — confident, current */ --im-font-body: 'Inter', sans-serif; /* ultra-clean, universally legible body sans */ /* Weights — same numeric scale as luxury (retuning --im-weight-light for bolder sans headings is a Joey call; it's also used on non-heading elements). */ --im-weight-light: 300; --im-weight-regular: 400; --im-weight-medium: 500; --im-weight-semibold: 600; --im-weight-bold: 700; /* Line heights — same as luxury */ --im-leading-none: 1; --im-leading-tight: 1.2; --im-leading-snug: 1.3; --im-leading-normal: 1.6; --im-leading-relaxed: 1.8; --im-leading-loose: 1.85; /* Letter spacing — modestly TIGHTER than luxury (modern sans reads cleaner with less airy tracking; luxury leaned on wide tracking for serif elegance). Roughly half luxury's em values. */ --im-tracking-tight: -0.02em; --im-tracking-xs: 0.02em; --im-tracking-sm: 0.025em; --im-tracking-md: 0.03em; --im-tracking-lg: 0.04em; /* uppercase labels — cleaner modern spacing */ --im-tracking-xl: 0.05em; --im-tracking-2xl: 0.06em; --im-tracking-3xl: 0.08em; /* Font-size scale — SAME values as luxury (the sizes aren't where premium differs; the font family carries the change). */ --im-text-2xs: 0.6875rem; --im-text-xs: 0.75rem; --im-text-sm: 0.8125rem; --im-text-base: 0.875rem; --im-text-md: 0.9375rem; --im-text-lg: 1rem; --im-text-xl: 1.125rem; --im-text-2xl: 1.25rem; --im-text-3xl: 1.5rem; --im-text-4xl: 1.75rem; --im-text-5xl: 2rem; --im-text-7xl: 2.5rem; --im-text-9xl: 3.5rem; /* ===================================================================== 3. SPACING / DENSITY — clean & efficient, still breathable Scale kept identical to luxury (proven breathable; only partially tokenized today, so a divergent scale would render inconsistently — deeper spacing tokenization is a later pass). Section rhythm trimmed modestly for a more efficient feel. ===================================================================== */ --im-space-3xs: 2px; --im-space-2xs: 4px; --im-space-xs: 6px; --im-space-sm: 8px; --im-space-md: 12px; --im-space-lg: 16px; --im-space-xl: 20px; --im-space-2xl: 24px; --im-space-3xl: 32px; --im-space-4xl: 40px; --im-space-5xl: 48px; --im-space-6xl: 60px; --im-section-pad: 72px; /* trimmed from luxury's 80 — efficient but breathable */ --im-section-pad-sm: 52px; --im-section-pad-lg: 88px; --im-container-max: 1200px; /* ===================================================================== 4. BORDER / RADIUS / SHADOW — friendlier softness, a touch more depth ===================================================================== */ --im-radius-sm: 4px; /* up from luxury's sharper 2px — modern, approachable */ --im-radius-md: 8px; --im-radius-lg: 12px; --im-radius-xl: 16px; --im-radius-pill: 50%; /* circular avatars/dots */ --im-shadow-sm: 0 2px 8px rgba(17, 24, 29, 0.08); /* cooler, slightly more present than luxury */ --im-shadow-md: 0 6px 20px rgba(17, 24, 29, 0.10); --im-shadow-lg: 0 18px 44px rgba(17, 24, 29, 0.12); --im-shadow-brand: 0 12px 40px rgba(51, 128, 164, 0.35); --im-shadow-focus: 0 0 0 3px rgba(51, 128, 164, 0.25); /* ===================================================================== 5. IMAGERY — brighter treatment (WIRED in TPL-003) gradient-brand/-ink auto-adopt premium colors. --im-img-scrim feeds the combined-bg hero; --im-img-scrim-strength (below) lifts the dark scrims on the dedicated photo-overlay layers. ===================================================================== */ --im-gradient-brand: linear-gradient(135deg, var(--im-color-brand) 0%, var(--im-color-brand-dark) 100%); --im-gradient-ink: linear-gradient(135deg, var(--im-color-ink-strong) 0%, var(--im-color-ink) 100%); /* --im-img-scrim: combined-bg hero (.search-hero) gradient — lighter/brighter than luxury's 0.8→0.6. */ --im-img-scrim: linear-gradient(135deg, rgba(17, 24, 29, 0.5) 0%, rgba(31, 42, 48, 0.35) 100%); /* --im-img-scrim-strength: scrim opacity multiplier. 0.6 lifts every photo scrim for brighter, more open imagery (TPL-003). Tasteful v1 — Joey refines the exact brightness from the screenshots. */ --im-img-scrim-strength: 0.6; /* ===================================================================== 6. MOTION — dialed up (VALUES ONLY; behavior is the renderer's JS) Snappier-but-smooth transitions and a more pronounced scroll-reveal for the energetic "page assembles as you scroll" feel. The reveal BEHAVIOR/TYPE is renderer JS (PROJECT_ARCHITECTURE §10) consuming these exact token names — CD-coordinated; no JS here. ===================================================================== */ --im-duration-fast: 0.15s; /* snappier than luxury's 0.2s */ --im-duration-base: 0.25s; --im-duration-slow: 0.4s; --im-duration-slower: 0.6s; --im-ease-standard: cubic-bezier(0.22, 1, 0.36, 1); /* modern ease-out settle (site-wide) */ --im-ease-emphasized: cubic-bezier(0.34, 1.2, 0.64, 1); /* gentle confident overshoot */ /* Scroll-reveal SHAPE — dialed up vs luxury (more travel, longer, clearer stagger). */ --im-reveal-distance: 40px; /* vs luxury 24px */ --im-reveal-duration: 0.7s; --im-reveal-stagger: 0.12s; /* vs luxury 0.08s */ } /* ===================================================================== ACCESSIBILITY — reduced motion (base hook; every theme inherits it, same as luxury) ===================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --im-duration-fast: 0.01ms; --im-duration-base: 0.01ms; --im-duration-slow: 0.01ms; --im-duration-slower: 0.01ms; --im-reveal-distance: 0; --im-reveal-duration: 0.01ms; --im-reveal-stagger: 0; } }