/* ================================================================= SiteForge Design Tokens — single source of truth ================================================================= * Loaded as the FIRST stylesheet on every per-client site + every showroom-composer-generated page. Every section-catalog snippet and effect-catalog snippet references these tokens via `var(--token)` rather than hardcoding values. Naming convention (hybrid): - Numeric scales: --space-{1..24}, --text-{xs..6xl}, --radius-{xs..3xl} (predictable, generalizable, no semantic guesswork) - Semantic names: --color-*, --font-*, --weight-*, --shadow-*, --ease-* (readable, intent-revealing for high-meaning categories) Why both: numeric scales generalize across designs without naming bikeshed; semantic tokens make code self-documenting where intent matters more than scale-position. ================================================================= */ :root { /* ========================================================== COLOR ========================================================== Backwards-compatible with the --color-* convention already used in existing styles.css and the v0.0.8/v0.0.2 info pages. Per-client palette picker overrides these values via class scopes on or per-section data-palette attrs. ========================================================== */ --color-accent: #c8501a; /* primary brand accent — buttons, CTAs, highlights */ --color-accent-soft: color-mix(in srgb, var(--color-accent) 18%, transparent); --color-fg: #1a1a1a; /* body text */ --color-fg-strong: #0a0a0a; /* extra-emphasis body */ --color-muted: #6a6a6a; /* secondary text, metadata */ --color-muted-soft: #999; /* tertiary text, captions */ --color-heading: #1a1a1a; /* headlines (often same as --color-fg, distinct for theming) */ --color-rule: #e0dbcf; /* borders, dividers, hairlines */ --color-card: #fff; /* card backgrounds */ --color-section-alt: #faf8f3; /* alternate section background (warm off-white) */ --color-bg: #fff; /* page background */ /* Status palette (for stats, alerts, info-page sections) */ --color-good: #2f7d32; --color-good-soft: #d6ecd7; --color-warn: #c0392b; --color-warn-soft: #fadcd7; --color-info: #4a6fa5; --color-info-soft: color-mix(in srgb, var(--color-info) 22%, transparent); /* Overlay tints (for image-overlay sections, hero gradients) */ --color-overlay-strong: rgba(0,0,0,0.72); --color-overlay-med: rgba(0,0,0,0.42); --color-overlay-light: rgba(0,0,0,0.18); /* ========================================================== TYPOGRAPHY — FAMILIES ========================================================== Per-client typeface picker overrides --font-serif and/or --font-sans at the class scope. ========================================================== */ --font-serif: Georgia, 'Times New Roman', serif; /* headlines, prices, big numbers, editorial moments */ --font-sans: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif; /* body, UI, labels */ --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* code, promo codes, tabular data */ /* ========================================================== TYPOGRAPHY — SIZE SCALE (px-based for tabular layout safety) ========================================================== Sub-15 sizes are UI/metadata only; 16+ is reading content. ========================================================== */ --text-2xs: 10px; /* tiny labels: legal, copyright */ --text-xs: 11px; /* eyebrows, badges, tags */ --text-sm: 12px; /* secondary metadata, small captions */ --text-base: 13px; /* baseline UI text — buttons, nav, small body */ --text-md: 14px; /* secondary body, list items */ --text-lg: 15px; /* body copy default */ --text-xl: 16px; /* emphasis body, secondary headings */ --text-2xl: 18px; /* large body, h4-equivalent */ --text-3xl: 22px; /* h3 — section subtitles */ --text-4xl: 28px; /* h2 — major section headings */ --text-5xl: 38px; /* h1 — hero headlines */ --text-6xl: 48px; /* display — big-number tiles */ --text-7xl: 64px; /* extra-display — hero typography moments */ --text-8xl: 84px; /* mega-display — stats hero numbers */ /* Fluid responsive sizes (use these for headlines that need to scale viewport-wise) */ --text-fluid-hero: clamp(28px, 4vw, 44px); /* hero h1 */ --text-fluid-display: clamp(40px, 8vw, 88px); /* huge brand-typography moments */ --text-fluid-h2: clamp(26px, 3.6vw, 38px); /* section h2 */ --text-fluid-h3: clamp(20px, 2.8vw, 26px); /* sub-section h3 */ --text-fluid-bignum: clamp(48px, 8vw, 84px); /* stat big-numbers */ /* ========================================================== TYPOGRAPHY — WEIGHTS ========================================================== Numeric weights are nicer to read than 400/600/700 literals scattered through snippets. ========================================================== */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-heavy: 800; --weight-black: 900; /* ========================================================== TYPOGRAPHY — LINE HEIGHT ========================================================== Unit-less so values inherit and scale with parent font-size. ========================================================== */ --leading-flat: 1; /* big numbers, badges */ --leading-display: 1.05; /* mega hero headlines (very tight) */ --leading-tight: 1.15; /* hero headlines */ --leading-snug: 1.25; /* secondary headings */ --leading-normal: 1.4; /* UI default */ --leading-relaxed: 1.55; /* body copy default */ --leading-loose: 1.7; /* long-form body / philosophy paragraphs */ /* ========================================================== TYPOGRAPHY — LETTER SPACING (TRACKING) ========================================================== */ --tracking-tightest: -0.03em; /* mega-display headlines */ --tracking-tighter: -0.02em; /* big display, hero headlines */ --tracking-tight: -0.01em; /* section headings */ --tracking-normal: 0; /* default body */ --tracking-wide: 0.04em; /* UI labels, button text */ --tracking-wider: 0.08em; /* small caps, secondary labels */ --tracking-widest: 0.14em; /* eyebrows, badges */ --tracking-2x: 0.18em; /* tiny uppercase eyebrows */ /* ========================================================== SPACING SCALE (4px base unit) ========================================================== Use for padding, margin, gap. Section-level padding tends to land at --space-12 to --space-20; card-level at --space-4 to --space-6. ========================================================== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-18: 72px; --space-20: 80px; --space-24: 96px; /* ========================================================== BORDER RADIUS ========================================================== */ --radius-xs: 3px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-2xl: 12px; --radius-3xl: 16px; --radius-pill: 999px; --radius-circle: 50%; /* ========================================================== SHADOWS / ELEVATION ========================================================== */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.02); /* card baseline (very subtle) */ --shadow-sm: 0 1px 4px rgba(0,0,0,0.04); /* card default */ --shadow-md: 0 2px 8px rgba(0,0,0,0.06); /* nav, footer */ --shadow-lg: 0 6px 20px rgba(0,0,0,0.08); /* card hover, modals */ --shadow-xl: 0 18px 36px rgba(0,0,0,0.1); /* deep hover, popovers */ --shadow-2xl: 0 20px 50px rgba(0,0,0,0.18); /* photo cards, hero overlays */ /* ========================================================== TRANSITIONS — TIMING + EASING ========================================================== */ --duration-fast: 150ms; --duration-normal: 200ms; --duration-slow: 280ms; --duration-slower: 600ms; --duration-slowest: 1200ms; --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: ease; --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ========================================================== LAYOUT — MAX WIDTHS (container constraints) ========================================================== */ --max-w-content: 720px; /* article/text content */ --max-w-narrow: 880px; /* narrow section grids */ --max-w-section: 1080px; /* default section width */ --max-w-wide: 1200px; /* wider section grids */ --max-w-bleed: 1400px; /* near-full-width content */ /* ========================================================== Z-INDEX SCALE ========================================================== */ --z-base: 1; --z-sticky: 10; /* sticky elements (sticky nav inside scroll containers) */ --z-overlay: 100; /* nav, sticky headers */ --z-floating: 500; /* persistent CTAs (booking bar, give-now bar) */ --z-modal: 1000; /* modals, overlays */ --z-toast: 2000; /* notifications */ --z-chrome: 9999; /* operator chrome (version selector etc.) */ } /* ================================================================= BREAKPOINTS REFERENCE — for @media queries ================================================================= CSS custom properties don't work inside @media queries (yet). Use these values as raw px values, kept consistent here as a single-source-of-truth for the catalog. --bp-sm: 480px (mobile-large) --bp-md: 600px (tablet-portrait) --bp-lg: 720px (tablet-landscape) --bp-xl: 900px (desktop-small) --bp-2xl: 1080px (desktop-medium) --bp-3xl: 1280px (desktop-large) Authoring rule: prefer @media (min-width: 600px) over (max-width) for mobile-first cascade. Use the 6 values above; don't invent new breakpoints unless a layout genuinely demands one. ================================================================= */ /* ================================================================= REDUCED MOTION ================================================================= Sites should respect prefers-reduced-motion. Catalog snippets include per-section overrides; this is the global fallback. ================================================================= */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; --duration-slowest: 0ms; } }