/* GB.ABH Design Tokens — single source of truth for the shared UI system. Loaded before every other stylesheet on all four layouts (guest guidebook, admin, local_guide, office). Theme-owned values (--primary-color, --accent-color, --font-family) are declared here only as fallback DEFAULTS. base.html re-declares them inline from the per-tenant/brand theme in the LAST block, so the live theme always wins the cascade on base-layout surfaces; the defaults are what the standalone office layout (no theme block) and un-themed pages fall back to. Everything else (surface, state, spacing, type, radius, elevation) is canonical here so each surface renders from the same vocabulary. Consumed by components.css and the macros in templates/macros/ui.html. */ :root { /* ── Theme-owned defaults (overridden inline by base.html) ── */ --primary-color: #1a1a2e; --accent-color: #e91e8c; --font-family: Inter, sans-serif; /* ── Surface & text (light) ─────────────────────────────── */ /* NOTE: circadian mode (static/js/circadian.js, BASE_LIGHT/BASE_DARK) mirrors these surface hex values to blend a solar tint. Keep the two in sync. */ --bg: #f8f8fc; --bg-card: #ffffff; --bg-surface: #f0f0f8; --input-bg: #ffffff; --text: #1a1a2e; --text-muted: #5b5b73; /* darkened from legacy #666680 to clear WCAG AA on --bg */ --text-subtle: #6b7280; /* darkened from legacy #94a3b8 (which failed AA) */ --border: #e0e0f0; --border-strong: #cbd5e1; /* ── Radius scale (overridden by body.radius-* variants) ── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 999px; /* ── Spacing scale (4px base) ───────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ── Type scale ─────────────────────────────────────────── */ --fs-xs: 0.75rem; --fs-sm: 0.85rem; --fs-md: 1rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; /* ── Elevation ──────────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(15, 15, 26, 0.06); --shadow-md: 0 4px 12px rgba(15, 15, 26, 0.10); --shadow-lg: 0 20px 60px rgba(15, 15, 26, 0.30); /* ── Accent derivatives (computed from the tenant accent so brand overrides propagate automatically) ────────────────────── */ --accent-soft: color-mix(in srgb, var(--accent-color) 12%, transparent); --accent-tint: color-mix(in srgb, var(--accent-color) 35%, transparent); /* ── AI accent — the ONE sanctioned violet. Marks AI-generated content (advisor narratives, insights, recommendations) so it stays visually segregated from human-authored data. Never use for interactive states, tabs, buttons, or charts. ──────── */ --ai-accent: #6d28d9; --ai-accent-bg: #f3efff; /* ── Chart categorical palette (booking-source / window series). Tokenized in Epic C; palette design finalized in Epic E. ── */ --chart-cat-1: #f59e0b; --chart-cat-2: #3b82f6; --chart-cat-3: #64748b; --chart-cat-4: #10b981; /* ── Focus ring (accessibility baseline) — derived from the tenant accent so themed tenants keep a matching ring ──────────── */ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent-color) 45%, transparent); /* ── Semantic state colors (fg / bg), aligned to legacy .badge-* and .u-alert-* values so nothing re-skins ── */ --state-success-fg: #166534; --state-success-bg: #dcfce7; --state-error-fg: #991b1b; --state-error-bg: #fef2f2; --state-warning-fg: #92400e; --state-warning-bg: #fef3c7; --state-info-fg: #1d4ed8; --state-info-bg: #dbeafe; --state-neutral-fg: #475569; --state-neutral-bg: #f1f5f9; /* ── Minimum touch target (a11y) ────────────────────────── */ --touch-target: 44px; /* ── Guidebook section-accent palette — wayfinding color per guidebook tab (icon-circle badges only). A dedicated categorical set, same idea as --chart-cat-*, so each section reads distinctly without any component hardcoding raw hex. Keys match section_key. */ --section-accent-welcome: #2e7d32; --section-accent-wifi: #5c6bc0; --section-accent-arrival: #d81b60; --section-accent-accommodation: #8d6e63; --section-accent-safety: #c62828; --section-accent-useful_numbers: #0288d1; --section-accent-enhance: #f9a825; --section-accent-local_area: #00897b; --section-accent-before_you_leave: #ef6c00; --section-accent-book_again: #7b1fa2; --section-accent-farewell: #ad1457; --section-accent-water_level: #00acc1; } /* ── Dark mode surface/text/state overrides ─────────────────── */ html.dark { --bg: #0f0f1a; --bg-card: #1a1a2e; --bg-surface: #252540; /* Inputs read as a distinct, slightly-raised surface rather than a bare card background — never a light/white background under dark text. */ --input-bg: #242449; --text: #e8e8f0; --text-muted: #a6a6c2; --text-subtle: #9090b0; --border: #333360; --border-strong: #3f3f6e; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6); --state-success-fg: #86efac; --state-success-bg: #14321f; --state-error-fg: #fca5a5; --state-error-bg: #3a1414; --state-warning-fg: #fcd34d; --state-warning-bg: #3a2c0a; --state-info-fg: #93c5fd; --state-info-bg: #14213a; --state-neutral-fg: #cbd5e1; --state-neutral-bg: #252540; --ai-accent: #c4b5fd; --ai-accent-bg: #251b45; /* Slightly brighter for pop against dark --bg-card */ --section-accent-welcome: #4caf50; --section-accent-wifi: #7986cb; --section-accent-arrival: #ec407a; --section-accent-accommodation: #a1887f; --section-accent-safety: #e57373; --section-accent-useful_numbers: #29b6f6; --section-accent-enhance: #ffca28; --section-accent-local_area: #26a69a; --section-accent-before_you_leave: #ffa726; --section-accent-book_again: #ab47bc; --section-accent-farewell: #ec407a; --section-accent-water_level: #26c6da; } /* ── Radius variants (mirror legacy body.radius-* in guidebook.css) ── */ body.radius-sharp { --radius-sm: 0; --radius-md: 2px; --radius-lg: 4px; } body.radius-soft { --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; } body.radius-rounded { --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; }