/* TCCT Thailand — Optimized stylesheet with dark/light mode Light mode is the default. Users toggle to dark via the header button. Theme persists across pages via localStorage. ============================================================ */ :root { /* Brand palette (unchanged across themes) */ --color-accent: #c41e24; --color-accent-light: #e02a30; --color-accent-dark: #9a181d; --color-gold: #c9a84c; /* Brand navy — used in branded sections regardless of theme */ --brand-navy: #0a1f44; --brand-navy-light: #132d5e; --brand-navy-dark: #06152e; /* Theme-driven tokens (Light defaults) */ --color-primary: #0a1f44; --color-primary-light: #132d5e; --color-primary-dark: #06152e; --color-white: #ffffff; --color-gray-50: #f8f9fa; --color-gray-100: #f0f1f3; --color-gray-200: #d9dce1; --color-gray-300: #b0b5be; --color-gray-500: #6b7280; --color-gray-700: #374151; --color-gray-900: #111827; /* Surface & text tokens for adaptive areas */ --bg-page: #ffffff; --bg-soft: #f8f9fa; --bg-alt: #f0f1f3; --surface: #ffffff; --surface-elev: #ffffff; --border: #d9dce1; --border-soft: #f0f1f3; --text-strong: #111827; --text: #374151; --text-soft: #6b7280; --text-muted: #9ca3af; /* Header glass effect (light) */ --header-bg: rgba(10, 31, 68, 0.95); --header-border: rgba(255, 255, 255, 0.08); --font-heading: "Noto Sans Thai", "Helvetica Neue", Arial, sans-serif; --font-body: "Noto Sans Thai", "Helvetica Neue", Arial, sans-serif; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.10); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.14); --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.20); --transition: all 0.3s ease; } /* ============================================================ DARK THEME OVERRIDES Triggered by JS adding data-theme="dark" on . Brand-coloured sections (navy hero, navy footer, page banners) intentionally keep their dark navy look in BOTH themes — they're identity, not chrome. We only flip the "page chrome" surfaces. ============================================================ */ [data-theme="dark"] { --bg-page: #0d1421; --bg-soft: #131b2c; --bg-alt: #1a2336; --surface: #161e2f; --surface-elev: #1d2740; --border: #2a3550; --border-soft: #1f2840; --text-strong: #f1f5f9; --text: #cbd5e1; --text-soft: #94a3b8; --text-muted: #64748b; /* In dark mode the navy header would blend with the body, so darken it a touch and strengthen the border for separation. */ --header-bg: rgba(6, 12, 24, 0.92); --header-border: rgba(255, 255, 255, 0.06); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6); --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.7); /* ----- Legacy variable overrides for page-specific inline