/** * tokens.luxury.css * * PURPOSE: The "luxury" design-token SET — the first concrete set of values for the inMotion * template token system (brief TPL-001). It assigns real values (colors, type, spacing, * shadows, motion) to the platform's semantic token names. Swapping this file for * tokens.premium.css (etc.) changes the entire look with zero markup changes. * * CONTEXT: This is a STANDALONE, SELF-CONTAINED swappable unit. It defines tokens only — it * imports nothing and styles nothing. The base/page sheets consume these tokens via * var(--im-*). For standalone static preview, broker/luxury/assets/css/main.css @imports * this file; the CMS renderer instead loads the correct tokens.{variant}.css DYNAMICALLY * based on SiteConfig.themeVariant (it does NOT hardcode the luxury import). * * Token naming is the CROSS-PROJECT CONTRACT (CD-approved 2026-06-29, brief TPL-001 §8). * Full catalog + conventions live in docs/TOKENS.md. * * CONVENTION: --im-{category}-{role}[-{variant}] * - "im-" namespace = inMotion (matches the platform's im- CSS prefix; avoids collisions when * the renderer imports sheets globally). * - Two layers: * PRIMITIVES (--im-gold, --im-charcoal, …) = raw luxury values. Internal convenience of * THIS file; NOT part of the cross-project contract. * SEMANTIC tokens (--im-color-brand, --im-color-ink, …) = role-based names the base sheets * and the renderer depend on. THIS is the contract. Premium redefines the same semantic * names with different values. * * TENANT OVERRIDES (the "bounded knobs", PROJECT_ARCHITECTURE §10): the renderer may override * --im-color-brand (from SiteConfig.brandColor) and --im-color-accent (from * SiteConfig.secondaryColor) with a per-site :root rule loaded after this file. * * LAST MODIFIED: 2026-06-29 by RE Web Templates Lead Agent (TPL-001) */ :root { /* ===================================================================== 1. COLOR ===================================================================== */ /* --- Primitives: the raw luxury palette (internal; not the contract) --- */ --im-gold: #C9A961; /* signature luxury brand gold */ --im-gold-dark: #9B7F3E; /* darker gold — hovers, gradient stops */ --im-gold-deep: #8B7440; /* deepest gold accent */ --im-gold-soft: #C4B389; /* muted/light gold */ --im-teal: #2B8A8A; /* secondary accent */ --im-charcoal: #1A1A1A; /* primary dark / body ink */ --im-black: #0A0A0A; /* near-black — strongest ink, dark sections */ --im-white: #FFFFFF; /* pure white (theme-stable neutral) */ --im-cream: #F8F6F3; /* warm off-white section background */ --im-stone: #E8E6E3; /* hairline / border neutral */ --im-gray: #6B6B6B; /* mid gray (named gray-medium in legacy) */ --im-gray-2: #666666; /* secondary-text gray (#666) */ --im-gray-3: #555555; /* fainter text gray (#555) */ --im-gray-4: #444444; /* faintest text gray (#444) */ --im-green: #16A34A; /* status: positive/success */ --im-red: #DC2626; /* status: negative/danger */ /* Data-visualization series (market-analytics charts) */ --im-chart-green: #6B8E6B; --im-chart-blue: #7B9EC7; --im-chart-red: #C76B6B; --im-chart-navy: #4A6B8E; --im-chart-moss: #4A6B4A; /* --- Semantic color roles (THE CONTRACT) --- */ --im-color-brand: var(--im-gold); /* primary brand accent ← SiteConfig.brandColor */ --im-color-brand-dark: var(--im-gold-dark); /* brand, darker (hovers/gradients) */ --im-color-brand-deep: var(--im-gold-deep); --im-color-brand-soft: var(--im-gold-soft); --im-color-accent: var(--im-teal); /* secondary accent ← SiteConfig.secondaryColor */ --im-color-ink: var(--im-charcoal); /* primary text */ --im-color-ink-strong: var(--im-black); /* strongest text / dark fills */ --im-color-ink-soft: var(--im-gray); /* softened text */ --im-color-ink-muted: var(--im-gray-2); /* secondary text (#666) */ --im-color-ink-faint: var(--im-gray-3); /* tertiary text (#555) */ --im-color-ink-faintest: var(--im-gray-4); /* quaternary text (#444) */ --im-color-bg: var(--im-white); /* page background */ --im-color-bg-alt: var(--im-cream); /* alternate/section background */ --im-color-border: var(--im-stone); /* 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 */ --im-color-success: var(--im-green); --im-color-danger: var(--im-red); --im-color-chart-1: var(--im-chart-green); --im-color-chart-2: var(--im-chart-blue); --im-color-chart-3: var(--im-chart-red); --im-color-chart-4: var(--im-chart-navy); --im-color-chart-5: var(--im-chart-moss); /* Brand-tinted translucencies (gold with alpha) — kept literal because CSS custom properties can't apply alpha to a hex token without color-mix()/build tooling, and no build step is allowed. Themed sets redefine these. */ --im-tint-brand-strong: rgba(201, 169, 97, 0.4); --im-tint-brand-med: rgba(201, 169, 97, 0.3); --im-tint-brand-soft: rgba(201, 169, 97, 0.1); /* ===================================================================== 2. TYPOGRAPHY ===================================================================== */ /* Families */ --im-font-display: 'Cormorant Garamond', serif; /* luxury's refined serif display */ --im-font-body: 'Montserrat', sans-serif; /* clean sans body */ /* Weights */ --im-weight-light: 300; --im-weight-regular: 400; --im-weight-medium: 500; --im-weight-semibold: 600; --im-weight-bold: 700; /* Line heights */ --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 (luxury leans on wide tracking for uppercase labels) */ --im-tracking-tight: -0.02em; --im-tracking-xs: 0.04em; --im-tracking-sm: 0.05em; --im-tracking-md: 0.06em; --im-tracking-lg: 0.08em; /* most common — uppercase labels */ --im-tracking-xl: 0.1em; --im-tracking-2xl: 0.12em; --im-tracking-3xl: 0.15em; /* Font-size scale — the recurring core sizes (rem). Irregular one-off sizes remain literal in the sheets by design (see docs/TOKENS.md "Scoping"). */ --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 (4px-based grid) Applied in this sprint where unambiguous (gaps, section rhythm). The full scale is defined so premium/future work can tune density; deeper spacing adoption is a follow-up (see docs/TOKENS.md + TPL-001 report recommendations). ===================================================================== */ --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: 80px; /* standard vertical section rhythm */ --im-section-pad-sm: 60px; --im-section-pad-lg: 100px; --im-container-max: 1200px; /* primary content container width */ /* ===================================================================== 4. BORDER / RADIUS / SHADOW ===================================================================== */ --im-radius-sm: 2px; --im-radius-md: 4px; --im-radius-lg: 8px; --im-radius-xl: 12px; --im-radius-pill: 50%; /* circular avatars/dots */ --im-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1); --im-shadow-md: 0 4px 24px rgba(0, 0, 0, 0.07); --im-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.08); --im-shadow-brand: 0 12px 40px rgba(201, 169, 97, 0.4); --im-shadow-focus: 0 0 0 3px rgba(201, 169, 97, 0.1); /* ===================================================================== 5. IMAGERY Cinematic dark gradients over photos = luxury's image treatment. Per-photo scrims vary by component and remain literal; these are the reusable brand/ink gradients. ===================================================================== */ --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: the full gradient for combined-background heroes (.search-hero). Its value is the search hero's PRIOR literal so luxury renders pixel-identical (TPL-003). */ --im-img-scrim: linear-gradient(135deg, rgba(10, 10, 10, 0.8) 0%, rgba(26, 26, 26, 0.6) 100%); /* --im-img-scrim-strength: opacity multiplier on the dedicated scrim overlay layers (TPL-003). Luxury = 1 = the CSS INITIAL value = a true no-op (no stacking-context change) → pixel-identical. */ --im-img-scrim-strength: 1; /* ===================================================================== 6. MOTION Durations/easings are real luxury transition values. The scroll-reveal tokens are SHAPE-ONLY: the reveal BEHAVIOR and TYPE (fade/slide/converge + the trigger) are renderer JS (PROJECT_ARCHITECTURE §10). Themes TUNE these; luxury keeps motion subtle. ===================================================================== */ --im-duration-fast: 0.2s; --im-duration-base: 0.3s; --im-duration-slow: 0.4s; --im-duration-slower: 0.6s; --im-ease-standard: ease; --im-ease-emphasized: cubic-bezier(0.4, 0, 0.2, 1); /* Scroll-reveal SHAPE (consumed by the renderer's intersection-observer mechanism). Luxury = subtle: short travel, unhurried, minimal stagger. */ --im-reveal-distance: 24px; --im-reveal-duration: 0.6s; --im-reveal-stagger: 0.08s; } /* ===================================================================== ACCESSIBILITY — reduced motion (base hook, CD-approved Q5) Foundational: every theme inherits this. When a visitor asks their OS to reduce motion, neutralize reveal travel and shorten durations so nothing slides/jumps. ===================================================================== */ @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; } }