/* ========================================================================== Calypso Residence — design tokens -------------------------------------------------------------------------- Three layers, per the token architecture: 1. PRIMITIVE raw values, never used directly in a component 2. SEMANTIC purpose aliases — this is what components reference 3. COMPONENT per-component overrides, defined in components.css ACCESSIBILITY NOTE — read before using gold as text. Measured contrast against --bg-base (#FAF8F5): --gold #C1974B 2.54:1 FAILS (below the 3.0 large-text floor) --gold-dark #9A7734 3.93:1 large text / UI borders only --gold-ink #7A5C22 5.86:1 PASSES AA for body text --warning #C58A2E 2.81:1 FAILS as text --warning-ink #8A5D14 5.42:1 PASSES AA So: on light surfaces, gold is a DECORATION colour (fills, rules, badges, large display type) and --gold-ink is the TEXT colour. On --bg-deep the brand gold measures 6.98:1 and is used directly. ========================================================================== */ :root { /* --------------------------------------------------------------------- 1. PRIMITIVES --------------------------------------------------------------------- */ /* Neutrals — warm, never grey-blue */ --c-cream-50: #FFFFFF; --c-cream-100: #FAF8F5; --c-cream-200: #F1EBE1; --c-cream-300: #E4DCD1; --c-cream-400: #CFC4B5; --c-clay-500: #9C9084; --c-clay-600: #6B6259; --c-clay-700: #3D3733; --c-char-800: #1E1A17; --c-char-900: #1A1614; --c-char-950: #14110F; /* Brand gold */ --c-gold-200: #F0E2C4; --c-gold-300: #E0C892; --c-gold-500: #C1974B; --c-gold-600: #9A7734; --c-gold-700: #7A5C22; /* derived: AA-safe gold text on cream */ --c-gold-800: #5C4419; /* Status */ --c-green-500: #3F7D5A; --c-green-700: #2F5E43; --c-amber-500: #C58A2E; --c-amber-700: #8A5D14; /* derived: AA-safe amber text on cream */ --c-red-500: #B04A3F; --c-red-700: #8C3A31; --c-blue-500: #3E6B8A; --c-blue-700: #2E5069; --c-violet-500: #6B5B95; /* "reserved / arriving" on the room board */ /* --------------------------------------------------------------------- 2. SEMANTIC — surfaces --------------------------------------------------------------------- */ --bg-base: var(--c-cream-100); --bg-elevated: var(--c-cream-50); --bg-sand: var(--c-cream-200); --bg-deep: var(--c-char-950); --bg-deep-alt: var(--c-char-800); --bg-sunken: #F5F1EA; /* Translucent panels — the floating booking bar and the pill nav */ --glass-light: rgba(255, 255, 255, 0.72); --glass-dark: rgba(20, 17, 15, 0.55); --glass-blur: 16px; /* --------------------------------------------------------------------- 2. SEMANTIC — ink --------------------------------------------------------------------- */ --text-primary: var(--c-char-900); --text-secondary:var(--c-clay-700); --text-muted: var(--c-clay-600); --text-faint: var(--c-clay-500); --text-on-dark: #F5F0E8; --text-on-dark-muted: rgba(245, 240, 232, 0.68); --text-on-gold: var(--c-char-950); /* 8.9:1 — dark ink on a gold fill */ /* --------------------------------------------------------------------- 2. SEMANTIC — accent --------------------------------------------------------------------- */ --gold: var(--c-gold-500); /* decoration: fills, rules, badges */ --gold-soft: var(--c-gold-300); /* on dark surfaces */ --gold-dark: var(--c-gold-600); /* borders, large display type */ --gold-ink: var(--c-gold-700); /* TEXT on light surfaces — AA safe */ --gold-wash: rgba(193, 151, 75, 0.10); --gold-wash-strong: rgba(193, 151, 75, 0.18); --line: var(--c-cream-300); --line-strong: var(--c-cream-400); --line-on-dark: rgba(245, 240, 232, 0.14); /* --------------------------------------------------------------------- 2. SEMANTIC — status Each has a fill (backgrounds/dots) and an ink (text on light). --------------------------------------------------------------------- */ --success: var(--c-green-500); --success-ink: var(--c-green-700); --success-wash: rgba(63, 125, 90, 0.12); --warning: var(--c-amber-500); --warning-ink: var(--c-amber-700); --warning-wash: rgba(197, 138, 46, 0.14); --danger: var(--c-red-500); --danger-ink: var(--c-red-700); --danger-wash: rgba(176, 74, 63, 0.12); --info: var(--c-blue-500); --info-ink: var(--c-blue-700); --info-wash: rgba(62, 107, 138, 0.12); /* Room-board statuses (§4.2) */ --status-available: var(--c-green-500); --status-occupied: var(--c-gold-500); --status-dirty: var(--c-amber-500); --status-cleaning: var(--c-blue-500); --status-oos: var(--c-red-500); --status-reserved: var(--c-violet-500); /* --------------------------------------------------------------------- 3. TYPE Display: warm serif. UI: geometric sans. Loaded self-hosted in base.css. --------------------------------------------------------------------- */ --font-display: 'Fraunces', 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace; /* Modular scale, 1.200 minor third, 16px base. Fluid between a 375px phone and a 1440px desktop. */ --text-2xs: 0.6875rem; /* 11px labels */ --text-xs: 0.75rem; /* 12px meta */ --text-sm: 0.8125rem; /* 13px dense UI */ --text-base: 0.9375rem; /* 15px body */ --text-md: 1rem; /* 16px */ --text-lg: clamp(1.125rem, 0.4vw + 1.03rem, 1.25rem); --text-xl: clamp(1.375rem, 0.9vw + 1.16rem, 1.75rem); --text-2xl: clamp(1.75rem, 1.6vw + 1.37rem, 2.5rem); --text-3xl: clamp(2.25rem, 3vw + 1.55rem, 3.5rem); --text-4xl: clamp(2.75rem, 5vw + 1.58rem, 5rem); --text-hero: clamp(2.75rem, 7vw + 1rem, 6.5rem); --leading-tight: 1.08; --leading-snug: 1.25; --leading-normal: 1.55; --leading-relaxed: 1.7; --tracking-display: -0.022em; /* tight tracking on serif display */ --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-eyebrow: 0.18em; /* small caps eyebrow labels */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* --------------------------------------------------------------------- 4. SPACE — 4px base, named by step not by pixel --------------------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ --space-32: 8rem; /* 128 */ /* Vertical rhythm between public-site bands, fluid. */ --band-y: clamp(3.5rem, 7vw, 7.5rem); /* Layout */ --container: 1280px; --container-wide: 1480px; --container-text: 68ch; --gutter: clamp(1rem, 4vw, 2.5rem); /* --------------------------------------------------------------------- 5. RADIUS --------------------------------------------------------------------- */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 999px; /* --------------------------------------------------------------------- 6. ELEVATION — warm-tinted, never neutral black --------------------------------------------------------------------- */ --shadow-hairline: 0 0 0 1px var(--line); --shadow-soft: 0 4px 24px rgba(26, 22, 20, 0.06); --shadow-card: 0 2px 8px rgba(26, 22, 20, 0.04), 0 12px 32px rgba(26, 22, 20, 0.07); --shadow-lift: 0 18px 50px rgba(26, 22, 20, 0.14); --shadow-pop: 0 28px 70px rgba(26, 22, 20, 0.20); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6); --shadow-gold: 0 8px 28px rgba(193, 151, 75, 0.28); /* --------------------------------------------------------------------- 7. MOTION — calm and expensive, never bouncy --------------------------------------------------------------------- */ --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1); --ease-state: cubic-bezier(0.4, 0, 0.2, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); --dur-instant: 120ms; --dur-fast: 180ms; /* UI feedback: 150-250ms */ --dur-quick: 240ms; --dur-base: 360ms; /* content: 300-700ms */ --dur-slow: 520ms; --dur-slower: 700ms; --dur-kenburns: 8000ms; --stagger: 70ms; /* between children in a scroll reveal */ --stagger-slow: 120ms; /* the three assurance items */ --lift-card: -6px; --lift-item: -4px; --zoom-image: 1.06; /* --------------------------------------------------------------------- 8. Z-INDEX — one ladder, no magic numbers in components --------------------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-nav: 200; --z-dropdown: 300; --z-backdrop: 400; --z-slideover: 410; --z-modal: 420; --z-toast: 500; --z-loadingbar: 600; /* Focus ring — 3:1 against both cream and charcoal */ --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--gold-dark); --focus-ring-dark: 0 0 0 2px var(--bg-deep), 0 0 0 4px var(--gold-soft); } /* ========================================================================== CONSOLE SKIN Same token family, different job: denser, darker chrome, data-forward. Applied via — not a separate stylesheet, so the two halves of the product can never drift apart. ========================================================================== */ .console { --bg-base: #F7F4EF; /* cream content area */ --bg-elevated: #FFFFFF; --bg-sunken: #EFEAE2; /* Deep charcoal sidebar + topbar */ --console-chrome: var(--c-char-950); --console-chrome-alt: var(--c-char-800); --console-chrome-line: rgba(245, 240, 232, 0.10); --console-chrome-text: #F5F0E8; --console-chrome-muted: rgba(245, 240, 232, 0.60); --console-chrome-active: var(--gold); --sidebar-w: 264px; --sidebar-w-collapsed: 76px; --topbar-h: 64px; /* Denser rhythm than the public site */ --band-y: var(--space-8); --radius-md: 12px; --radius-lg: 16px; --text-base: 0.875rem; /* 14px — more rows on screen */ --leading-normal: 1.45; --shadow-card: 0 1px 2px rgba(26, 22, 20, 0.04), 0 6px 20px rgba(26, 22, 20, 0.06); /* Table chrome */ --row-hover: rgba(193, 151, 75, 0.07); --row-stripe: rgba(26, 22, 20, 0.018); } /* The display screen (§4.9) is always dark and always full-bleed. */ .display-screen { --bg-base: var(--c-char-950); --text-primary: var(--text-on-dark); --text-muted: var(--text-on-dark-muted); --gold-ink: var(--gold-soft); /* on charcoal, soft gold is the readable one */ --line: var(--line-on-dark); --focus-ring: var(--focus-ring-dark); } /* ========================================================================== REDUCED MOTION Transforms and parallax off; opacity fades stay so the page still reads as composed rather than snapping into place. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 1ms; --dur-fast: 1ms; --dur-quick: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-slower: 1ms; --stagger: 0ms; --stagger-slow:0ms; --lift-card: 0px; --lift-item: 0px; --zoom-image: 1; } } /* Honour a forced-colors / high-contrast mode. */ @media (forced-colors: active) { :root { --shadow-card: none; --shadow-lift: none; --focus-ring: 0 0 0 3px Highlight; } }