/* Dark-mode guard (2026-07-12): site ships a light theme only. This stops browser auto-dark (Edge/Chrome force-dark) from inverting colors and breaking the Sign-in button and footer headings. Remove when a real dark theme is designed. */ :root { color-scheme: only light; } /* ============================================ TBNHS Design Tokens ============================================ */ :root { /* ── Brand Colors ── */ --color-primary-dark: #1D455A; --color-primary-teal: #56B7D0; --color-primary-blue: #3A779A; --color-accent-gold: #F6D469; --color-accent-cream: #EDDBCA; /* ── Neutrals ── */ --color-white: #FFFFFF; --color-black: #111111; --color-gray-50: #F9FAFB; --color-gray-100: #F2F4F7; --color-gray-200: #E4E7EC; --color-gray-300: #D0D5DD; --color-gray-400: #9CA3AF; --color-gray-500: #667085; --color-gray-600: #374151; --color-gray-700: #344054; --color-gray-800: #1F2937; --color-gray-900: #111827; /* ── Backgrounds ── */ --bg-page: #FFF9F4; --bg-dashboard: #F2F4F7; --bg-card: #FFFFFF; --bg-sidebar: #FFFFFF; /* ── Semantic ── */ --color-success: #1E8E3E; --color-success-bg: #E6F4EA; --color-warning: #B45309; --color-warning-bg: #FFF4E5; --color-danger: #D93025; --color-danger-bg: #FDECEA; --color-info: #0369A1; --color-info-bg: #E0F2FE; /* ── Focus / Interactive ── */ --color-focus: #3B82F6; --color-focus-ring: rgba(59, 130, 246, 0.1); --color-link: #302CE1; /* ── New-Design Palette (navy / teal / gold) ── */ --navy: #0D2E4A; --navy-mid: #1B4D6B; --navy-light: #2A6B92; --teal: #1DAAAA; --teal-light: #4DC4C4; --teal-pale: #E8F7F7; --warm: #F5F0E8; --warm-mid: #EDE6D8; --gold: #C8902E; --gold-light: #E8B04A; --cream: #FAF8F4; --text-dark: #0D1F2D; --text-mid: #3D5468; --text-light: #6B8A9E; /* ── Typography ── */ --font-primary: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'DM Serif Display', Georgia, serif; --font-body: 'DM Sans', system-ui, sans-serif; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.75rem; /* 28px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 2.75rem; /* 44px */ --text-6xl: 4.125rem; /* 66px */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.6; /* ── Spacing (8px grid) ── */ --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: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 14px; --radius-2xl: 16px; --radius-full: 9999px; --border-default: 1px solid var(--color-gray-200); /* ── Shadows ── */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.05); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1); --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-2xl: 0 20px 60px rgba(0, 0, 0, 0.3); /* ── Transitions ── */ --transition-fast: 0.15s ease; --transition-base: 0.3s ease; /* ── Layout ── */ --container-max: 1200px; --sidebar-width: 240px; --header-height: 80px; /* ── Z-index ── */ --z-dropdown: 100; --z-sticky: 200; --z-header: 999; --z-modal-backdrop: 1000; --z-modal: 1010; color-scheme: light; } /* ============================================ Dark Theme -------------------------------------------- Applied via . The "System" setting is resolved to light|dark in JS (dashboard.js) and written to data-theme. The prefers-color-scheme block below is a no-JS fallback only. ============================================ */ [data-theme="dark"] { color-scheme: dark; /* ── Surfaces ── */ --bg-page: #0C1922; --bg-dashboard: #0E2330; --bg-card: #15303F; --bg-sidebar: #112835; /* ── Neutral scale (inverted) ── Light grays (50–300) were subtle surfaces / borders / hovers, so they become dark. Dark grays (400–900) were text, so they become light. */ --color-white: #FFFFFF; /* keep literal white for text on colored fills */ --color-black: #E9F1F6; /* used mostly as body text → light */ --color-gray-50: #18323F; --color-gray-100: #1D3A48; --color-gray-200: #2B4654; --color-gray-300: #3A5563; --color-gray-400: #5E7886; --color-gray-500: #93A9B6; --color-gray-600: #BCCDD7; --color-gray-700: #D2DFE7; --color-gray-800: #E6EEF3; --color-gray-900: #F3F8FB; /* ── Text ── */ --text-dark: #EAF1F5; --text-mid: #B3C5D0; --text-light: #88A0AE; /* ── New-design surface tints (used inline) ── */ --warm: #14262F; --warm-mid: #16303C; --cream: #102029; --teal-pale: #0E3236; /* ── Semantic foregrounds (brightened for contrast) ── */ --color-success: #5BD98A; --color-warning: #FBBF5C; --color-danger: #F87171; --color-info: #4FC0F5; --color-link: #8AB4FF; /* ── Semantic backgrounds (dark tints) ── */ --color-success-bg: #11331F; --color-warning-bg: #3A2C12; --color-danger-bg: #3A1C1B; --color-info-bg: #0E3346; /* ── Borders / shadows tuned for dark ── */ --border-default: 1px solid var(--color-gray-200); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.55); --shadow-xl: 0 8px 28px rgba(0, 0, 0, 0.6); --shadow-2xl: 0 20px 60px rgba(0, 0, 0, 0.7); } /* No-JS fallback: honor OS preference until the toggle script runs. Skipped when an explicit choice is present (data-theme="light"). */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --bg-page: #0C1922; --bg-dashboard: #0E2330; --bg-card: #15303F; --bg-sidebar: #112835; --color-black: #E9F1F6; --color-gray-50: #18323F; --color-gray-100: #1D3A48; --color-gray-200: #2B4654; --color-gray-300: #3A5563; --color-gray-400: #5E7886; --color-gray-500: #93A9B6; --color-gray-600: #BCCDD7; --color-gray-700: #D2DFE7; --color-gray-800: #E6EEF3; --color-gray-900: #F3F8FB; --text-dark: #EAF1F5; --text-mid: #B3C5D0; --text-light: #88A0AE; --warm: #14262F; --warm-mid: #16303C; --cream: #102029; --teal-pale: #0E3236; --color-success: #5BD98A; --color-warning: #FBBF5C; --color-danger: #F87171; --color-info: #4FC0F5; --color-link: #8AB4FF; --color-success-bg: #11331F; --color-warning-bg: #3A2C12; --color-danger-bg: #3A1C1B; --color-info-bg: #0E3346; --border-default: 1px solid #2B4654; } } /* Smooth theme transition (respects reduced-motion) */ @media (prefers-reduced-motion: no-preference) { body, .dashboard, .dashboard__sidebar, .soft-card, .card, .property-card, .sidebar__link { transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base); } }