/* ===================================================== NAMIREMBE GUESTHOUSE -- CSS CUSTOM PROPERTIES Brand: Premium guesthouse & retreat -- Kampala's "Million Dollar View" Official Palette: #D663C1 (primary), #852999, #BA84B1, #BA6ECB, #D688E7 Official Font: Arial (headings & all brand communications) ===================================================== */ /* Google Fonts for body text only -- headings use Arial per brand guidelines */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&display=swap'); :root { /* Supports both light and dark modes — toggle via .theme-dark class or system preference */ color-scheme: light dark; /* ** OFFICIAL BRAND COLORS (NGH Brand Guidelines) ** */ /* Primary brand purple */ --color-brand-primary: #D663C1; /* Official NGH primary purple */ --color-brand-deep: #852999; /* Deep brand purple */ --color-brand-mid: #BA84B1; /* Mid-tone brand purple */ --color-brand-alt: #BA6ECB; /* Alternative brand purple */ --color-brand-light: #D688E7; /* Light brand purple */ /* "-"- MAPPED DESIGN TOKENS (using official palette) "-"- */ --color-ochre: #D663C1; /* Primary accent -- official NGH purple */ --color-ochre-light: #D688E7; /* Lighter brand purple for hover */ --color-ochre-dark: #852999; /* Deep brand purple for contrast */ --color-ochre-pale: #F7EAF5; /* Very light brand tint */ --color-earth: #1E0D1A; /* Deep plum-black -- primary text */ --color-earth-mid: #4A1F43; /* Mid plum for secondary text */ --color-earth-light: #7A5574; /* Light mauve -- muted text */ --color-ivory: #FDF8FC; /* Soft lavender-ivory -- light background */ --color-ivory-warm: #F5EBF3; /* Warm pinkish cream -- card backgrounds */ --color-ivory-dark: #E8D5E4; /* Mauve cream -- borders, dividers */ --color-forest: #270E2E; /* Deep indigo-plum -- secondary brand */ --color-forest-mid: #3B1C4A; /* Medium purple */ --color-forest-light: #BA6ECB; /* Light brand alt purple -- accents */ --color-forest-pale: #F0E4F5; /* Very light purple tint */ --color-rust: #A63D2F; /* Deep terracotta -- error/danger */ --color-rust-light: #C4503F; /* Lighter rust */ --color-rust-pale: #FAEAE8; /* Very light rust tint */ --color-charcoal: #1A1A1A; /* Near-black for maximum contrast */ --color-slate: #4A4A4A; /* Dark grey -- body text alt */ --color-mist: #9A9A9A; /* Light grey -- placeholders */ --color-cloud: #D4D4D4; /* Very light grey -- borders */ --color-white: #FFFFFF; /* "-"- SEMANTIC COLORS "-"- */ --color-primary: var(--color-ochre); --color-primary-hover: var(--color-ochre-light); --color-primary-dark: var(--color-ochre-dark); --color-secondary: var(--color-forest); --color-secondary-hover:var(--color-forest-mid); --color-accent: var(--color-brand-alt); --color-success: #2A7A4B; --color-success-pale: #E8F5EE; --color-warning: #B07D0A; --color-warning-pale: #FFF8E1; --color-danger: var(--color-rust); --color-danger-pale: var(--color-rust-pale); --color-info: #852999; --color-info-pale: #F0E4F5; /* "-"- STATUS BADGE COLORS "-"- */ --status-pending-bg: #FFF3CD; --status-pending-text: #856404; --status-confirmed-bg: #D1FAE5; --status-confirmed-text:#065F46; --status-checkin-bg: #DBEAFE; --status-checkin-text: #1E40AF; --status-checkout-bg: #E0E7FF; --status-checkout-text: #3730A3; --status-cancelled-bg: #FEE2E2; --status-cancelled-text:#991B1B; --status-placed-bg: #FEF3C7; --status-placed-text: #92400E; --status-preparing-bg: #DBEAFE; --status-preparing-text:#1E3A8A; --status-ready-bg: #D1FAE5; --status-ready-text: #065F46; --status-delivered-bg: #F3F4F6; --status-delivered-text:#374151; /* "-"- BACKGROUND SYSTEM "-"- */ --bg-body: var(--color-ivory); --bg-surface: var(--color-ivory-warm); --bg-surface-alt: var(--color-ivory-dark); --bg-dark: var(--color-earth); --bg-dark-mid: var(--color-earth-mid); --bg-overlay: rgba(30, 13, 26, 0.78); --bg-glass: rgba(253, 248, 252, 0.88); --bg-glass-dark: rgba(30, 13, 26, 0.82); /* "-"- TYPOGRAPHY (Brand-compliant) "-"- */ /* Arial is the OFFICIAL primary font per NGH brand guidelines */ --font-display: Arial, 'Helvetica Neue', Helvetica, sans-serif; --font-heading: Arial, 'Helvetica Neue', Helvetica, sans-serif; --font-body: 'DM Sans', Arial, 'Helvetica Neue', Helvetica, sans-serif; --font-mono: 'Courier New', Courier, monospace; --font-price: Arial, 'Helvetica Neue', Helvetica, sans-serif; /* Prices & currency */ /* Font Sizes -- Fluid Type Scale */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 2rem; /* 32px */ --text-3xl: 2.5rem; /* 40px */ --text-4xl: 3.25rem; /* 52px */ --text-5xl: 4rem; /* 64px */ --text-6xl: 5.5rem; /* 88px */ /* Font Weights */ --weight-light: 300; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line Heights */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.6; --leading-relaxed: 1.75; --leading-loose: 2; /* Letter Spacing */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.1em; --tracking-widest: 0.15em; /* "-"- SPACING SCALE "-"- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* "-"- BORDERS "-"- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-2xl: 32px; --radius-full: 9999px; --border-thin: 1px solid var(--color-ivory-dark); --border-mid: 1.5px solid var(--color-ivory-dark); --border-gold: 1px solid var(--color-ochre); --border-gold-mid: 2px solid var(--color-ochre); --border-dark: 1px solid var(--color-earth-mid); /* "-"- SHADOWS "-"- */ --shadow-xs: 0 1px 3px rgba(30,13,26, 0.08); --shadow-sm: 0 2px 8px rgba(30,13,26, 0.10); --shadow-md: 0 4px 16px rgba(30,13,26, 0.12); --shadow-lg: 0 8px 32px rgba(30,13,26, 0.16); --shadow-xl: 0 16px 48px rgba(30,13,26, 0.20); --shadow-2xl: 0 32px 80px rgba(30,13,26, 0.25); --shadow-gold: 0 4px 20px rgba(214,99,193, 0.30); --shadow-inner: inset 0 2px 6px rgba(30,13,26, 0.08); /* "-"- TRANSITIONS "-"- */ --ease-out: cubic-bezier(0.0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55); --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; --duration-slowest: 900ms; --transition-base: all var(--duration-base) var(--ease-in-out); --transition-fast: all var(--duration-fast) var(--ease-out); --transition-slow: all var(--duration-slow) var(--ease-out); --transition-color: color var(--duration-fast) var(--ease-in-out), background-color var(--duration-fast) var(--ease-in-out), border-color var(--duration-fast) var(--ease-in-out); /* "-"- LAYOUT "-"- */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1440px; --header-height: 80px; --header-height-scroll: 64px; --sidebar-width: 280px; --sidebar-collapsed: 72px; /* "-"- Z-INDEX SCALE "-"- */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-header: 300; --z-sidebar: 400; --z-modal-bg: 500; --z-modal: 600; --z-toast: 700; --z-tooltip: 800; --z-top: 9999; /* "-"- DECORATIVE "-"- */ --texture-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.06'/%3E%3C/svg%3E"); /* Brand gradients using official NGH palette */ --gradient-gold: linear-gradient(135deg, #852999 0%, #D663C1 50%, #D688E7 100%); --gradient-earth: linear-gradient(135deg, var(--color-earth) 0%, var(--color-earth-mid) 100%); --gradient-forest: linear-gradient(135deg, var(--color-forest) 0%, var(--color-forest-mid) 100%); --gradient-ivory: linear-gradient(150deg, var(--color-ivory) 0%, var(--color-ivory-warm) 100%); --gradient-hero: linear-gradient(180deg, rgba(30,13,26,0) 0%, rgba(30,13,26,0.45) 50%, rgba(30,13,26,0.92) 100%); --gradient-card: linear-gradient(180deg, transparent 40%, rgba(30,13,26,0.88) 100%); --gradient-mesh: radial-gradient(ellipse at 20% 50%, rgba(214,99,193,0.14) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(133,41,153,0.10) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, rgba(186,110,203,0.08) 0%, transparent 50%); /* \"-\"- ADMIN DARK PANEL TOKENS (always dark regardless of site theme) \"-\"- */ --admin-bg: #100810; --admin-panel: #1A1008; --admin-border: rgba(214,99,193,0.12); --admin-border-hover: rgba(214,99,193,0.25); --admin-text: rgba(251,246,250,0.75); --admin-text-dim: rgba(251,246,250,0.40); --admin-text-faint: rgba(251,246,250,0.20); --admin-ivory: rgba(251,246,250,0.06); /* \"-\"- GLASS / TOAST SEMANTIC TOKENS \"-\"- */ --glass-bg-dark: rgba(28,18,10,0.82); --glass-text: rgba(251,246,250,0.92); --glass-text-dim: rgba(251,246,250,0.50); --glass-btn-bg: rgba(255,255,255,0.08); --glass-btn-hover: rgba(255,255,255,0.18); --glass-text-hover: rgba(251,246,250,0.90); /* \"-\"- SEMANTIC STATUS ALIASES (alpha-aware) \"-\"- */ --color-ok: #5cb85c; --color-ok-bg: rgba(92,184,92,0.20); --color-ok-border: rgba(92,184,92,0.30); --color-error: #e0503a; --color-error-bg: rgba(224,80,58,0.20); --color-error-border: rgba(224,80,58,0.30); --color-warn: #e08c3a; --color-warn-bg: rgba(224,140,58,0.20); --color-warn-border: rgba(224,140,58,0.30); --color-info-blue: #64a0f0; --color-info-blue-bg: rgba(100,160,240,0.20); --color-info-blue-border:rgba(100,160,240,0.30); /* Unified shorthand aliases for semantic status (light mode) */ --color-ok-text: #155724; --color-ok-bg-dark: #c3e6cb; --color-error-text: #721c24; --color-error-bg-dark: #f5c6cb; --color-warn-text: #856404; --color-warn-bg-dark: #ffeeba; --color-info: #1565C0; --color-info-bg: rgba(21,101,192,0.10); --color-info-border: rgba(21,101,192,0.25); --color-info-text: #0c5460; --color-info-bg-dark: #bee5eb; --color-ok-bg-dark: #d4edda; /* \"-\"- DIETARY TAG TOKENS \"-\"- */ --dietary-veg-bg: #E8F5E9; --dietary-veg-text: #2E7D32; --dietary-vegan-bg: #F3E5F5; --dietary-vegan-text: #7B1FA2; --dietary-gf-bg: #FFF8E1; --dietary-gf-text: #F57F17; --dietary-spicy-bg: #FFEBEE; --dietary-spicy-text: #C62828; --dietary-nuts-bg: #FBE9E7; --dietary-nuts-text: #BF360C; } /* ───────────────────────────────────────────────────────── DARK THEME OVERRIDES Applied via: .theme-dark class on OR @media (prefers-color-scheme: dark) system preference Toggle JS writes/removes .theme-dark and saves to localStorage. ───────────────────────────────────────────────────────── */ /* Shared dark-mode token map — used by both class and media query */ :root.dark-mode, :root.theme-dark, .theme-dark { color-scheme: dark; /* Backgrounds */ --bg-body: #0D060C; --bg-surface: #180B15; --bg-surface-alt: #221122; --bg-dark: #0D060C; --bg-overlay: rgba(0, 0, 0, 0.82); --bg-glass: rgba(24, 11, 21, 0.92); --bg-glass-dark: rgba(0, 0, 0, 0.85); /* Typography — invert the plum-black text to near-white */ --color-earth: #FDF8FC; --color-earth-mid: #E8D5E4; --color-earth-light: #BA84B1; /* Semantic surface-level text */ --color-charcoal: #F5EFF4; --color-slate: #C8B4C4; --color-mist: #7A5574; --color-cloud: #3B1C4A; /* Borders — brand-tinted for dark mode */ --border-thin: 1px solid rgba(214,99,193,0.18); --border-mid: 1.5px solid rgba(214,99,193,0.24); --border-gold: 1px solid rgba(214,99,193,0.55); --border-gold-mid: 2px solid rgba(214,99,193,0.70); --border-dark: 1px solid rgba(214,99,193,0.14); /* Shadows — deeper for dark backgrounds */ --shadow-xs: 0 1px 3px rgba(0,0,0,0.45); --shadow-sm: 0 2px 8px rgba(0,0,0,0.55); --shadow-md: 0 4px 16px rgba(0,0,0,0.65); --shadow-lg: 0 8px 32px rgba(0,0,0,0.75); --shadow-xl: 0 16px 48px rgba(0,0,0,0.85); --shadow-2xl: 0 32px 80px rgba(0,0,0,0.90); --shadow-gold: 0 4px 20px rgba(214,99,193,0.45); --shadow-inner: inset 0 2px 6px rgba(0,0,0,0.50); /* Ivory/cream surfaces become deep plum in dark mode */ --color-ivory: #1A0D18; --color-ivory-warm: #140A12; --color-ivory-dark: #2A1228; --color-ochre-pale: #2A1230; --color-forest-pale: #1E0D1A; /* Status badge colours — slightly muted for dark bg */ --status-pending-bg: #2C230A; --status-pending-text: #F5C842; --status-confirmed-bg: #0A2218; --status-confirmed-text:#4ADE80; --status-checkin-bg: #0D1C35; --status-checkin-text: #60A5FA; --status-checkout-bg: #121540; --status-checkout-text: #818CF8; --status-cancelled-bg: #2D0A0A; --status-cancelled-text:#F87171; --status-placed-bg: #2C1E08; --status-placed-text: #FCD34D; --status-preparing-bg: #0D1C35; --status-preparing-text:#93C5FD; --status-ready-bg: #0A2218; --status-ready-text: #6EE7B7; --status-delivered-bg: #1A1A1A; --status-delivered-text:#9CA3AF; /* Success / warning / danger in dark mode */ --color-success: #34D399; --color-success-pale: #064E3B; --color-warning: #F59E0B; --color-warning-pale: #451A03; --color-danger: #F87171; --color-danger-pale: #7F1D1D; --color-info: #60A5FA; --color-info-pale: #1E3A5F; /* Semantic status alias overrides for dark mode */ --color-ok: #34D399; --color-ok-bg: rgba(52,211,153,0.18); --color-ok-border: rgba(52,211,153,0.32); --color-ok-text: #86efac; --color-ok-bg-dark: rgba(52,211,153,0.25); --color-error: #F87171; --color-error-bg: rgba(248,113,113,0.18); --color-error-border: rgba(248,113,113,0.32); --color-error-text: #fca5a5; --color-error-bg-dark: rgba(248,113,113,0.25); --color-warn: #F59E0B; --color-warn-bg: rgba(245,158,11,0.18); --color-warn-border: rgba(245,158,11,0.32); --color-warn-text: #fde68a; --color-warn-bg-dark: rgba(245,158,11,0.25); --color-info-bg: rgba(96,165,250,0.18); --color-info-border: rgba(96,165,250,0.32); --color-info-text: #93c5fd; --color-info-bg-dark: rgba(96,165,250,0.25); } /* Dark mode is exclusively opt-in via .theme-dark class (set by theme toggle button). System preference is intentionally NOT used — the site always starts in light mode. */