/* ================================================================= ISG · HotelMap — TOKENS THE SINGLE SOURCE OF TRUTH for the whole application. ----------------------------------------------------------------- Nothing else in the app declares a design token. Every colour, size, radius, shadow and type value lives HERE, exactly once. Components (hotelmap.css, app.css, gantt.css, mobile.css) only ever CONSUME these via var(). The documented reference is "Style Guide.html" — it renders these same values live. Architecture (3 layers, top → bottom): 1 · PRIMITIVES raw scales. The only place literals are typed. 2 · SEMANTIC intent roles. Components read THESE. 3 · COMPAT legacy flat aliases (--teal, --ink, --line …) kept so existing call-sites keep resolving. Cascade rule (do not move tokens between blocks): · Mode-INVARIANT primitives live on :root. · Mode-DEPENDENT primitives + the whole semantic & compat layer live on #app, so a single #app[data-mode="dark"] override re-resolves the entire chain on the same element. Splitting them would leave inherited copies stale (half-dark look). System in one line: warm cream paper · ink · IBM Plex Mono · slate-teal accent · 0 radii · hairline rules · no shadows · 8px grid. ================================================================= */ /* ================================================================= 1 · PRIMITIVES — mode-invariant (shape, type, fixed colour scales) ================================================================= */ :root { /* ================================================================= 0 · BRAND / THEME INPUTS ⟵ EDIT HERE TO RESKIN THE WHOLE APP ----------------------------------------------------------------- Everything below derives from these knobs. Change one value and it cascades through every component. To try a whole new style guide, swap this block (type, below) plus the BRAND COLOUR block in the #app section and its dark mirror — nothing else moves. Current brand: "Magenta" — gallery white · ink · magenta. ================================================================= */ /* ---- Brand type (3 roles + mono fallback) ---- display = big titles · body = the UI · num = figures/codes */ --brand-font-display: 'Mark Pro Bold', 'Libre Franklin', system-ui, sans-serif; --brand-font-body: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --brand-font-num: 'Yantramanav', 'Libre Franklin', system-ui, sans-serif; --brand-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; /* ---- Brand shape ---- one knob per corner family */ --brand-radius: 0px; /* 0 = square (Magenta). Try 8px for soft. */ --brand-radius-pill: 0px; /* pills/chips. Try 999px for rounded. */ /* ---- Type roles (components read THESE) ---- */ --font-sans: var(--brand-font-body); /* the UI body face */ --font-mono: var(--brand-font-mono); --font-num: var(--brand-font-num); --font-display: var(--brand-font-display); /* ---- Type size scale (px) ---- */ --fs-2xs: 10px; --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 32px; --fs-4xl: 40px; --fs-5xl: 48px; --fs-6xl: 60px; /* ---- Font weights ---- */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---- Letter spacing ---- */ --ls-tight: -0.012em; --ls-wide: 0.18em; /* eyebrows / PIN tracking */ /* ---- Spacing scale (8px baseline grid; 4-based) ---- */ --u: 8px; /* the baseline unit */ --space-2: 2px; --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-56: 56px; --space-64: 64px; /* ---- Radius scale — all derived from the brand-radius knobs ---- */ --radius-2xs: var(--brand-radius); --radius-xs: var(--brand-radius); --radius-sm: var(--brand-radius); --radius-md: var(--brand-radius); --radius-lg: var(--brand-radius); --radius-xl: var(--brand-radius); --radius-pill: var(--brand-radius-pill); /* ---- Stroke widths ---- */ --stroke-1: 1px; --stroke-2: 2px; --stroke-3: 3px; --stroke-4: 4px; /* ---- Secondary line — the SINGLE-room product path (cyan). Distinct from the group accent only at the entry choice. Mode-invariant: same hue in light and dark. ---- */ --cyan-5: #E3F3F9; --cyan-10: #C9E8F3; --cyan-50: #0095C8; --cyan-60: #007BA8; --cyan-70: #005E80; /* ---- Status colours (mode-invariant) ---- */ --success-500: #1F9D6B; --warning-500: #E0892B; --danger-500: #D2493B; --deal-500: #E12B1E; /* discount / savings */ --discount-500:#D02201; /* official HotelMap discount red */ --amber-500: #E0892B; /* rating stars hue */ --warning-tint: #FBEFD9; --danger-tint: #FBECEA; --success-tint: #EBF5EE; --success-tint-2:#D6EEDF; --success-900: #1D6B4A; /* ---- Dietary / data-viz pastels (mode-invariant) ---- */ --diet-veg: #D8E8C5; --diet-vegan: #C5E0B0; --diet-gf: #F0E6C5; --diet-halal: #E0D4C0; --diet-kosher: #D4D0E8; --diet-wheel: #C5D8E8; --diet-kids: #F0D4D8; /* ---- RGB bases — use as rgba(var(--x), ) ---- */ --shadow-rgb: 16,40,60; --scrim-rgb: 16,28,34; --scrim-light-rgb: 244,247,248; --on-dark-rgb: 255,255,255; --black-rgb: 0,0,0; --danger-rgb: 210,73,59; --success-rgb: 31,157,107; /* flash-safe page colour before #app paints */ background: #f5f4f1; } /* ================================================================= 2 · PRIMITIVES (mode-dependent) + SEMANTIC + COMPAT — LIGHT All declared on #app so #app[data-mode="dark"] re-resolves them. ================================================================= */ #app { /* ================================================================= BRAND COLOUR (LIGHT) ⟵ EDIT HERE TO RECOLOUR THE WHOLE APP ~16 anchors. Every neutral, accent and semantic role below derives from these. Current brand: "Magenta" — gallery white, near-black ink, magenta accent. Dark mirrors these knobs. ================================================================= */ --brand-ink: #161412; /* headings / ink */ --brand-body: #2b2926; /* body text */ --brand-muted: #6e6a62; /* muted text */ --brand-faint: #9b968d; /* faint text */ --brand-paper: #ffffff; /* app canvas — white */ --brand-surface: #ffffff; /* cards / raised surface */ --brand-shaded: #f7f7f8; /* shaded backgrounds — faint cool grey, no beige */ --brand-shaded-2: #eeeef0; /* deeper shaded — neutral */ --brand-hairline: #1614141f; /* hairline rule (ink ~12%) */ --brand-hairline-2: #16141436; /* disabled hairline */ --brand-accent: #ca2c8b; /* signature magenta */ --brand-accent-hover: #b3247a; --brand-accent-strong: #97206a; /* links / strong */ --brand-accent-tint: #fbeaf4; /* selected wash */ --brand-accent-tint-2: #f4d6ea; --brand-on-accent: #ffffff; /* text on the accent */ /* ---- Neutrals → derived from brand ---- */ --neutral-0: var(--brand-surface); --neutral-50: var(--brand-paper); --neutral-75: var(--brand-shaded); --neutral-100: var(--brand-shaded-2); --neutral-150: var(--brand-hairline); --neutral-200: var(--brand-hairline-2); --neutral-400: var(--brand-faint); --neutral-500: var(--brand-muted); --neutral-700: var(--brand-body); --neutral-900: var(--brand-ink); --neutral-1000: var(--brand-ink); /* ---- Accent scale → derived from brand ---- */ --group-5: var(--brand-accent-tint); --group-10: var(--brand-accent-tint-2); --group-20: color-mix(in srgb, var(--brand-accent) 45%, transparent); --group-50: var(--brand-accent); --group-60: var(--brand-accent-hover); --group-70: var(--brand-accent-strong); /* ---- Extended literal roles (LIGHT) ---- */ --star: var(--brand-ink); /* rating stars — ink */ --map-bg: #ffffff; /* B&W map canvas */ --placeholder-1: #D3D7D9; /* image-placeholder stripe */ --placeholder-2: #E7EAEB; /* ===== SEMANTIC — intent roles (components read THESE) ===== */ /* accent — the live brand accent */ --accent: var(--brand-accent); --accent-hover: var(--brand-accent-hover); --accent-strong: var(--brand-accent-strong); --accent-soft: var(--brand-accent); /* selectable-card hover border */ --accent-tint: var(--brand-accent-tint); --accent-tint-2: var(--brand-accent-tint-2); --on-accent: var(--brand-on-accent); /* secondary — single-room product path */ --secondary: var(--cyan-50); --secondary-hover: var(--cyan-60); --secondary-strong: var(--cyan-70); --secondary-tint: var(--cyan-5); --secondary-tint-2: var(--cyan-10); /* surfaces */ --surface: var(--neutral-0); --surface-sunken: var(--neutral-75); --surface-sunken-2: var(--neutral-100); --surface-hover: var(--neutral-75); --surface-warm: var(--neutral-75); --bg-app: var(--neutral-50); /* text */ --text-heading: var(--neutral-900); --text-body: var(--neutral-700); --text-muted: var(--neutral-500); --text-faint: var(--neutral-400); --text-on-accent: var(--on-accent); /* borders */ --border: var(--neutral-150); --border-disabled: var(--neutral-200); /* links / inline edit (single-accent system: dark teal, never blue) */ --link: var(--accent-strong); --link-hover: var(--accent-strong); /* status roles */ --status-success: var(--success-500); --status-warning: var(--warning-500); --status-danger: var(--danger-500); --status-warning-tint: var(--warning-tint); --status-danger-tint: var(--danger-tint); --status-success-tint: var(--success-tint); --status-success-tint-2: var(--success-tint-2); --status-success-strong: var(--success-900); /* dietary backgrounds */ --diet-bg-vegetarian: var(--diet-veg); --diet-bg-vegan: var(--diet-vegan); --diet-bg-gluten-free: var(--diet-gf); --diet-bg-halal: var(--diet-halal); --diet-bg-kosher: var(--diet-kosher); --diet-bg-wheelchair: var(--diet-wheel); --diet-bg-kids: var(--diet-kids); /* dark-surface roles (login / deep brand panels) */ --text-on-dark: rgba(255,255,255,1); --text-on-dark-eyebrow: rgba(255,255,255,0.82); --text-on-dark-muted: rgba(255,255,255,0.72); --text-on-dark-faint: rgba(255,255,255,0.50); --text-on-dark-disabled: rgba(255,255,255,0.40); --border-on-dark: rgba(255,255,255,0.20); --border-on-dark-strong: rgba(255,255,255,0.55); --field-on-dark: rgba(255,255,255,0.06); --field-on-dark-focus: rgba(255,255,255,0.10); --field-inactive-dark: rgba(255,255,255,0.10); /* radius roles — all square */ --radius-card: var(--radius-xs); --radius-row: var(--radius-xs); --radius-button: var(--radius-xs); --radius-pill-r: var(--radius-pill); --radius-float: var(--radius-xs); /* elevation — mono uses hairlines, not shadows */ --shadow-card: none; --shadow-float: 0 0 0 1px var(--border); --shadow-btn: none; /* ===== COMPAT BRIDGE — legacy flat aliases ===== */ --teal: var(--accent); --teal-600: var(--accent-hover); --teal-700: var(--accent-strong); --teal-tint: var(--accent-tint); --teal-tint-2: var(--accent-tint-2); --cyan: var(--secondary); --cyan-600: var(--secondary-hover); --cyan-700: var(--secondary-strong); --cyan-tint: var(--secondary-tint); --cyan-tint-2: var(--secondary-tint-2); --blue: var(--link); /* retired blue → teal family */ --blue-600: var(--link-hover); --blue-tint: var(--accent-tint); --blue-border: var(--accent-soft); --ink: var(--text-heading); --text: var(--text-body); --muted: var(--text-muted); --faint: var(--text-faint); --row: var(--surface-sunken); --row-2: var(--surface-sunken-2); --line: var(--border); --disabled: var(--border-disabled); --white: var(--surface); --page: var(--bg-app); --good: var(--status-success); --warn: var(--status-warning); --bad: var(--status-danger); --r-card: var(--radius-card); --r-row: var(--radius-row); --r-btn: var(--radius-button); --r-pill: var(--radius-pill); --r-float: var(--radius-float); --sh-card: var(--shadow-card); --sh-float: var(--shadow-float); --sh-btn: var(--shadow-btn); --sans: var(--font-sans); --s1: var(--space-4); --s2: var(--space-8); --s3: var(--space-12); --s4: var(--space-16); --s5: var(--space-20); --s6: var(--space-24); --s7: var(--space-32); --s8: var(--space-40); --s9: var(--space-56); /* HotelMap Hybrid Grid tokens */ --hm-accent: var(--accent); --hm-accent-hover: var(--accent-hover); --hm-accent-pale: var(--accent-tint-2); --hm-accent-wash: var(--accent-tint); --hm-accent-ring: color-mix(in srgb, var(--brand-accent) 22%, transparent); --hm-deal: var(--deal-500); --hm-gutter: var(--space-24); --hm-baseline: var(--space-8); --hm-split-minor: 38.2fr; --hm-split-major: 61.8fr; --hm-page-margin: clamp(16px, 4vw, 40px); /* paint the app surface from the token */ background: var(--bg-app); color: var(--text-body); color-scheme: light; } /* ================================================================= 2b · DARK — overrides ONLY the mode-dependent primitives + accent. Semantic & compat re-resolve automatically (same element). ================================================================= */ #app[data-mode="dark"] { /* ---- BRAND COLOUR (DARK) — mirror of the light knobs ---- */ --brand-ink: #f3f0ee; --brand-body: #cdcac4; --brand-muted: #948f89; --brand-faint: #6c6962; --brand-paper: #100f11; --brand-surface: #1a181b; --brand-shaded: #211f24; --brand-shaded-2: #2a2730; --brand-hairline: #efe7f022; --brand-hairline-2: #efe7f03a; --brand-accent: #e260aa; /* lifted magenta for dark */ --brand-accent-hover: #ea78b8; --brand-accent-strong: #f3a3ce; --brand-accent-tint: #251a23; --brand-accent-tint-2: #2f2033; --brand-on-accent: #1c0f17; /* extended roles (mode-specific) */ --map-bg: #0D0F0E; --placeholder-1: #24262A; --placeholder-2: #15171A; color-scheme: dark; }