/* ═══════════════════════════════════════════════ CONNEK SUPER APP — CSS CUSTOM PROPERTIES Default theme: St. Vincent & the Grenadines (VC/SVG) Overridden at runtime by [data-country] in themes.css ═══════════════════════════════════════════════ */ :root { /* ── Brand Core ── */ --brand-name: "Connek"; /* ── Background Layers ── */ --bg-shell: #0d0d1a; --bg-surface: #141428; --bg-card: #1c1c35; --bg-card-hover: #242444; --bg-nav: #111122; --bg-modal: #181830; /* ── Accent Palette (overridden per country via themes.css) ── */ --accent-primary: #009E60; --accent-secondary: #FCD116; --accent-tertiary: #009E60; --accent-gold: #ffd700; /* ── Text ── */ --text-primary: #f0f0ff; --text-secondary: #9090b8; --text-muted: #5a5a80; --text-on-accent: #000000; /* ── Status ── */ --status-success: #00e676; --status-warning: #ffc107; --status-error: #ff5252; --status-info: #40c4ff; /* ── Borders & Dividers ── */ --border-subtle: rgba(255,255,255,0.06); --border-medium: rgba(255,255,255,0.12); --border-accent: var(--accent-primary); /* ── Shadows ── */ --shadow-card: 0 4px 24px rgba(0,0,0,0.5); --shadow-nav: 0 -4px 24px rgba(0,0,0,0.6); --shadow-fab: 0 6px 28px rgba(0,158,96,0.4); --shadow-glow: 0 0 40px rgba(0,158,96,0.2); /* ── Radius ── */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 32px; --radius-full: 9999px; /* ── Spacing ── */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; /* ── Typography ── */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: "SF Mono", "Fira Code", monospace; /* ── Shell Dimensions ── */ --header-height: 60px; --nav-height: 72px; --safe-area-top: env(safe-area-inset-top, 0px); --safe-area-bottom: env(safe-area-inset-bottom, 0px); /* ── Transitions ── */ --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); --transition-med: 0.28s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.45s cubic-bezier(0.4, 0, 0.2, 1); /* ── Color scheme ── */ color-scheme: dark; /* ── Country Specific (default: SVG) ── */ --country-greeting: "Wah Gwaan"; --country-name: "St. Vincent"; --country-flag: "��"; --country-gradient: linear-gradient(135deg, #009E60 0%, #FCD116 50%, #009E60 100%); --fab-bg: linear-gradient(135deg, #009E60, #FCD116); --carousel-gradient: linear-gradient(160deg, #001a0d 0%, #003d1a 100%); } /* ════════════════════════════════════════════════ LIGHT THEME — applied via [data-color-scheme="light"] on Accent colours stay per-country; only backgrounds, text, borders change. ════════════════════════════════════════════════ */ [data-color-scheme="light"] { color-scheme: light; /* Backgrounds */ --bg-shell: #f0f0f8; --bg-surface: #ffffff; --bg-card: #e8e8f4; --bg-card-hover: #dcdcec; --bg-nav: #ffffff; --bg-modal: #ffffff; /* Text */ --text-primary: #0d0d1a; --text-secondary: #44446a; --text-muted: #8888aa; --text-on-accent: #ffffff; /* Borders */ --border-subtle: rgba(0,0,0,0.07); --border-medium: rgba(0,0,0,0.13); /* Shadows — softer in light mode */ --shadow-card: 0 2px 16px rgba(0,0,0,0.10); --shadow-nav: 0 -2px 16px rgba(0,0,0,0.10); /* Carousel — light wash instead of deep dark */ --carousel-gradient: linear-gradient(160deg, #d4f0e4 0%, #eafaf2 100%); }