/* ============================================================================ DESIGN LANGUAGE DECLARATION — "esiama" ============================================================================ Registered-language gate (Design Language Protocol v1.0.0). This file is the language's declaration AND its primitive→semantic bridging. 1. Philosophy schema (written first — tokens are a consequence, not a substitute) ------------------------------------------------------------------------------ thesis: "Crown of Nzemaland — coastal calm held with royal warmth; meaning carried by tide, type and proportion, gold held as the crown's quiet accent." optimizesFor: legibility, civic pride, and visitor calm; utility > usability > beauty, and all three achieved. Town voice, not hotel sales. refuses: loud gradients, glassmorphism, neon accent surfaces, colour-led emphasis on body content, novelty motion, saturated photography filters beyond a restrained duotone, decorative clutter. namedPatterns: - "The Monogram" brand crest (Esiama E) at the top of every surface boundary. - "Gold Rule" hairline rule + gold numeral anchoring each section header. - "One Night Surface" exactly one inverted (evening) surface per flat; all else is day. - "The Wardrobe" place/stay switching without page reload (stay page). - "Day & Evening" section rhythm alternates sand and teal surfaces. - "Town Notices" dynamic notices strip hydrated from data.js. 2. The 18 agnostic slots ------------------------------------------------------------------------------ A. Surface & depth 1 surfaceBoundary : fill — grouping via tonal fill, not borders. 2 depthModel : layer-token — depth expressed as stacked surface tone; shadows minimal. 3 darkStrategy : separate-palette— "evening" surfaces use their own teal palette. B. Shape 4 cornerPhilosophy : uniform — 2px corners; quiet geometry. (Pills are a control-dominated affordance, not the corner system.) 5 shapeCarriesBrand : no — brand is carried by type, light, and materials. C. Colour 6 colorRole : brand-led — narrow coastal warm palette; photography carries colour. 7 functionalColorContainment : badge-only — status/accent colour confined to small marks. 8 colorInHierarchy : supporting — gold supports (rules, numerals); scale/weight lead. 9 polarityEncoding : weight-before-color D. Typography 10 typeRoleAssignment : display=serif, heading=serif, body=sans, data=tabular sans 11 monospaceScope : data-only E. Space 12 density : comfortable 13 spaceAllocation : earned-by-importance 14 sectionRhythm : surface-inversion F. Motion 15 motion : { productiveRangeMs: "180–420", easing: "cubic-bezier(.22,1,.36,1)", expressiveAllowedIn: "hero + gallery only" } G. Ornament & emphasis 16 decoration : illustration-contained — monogram + hairline + grain only. 17 emphasisSurfaceBudget : 1 — one evening surface per flat. 18 hierarchySignals : weight, size, surface-contrast, position, colour slotRationale: coastal teal + sand warmth with gold reserve = tide + crown. Fill not shadow = quiet layering; brand-led coastal colour in reserve = ornament withheld; weight-before-color = hierarchy without shout; uniform geometry = civic neutrality; surface-inversion = day/evening cadence of a ocean town; motion restricted to hero/gallery. 3. Tier sanity ------------------------------------------------------------------------------ Components never read the --esi-* private layer; they consume the semantic --color-*, --space-*, --font-*, --radius-*, --shadow-*, --motion-*, --z-* contract (swap-invariant). ============================================================================ */ /* ---------------------------------------------------------------------------- TIER 1 — PRIMITIVES. Private namespace, valid only under [data-theme='esiama']. Names carry value meaning; the semantic layer maps them to roles. -------------------------------------------------------------------------- */ [data-theme="esiama"] { /* Coastal teal (ink scale — replaces espresso) */ --esi-ink-950: #0a2424; --esi-ink-900: #0e3d3d; --esi-ink-800: #143e3e; --esi-ink-700: #214e4e; --esi-ink-600: #345e5e; /* Warm sand (day scale — replaces ivory) */ --esi-ivory-50: #f7f0e0; --esi-ivory-100: #efe6cc; --esi-ivory-200: #e6dcc0; --esi-ivory-300: #d9cdb6; /* Chamber = near-white for raised surfaces */ --esi-chamber: #fdfbf6; /* Gold (champagne/bronze scale — retained as crown accent) */ --esi-gold-700: #6e5428; --esi-gold-600: #86682f; --esi-gold-500: #a58549; --esi-gold-400: #c2a36a; --esi-gold-300: #dcc286; --esi-gold-200: #ecd9a8; /* Muted warm grey for secondary text (kept for contrast on sand) */ --esi-sage-600: #5d554c; --esi-sage-500: #6f6458; --esi-sage-400: #8a7e70; /* Functional */ --esi-moss-600: #3d5a3c; /* success */ --esi-clay-600: #983f2e; /* error */ --esi-clay-500: #b04a36; /* Space rhythm */ --esi-space-3xs: 0.375rem; --esi-space-2xs: 0.5rem; --esi-space-xs: 0.75rem; --esi-space-sm: 1rem; --esi-space-md: 1.5rem; --esi-space-lg: 2rem; --esi-space-xl: 2.75rem; --esi-space-2xl: 3.75rem; --esi-space-3xl: 5rem; --esi-space-4xl: 6.5rem; /* Type */ --esi-type-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --esi-type-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif; --esi-type-mono: "SFMono-Regular", "Cascadia Mono", "Roboto Mono", Consolas, monospace; } /* ---------------------------------------------------------------------------- TIER 2 — SEMANTIC TOKENS. Role-named, shared contract. A registered language is nothing but a mapping of its primitives onto these roles (swap invariance: a second [data-theme='…'] block would re-map and every component keeps working). -------------------------------------------------------------------------- */ [data-theme="esiama"] { /* Surfaces */ --color-bg: var(--esi-ivory-50); --color-surface: var(--esi-ivory-100); --color-surface-raised: var(--esi-chamber); --color-surface-inverted: var(--esi-ink-900); --color-surface-inverted-raised: var(--esi-ink-800); --color-surface-soft-accent: var(--esi-ivory-200); /* Text */ --color-text-primary: var(--esi-ink-900); --color-text-secondary: var(--esi-ink-700); --color-text-muted: var(--esi-sage-600); --color-text-accent: var(--esi-gold-700); --color-text-inverted: var(--esi-ivory-50); --color-text-inverted-muted: var(--esi-ivory-300); --color-text-inverted-accent: var(--esi-gold-300); /* Lines */ --color-border-subtle: var(--esi-ivory-300); --color-border-strong: var(--esi-ink-700); --color-border-inverted-subtle: var(--esi-ink-700); --color-border-inverted-strong: var(--esi-gold-400); /* Accent / functional */ --color-accent: var(--esi-gold-500); --color-accent-strong: var(--esi-gold-600); --color-focus: var(--esi-gold-600); --color-focus-inverted: var(--esi-gold-300); --color-state-error: var(--esi-clay-600); --color-state-error-surface: #f7e8e4; --color-state-success: var(--esi-moss-600); /* Typography */ --font-display: var(--esi-type-display); --font-body: var(--esi-type-body); --font-mono: var(--esi-type-mono); --tracking-wide: 0.18em; --tracking-medium: 0.08em; --body-size: 1rem; --body-line-height: 1.7; /* Type scale (fluid, mobile-first) */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: clamp(1.75rem, 6vw, 2.25rem); --text-3xl: clamp(2rem, 7.5vw, 2.9rem); --text-4xl: clamp(2.4rem, 9vw, 3.6rem); --text-hero: clamp(2.6rem, 11vw, 4.75rem); /* Space */ --space-3xs: var(--esi-space-3xs); --space-2xs: var(--esi-space-2xs); --space-xs: var(--esi-space-xs); --space-sm: var(--esi-space-sm); --space-md: var(--esi-space-md); --space-lg: var(--esi-space-lg); --space-xl: var(--esi-space-xl); --space-2xl: var(--esi-space-2xl); --space-3xl: var(--esi-space-3xl); --space-4xl: var(--esi-space-4xl); /* Layout */ --container: 72rem; --container-text: 40rem; --container-wide: 96rem; --gutter: clamp(1.25rem, 5vw, 2.5rem); /* Shape */ --radius-s: 2px; --radius-m: 4px; --radius-full: 999px; /* Depth — minimal; layer-token philosophy */ --shadow-raised: 0 1px 2px rgba(14, 61, 61, 0.08), 0 6px 24px -12px rgba(14, 61, 61, 0.18); --shadow-floating: 0 2px 8px rgba(14, 61, 61, 0.12), 0 20px 48px -20px rgba(14, 61, 61, 0.26); --hairline: 1px solid var(--color-border-subtle); /* Motion */ --motion-fast: 180ms; --motion-base: 260ms; --motion-slow: 640ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Elevation / stacking */ --z-header: 100; --z-drawer: 200; --z-overlay: 300; --z-lightbox: 400; --z-toast: 500; } /* ---------------------------------------------------------------------------- TIER 3 — COMPONENT TOKENS. Compose semantic roles into component roles. Components read these (or the semantic layer directly), never --esi-*. -------------------------------------------------------------------------- */ [data-theme="esiama"] { --c-btn-primary-bg: var(--color-surface-inverted); --c-btn-primary-fg: var(--color-text-inverted); --c-btn-ghost-fg: var(--color-text-primary); --c-btn-accent-bg: transparent; --c-btn-accent-border: var(--color-accent); --c-btn-accent-fg: var(--color-text-accent); --c-card-surface: var(--color-surface-raised); --c-card-border: var(--hairline); --c-chip-fg: var(--color-text-secondary); --c-chip-bg: var(--color-surface); --c-chip-active-fg: var(--color-text-inverted); --c-chip-active-bg: var(--color-surface-inverted); --c-header-fg: var(--color-text-inverted); --c-header-solid-bg: var(--color-bg); --c-header-solid-fg: var(--color-text-primary); --c-field-bg: var(--color-surface-raised); --c-field-border: var(--color-border-subtle); --c-field-fg: var(--color-text-primary); --c-room-tag-bg: var(--color-surface-inverted); --c-room-tag-fg: var(--color-text-inverted-accent); } /* Interaction states are additive on top of component tokens (components.css). */ @media (prefers-reduced-motion: reduce) { [data-theme="esiama"] { --motion-fast: 1ms; --motion-base: 1ms; --motion-slow: 1ms; } }