/* ===================================================== INDEPENDENCE DAY THEME — Tricolor (Aug 14-15, 2026) ===================================================== Apply by adding class "theme-independence" on Auto-reverts after 48 hours via theme-manager.js Flag Colors: - Saffron : #FF9933 - White : #FFFFFF - Green : #138808 - Navy : #000080 (Ashoka Chakra) This theme overrides: 1. New semantic variables from twc/utilities.css 2. Legacy variables from b1eaut2yofp1hys4er9/lib.css 3. TWC-home variables from twc/index.css ===================================================== */ html.theme-independence { /* ---------- Override Legacy Variables (lib.css + twc/index.css) ---------- */ --primary: #FF9933; --primary-deep: #cc7a29; --primary-soft: #fff0e0; --accent: #138808; --accent-soft: #e6f9ee; --text: #000080; --text-light: #5a4a3a; --muted: #4a6741; --muted-light: rgba(255, 255, 255, 0.9); --panel: #ffffff; --panel-2: #fff8f0; --border: rgba(255, 153, 51, 0.25); --border-light: rgba(255, 255, 255, 0.4); --shadow: 0 2px 12px rgba(0, 0, 128, 0.1); --shadow-hover: 0 8px 30px rgba(0, 0, 128, 0.18); --navy: #000080; --navy-deep: #000066; --tan: #ffffff; --tan-light: #fff8f0; --brown: #FF9933; --brown-deep: #cc7a29; --bg: #ffffff; /* ---------- Override New Semantic Variables (twc/utilities.css) ---------- */ /* ---------- Override Base Colors ---------- */ --color-primary: #FF9933; --color-primary-deep: #cc7a29; --color-primary-soft: #fff0e0; --color-accent: #138808; --color-accent-soft: #e6f9ee; --color-text: #000080; --color-text-light: #ffffff; --color-muted: #4a6741; --color-brown: #FF9933; --color-brown-light: #ffb366; --color-brown-deep: #cc7a29; --color-brown-soft: #fff5e6; --color-success: #138808; --color-warning: #FF9933; --color-danger: #cc0000; --color-navy: #000080; --color-navy-light: #1a1a99; --color-antique: #ffffff; --color-light-blue: #fff8f0; --color-baseback: #ffffff; --color-panel: #ffffff; --color-panel-2: #fff8f0; /* ---------- Opacity Variants ---------- */ --color-white-10: rgba(255, 255, 255, 0.1); --color-white-20: rgba(255, 255, 255, 0.2); --color-white-30: rgba(255, 255, 255, 0.3); --color-white-40: rgba(255, 255, 255, 0.4); --color-white-50: rgba(255, 255, 255, 0.5); --color-white-60: rgba(255, 255, 255, 0.6); --color-white-70: rgba(255, 255, 255, 0.7); --color-white-80: rgba(255, 255, 255, 0.8); --color-white-90: rgba(255, 255, 255, 0.9); --color-black-10: rgba(0, 0, 0, 0.1); --color-black-20: rgba(0, 0, 0, 0.2); --color-black-30: rgba(0, 0, 0, 0.3); --color-black-40: rgba(0, 0, 0, 0.4); --color-black-50: rgba(0, 0, 0, 0.5); --color-black-60: rgba(0, 0, 0, 0.6); --color-black-70: rgba(0, 0, 0, 0.7); --color-black-80: rgba(0, 0, 0, 0.8); --color-black-90: rgba(0, 0, 0, 0.9); --color-navy-10: rgba(0, 0, 128, 0.1); --color-navy-20: rgba(0, 0, 128, 0.2); --color-navy-30: rgba(0, 0, 128, 0.3); --color-navy-40: rgba(0, 0, 128, 0.4); --color-navy-50: rgba(0, 0, 128, 0.5); --color-navy-60: rgba(0, 0, 128, 0.6); --color-navy-70: rgba(0, 0, 128, 0.7); --color-navy-80: rgba(0, 0, 128, 0.8); --color-navy-90: rgba(0, 0, 128, 0.9); --color-brown-10: rgba(255, 153, 51, 0.1); --color-brown-20: rgba(255, 153, 51, 0.2); --color-brown-30: rgba(255, 153, 51, 0.3); --color-brown-40: rgba(255, 153, 51, 0.4); --color-brown-50: rgba(255, 153, 51, 0.5); --color-brown-60: rgba(255, 153, 51, 0.6); --color-brown-70: rgba(255, 153, 51, 0.7); --color-brown-80: rgba(255, 153, 51, 0.8); --color-brown-90: rgba(255, 153, 51, 0.9); --color-blue-10: rgba(0, 0, 128, 0.1); --color-blue-20: rgba(0, 0, 128, 0.2); --color-blue-30: rgba(0, 0, 128, 0.3); --color-blue-40: rgba(0, 0, 128, 0.4); --color-blue-50: rgba(0, 0, 128, 0.5); --color-blue-60: rgba(0, 0, 128, 0.6); --color-blue-70: rgba(0, 0, 128, 0.7); --color-blue-80: rgba(0, 0, 128, 0.8); --color-blue-90: rgba(0, 0, 128, 0.9); --color-green-10: rgba(19, 136, 8, 0.1); --color-green-20: rgba(19, 136, 8, 0.2); --color-green-30: rgba(19, 136, 8, 0.3); --color-green-40: rgba(19, 136, 8, 0.4); --color-green-50: rgba(19, 136, 8, 0.5); --color-green-60: rgba(19, 136, 8, 0.6); --color-green-70: rgba(19, 136, 8, 0.7); --color-green-80: rgba(19, 136, 8, 0.8); --color-green-90: rgba(19, 136, 8, 0.9); /* ---------- Semantic Shadows ---------- */ --shadow-soft: 0 18px 50px rgba(0, 0, 128, 0.12); --shadow-medium: 0 10px 26px rgba(0, 0, 128, 0.18); --shadow-strong: 0 20px 40px rgba(0, 0, 128, 0.15); --shadow-glass: 0 6px 24px rgba(0, 0, 128, 0.1); --shadow-elevated: 0 8px 32px rgba(0, 0, 128, 0.15); /* ---------- Semantic Borders ---------- */ --border-light: rgba(0, 0, 128, 0.12); --border-medium: rgba(0, 0, 128, 0.18); --border-strong: rgba(0, 0, 128, 0.15); --border-glass: rgba(255, 255, 255, 0.4); --border-glass-dark: rgba(255, 255, 255, 0.25); --border-brown: rgba(255, 153, 51, 0.4); --border-brown-soft: rgba(255, 153, 51, 0.3); /* ---------- TWC Hero Colors (Tricolor) ---------- */ --twc-hero-bg-start: #FF9933; --twc-hero-bg-mid: #FFFFFF; --twc-hero-bg-end: #138808; --twc-hero-text: #000080; --twc-hero-pill-bg: rgba(255, 153, 51, 0.12); --twc-hero-pill-shadow: 0 8px 24px rgba(255, 153, 51, 0.15); --twc-hero-pill-color: #cc7a29; --twc-hero-glass-bg: rgba(255, 255, 255, 0.35); --twc-hero-glass-border: rgba(255, 255, 255, 0.5); --twc-hero-glass-shadow: rgba(0, 0, 128, 0.1); --twc-hero-text-shadow: rgba(255, 255, 255, 0.7); --twc-hero-text-shadow-strong: rgba(255, 255, 255, 0.8); --twc-hero-text-shadow-dark: rgba(0, 0, 0, 0.2); /* ---------- Glass / Overlay Colors ---------- */ --glass-bg: rgba(255, 255, 255, 0.35); --glass-border: rgba(255, 255, 255, 0.5); --glass-shadow: rgba(0, 0, 128, 0.1); --glass-dark-bg: rgba(0, 0, 128, 0.25); --glass-dark-border: rgba(255, 255, 255, 0.3); --glass-dark-shadow: rgba(0, 0, 128, 0.15); --overlay-brown: rgba(255, 153, 51, 0.12); --overlay-brown-light: rgba(255, 153, 51, 0.08); --overlay-navy: rgba(0, 0, 128, 0.1); --overlay-navy-light: rgba(0, 0, 128, 0.06); --overlay-white: rgba(255, 255, 255, 0.15); --overlay-blue: rgba(0, 0, 128, 0.15); --overlay-navy-subtle: rgba(0, 0, 128, 0.05); --overlay-navy-medium: rgba(0, 0, 128, 0.12); /* ---------- Theme Mapping ---------- */ --theme-primary: #FF9933; --theme-secondary: #FFFFFF; --theme-accent: #138808; --theme-text: #000080; --theme-text-light: #ffffff; --theme-bg-start: #FF9933; --theme-bg-mid: #FFFFFF; --theme-bg-end: #138808; /* ---------- Existing TWC vars (backward compat) ---------- */ --twc-hero-bg-primary: var(--twc-hero-bg-start); --twc-hero-bg-secondary: var(--twc-hero-bg-mid); --twc-hero-bg-accent: var(--twc-hero-bg-end); --twc-hero-overlay: var(--overlay-brown); }