/* ============================================================================ * Platform Variables — Three-Namespace Architecture * ---------------------------------------------------------------------------- * Plan: D:\GEMINI\2026\Timer\MeetMeApp-v1\plans\2026-05-04-2100-socia-brand-foundation.md * Memory: feedback_socia_timer_separation.md * * --shared-* Truly common (spacing, radii, fonts). Anyone may reference. * --timer-* Timer brand only. Defined in framework.css :root. * NEVER overridden by Socia. Only Timer-specific CSS may reference. * --socia-* Socia brand only. Defined here at [data-platform="socia"]. * NEVER overridden by Timer. Only Socia-specific CSS may reference. * --platform-* Dynamic switch — maps per active platform. * Use ONLY in shared/framework files (framework.css, animations.css, * components.css, drawer styles, generic buttons). * Page-specific CSS must use the platform-prefixed token directly. * * Platform is set via data-platform attribute on . * This file should be loaded AFTER framework.css. * ============================================================================ */ /* ───────────────────────── SHARED TOKENS ────────────────────────────────── */ :root { /* Spacing scale */ --shared-space-1: 4px; --shared-space-2: 8px; --shared-space-3: 12px; --shared-space-4: 16px; --shared-space-5: 24px; --shared-space-6: 32px; --shared-space-7: 48px; --shared-space-8: 64px; /* Radius scale */ --shared-radius-sm: 4px; --shared-radius-md: 8px; --shared-radius-lg: 12px; --shared-radius-xl: 16px; --shared-radius-full: 9999px; /* Typography */ --shared-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --shared-font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; } /* ───────────────────────── TIMER PLATFORM ───────────────────────────────── */ /* --timer-* tokens are defined in framework.css :root (do not redefine here). This block ONLY maps --platform-* to Timer's brand tokens for shared CSS. */ [data-platform="timer"] { --platform-primary: var(--timer-primary); --platform-primary-dark: var(--timer-primary-dark); --platform-primary-light: var(--timer-primary-light); /* RGB triplets for rgba() alpha use: rgba(var(--platform-X-rgb), 0.X) */ --platform-primary-rgb: 157, 62, 245; --platform-secondary-rgb: 78, 205, 196; --platform-accent-rgb: 255, 107, 53; --platform-secondary: var(--timer-teal); --platform-secondary-dark: var(--timer-teal-dark); --platform-secondary-light:var(--timer-teal-light); --platform-accent: var(--timer-orange); --platform-accent-dark: var(--timer-orange-dark); --platform-accent-light: var(--timer-orange-light); --platform-accent-soft: var(--timer-orange-soft); --platform-gradient-primary: var(--timer-gradient-primary); --platform-gradient-warm: var(--timer-gradient-warm); --platform-gradient-cool: var(--timer-gradient-cool); --platform-logo: url('/assets/img/timer-logo.svg'); --platform-logo-small: url('/assets/img/timer-logo-small.svg'); --platform-favicon: url('/favicon.ico'); } /* ───────────────────────── SOCIA PLATFORM ───────────────────────────────── */ /* --socia-* tokens are the source of truth for Socia branding. Source: D:\Gemini\2026\Socia\Website\socia-brand-colors.html NEVER references --timer-*. NEVER overrides --timer-*. */ [data-platform="socia"] { /* Primary brand scale — teal cyan */ --socia-brand-50: #e6f9fc; /* Ice */ --socia-brand-100: #b3eef6; /* Mist */ --socia-brand-200: #66dced; /* Breeze */ --socia-brand-400: #00b8d6; /* ★ Logo color — never change */ --socia-brand-600: #0095ad; /* Hover state */ --socia-brand-800: #006d7f; /* Dark */ --socia-brand-900: #003d48; /* Abyss */ /* Convenience aliases for the most common usages */ --socia-brand: var(--socia-brand-400); --socia-brand-hover: var(--socia-brand-600); --socia-brand-light: var(--socia-brand-200); /* RGB triplet for rgba() alpha use: rgba(var(--socia-brand-rgb), 0.X) */ --socia-brand-rgb: 0, 184, 214; /* Background system — dark-first per brand spec */ --socia-bg-abyss: #060e11; --socia-bg-void: #0b161a; --socia-bg-deep: #122228; --socia-bg-surface: #1a2e35; --socia-bg-elevated: #233c44; --socia-bg-overlay: #2e4d57; /* Accent palette */ --socia-accent-seafoam: #00e6b8; /* Success / live */ --socia-accent-seafoam-dark: #00bf99; --socia-accent-seafoam-light:#33ecc6; --socia-accent-sky: #4da6ff; /* Info / links */ --socia-accent-lagoon: #0091a3; /* Secondary action */ --socia-accent-pearl: #e0f4f7; /* Decorative */ --socia-accent-coral: #ff7b6b; /* Warning / error */ --socia-accent-amber: #f5c542; /* Premium / featured */ --socia-accent-amber-dark: #d4a630; --socia-accent-amber-light: #f9d873; --socia-accent-amber-soft: rgba(245, 197, 66, 0.10); /* Tinted alpha versions for badge/chip backgrounds */ --socia-accent-seafoam-dim: rgba(0, 230, 184, 0.15); --socia-accent-amber-dim: rgba(245, 197, 66, 0.15); --socia-accent-coral-dim: rgba(255, 123, 107, 0.15); --socia-accent-sky-dim: rgba(77, 166, 255, 0.15); /* Text tokens */ --socia-text-primary: #e6f9fc; --socia-text-secondary: #7ec8d4; --socia-text-tertiary: #3d7a87; --socia-text-on-brand: #ffffff; --socia-text-on-light: #003d48; --socia-text-on-light-muted: #006d7f; /* Borders */ --socia-border-subtle: rgba(0, 184, 214, 0.12); --socia-border-default: rgba(0, 184, 214, 0.25); --socia-border-strong: rgba(0, 184, 214, 0.45); --socia-border-light: #b3eef6; /* Semantic states */ --socia-state-success: #00e6b8; --socia-state-success-bg: rgba(0, 230, 184, 0.12); --socia-state-warning: #f5c542; --socia-state-warning-bg: rgba(245, 197, 66, 0.12); --socia-state-error: #ff7b6b; --socia-state-error-bg: rgba(255, 123, 107, 0.12); --socia-state-info: #4da6ff; --socia-state-info-bg: rgba(77, 166, 255, 0.12); /* Gradients */ --socia-gradient-primary: linear-gradient(135deg, #00b8d6, #0095ad); --socia-gradient-warm: linear-gradient(135deg, #f5c542, #00b8d6); --socia-gradient-cool: linear-gradient(135deg, #00e6b8, #00b8d6); --socia-gradient-deep: linear-gradient(135deg, #00b8d6, #006d7f); --socia-gradient-aqua: linear-gradient(135deg, #00b8d6, #00e6b8); /* Map --platform-* to Socia tokens (for shared/framework files) */ --platform-primary: var(--socia-brand); --platform-primary-dark: var(--socia-brand-hover); --platform-primary-light: var(--socia-brand-light); /* RGB triplets for rgba() alpha use: rgba(var(--platform-X-rgb), 0.X) */ --platform-primary-rgb: 0, 184, 214; /* socia-brand */ --platform-secondary-rgb: 0, 230, 184; /* socia-accent-seafoam */ --platform-accent-rgb: 245, 197, 66; /* socia-accent-amber */ --platform-secondary: var(--socia-accent-seafoam); --platform-secondary-dark: var(--socia-accent-seafoam-dark); --platform-secondary-light:var(--socia-accent-seafoam-light); --platform-accent: var(--socia-accent-amber); --platform-accent-dark: var(--socia-accent-amber-dark); --platform-accent-light: var(--socia-accent-amber-light); --platform-accent-soft: var(--socia-accent-amber-soft); --platform-gradient-primary: var(--socia-gradient-primary); --platform-gradient-warm: var(--socia-gradient-warm); --platform-gradient-cool: var(--socia-gradient-cool); --platform-logo: url('/assets/img/socia-logo.svg'); --platform-logo-small: url('/assets/img/socia-logo-small.svg'); --platform-favicon: url('/assets/img/socia-favicon.svg'); } /* ───────────────────── PLATFORM-AWARE COMPONENT OVERRIDES ───────────────── */ /* Shared components (framework-level) auto-themed via --platform-*. Do NOT add Socia- or Timer-specific styling here — that belongs in socia-* or timer-* CSS files respectively. */ /* Buttons — primary */ .timer-btn-primary { background: var(--platform-primary); } .timer-btn-primary:hover { background: var(--platform-primary-dark); } /* Gradient backgrounds */ .timer-gradient-bg, .timer-hero-gradient { background: var(--platform-gradient-primary); } /* Links and highlights */ a:not(.timer-btn):hover, .timer-link:hover { color: var(--platform-primary); } /* Focus rings */ *:focus-visible { outline-color: var(--platform-primary); } /* Topbar brand color accent */ .topbar-brand-accent { background: var(--platform-gradient-primary); } /* Form focus states */ .timer-input:focus, .timer-select:focus, .timer-textarea:focus { border-color: var(--platform-primary); box-shadow: 0 0 0 3px var(--platform-primary-light); } /* Tags and badges */ .timer-tag-primary, .timer-badge-primary { background: var(--platform-primary); } /* Progress bars */ .timer-progress-bar { background: var(--platform-primary); } /* Switches and toggles */ .timer-switch input:checked + .timer-switch-slider { background: var(--platform-primary); } /* Checkboxes and radios */ .timer-checkbox input:checked + .timer-checkbox-mark, .timer-radio input:checked + .timer-radio-mark { background: var(--platform-primary); border-color: var(--platform-primary); } /* NOTE: Logo swapping is handled by JavaScript in navigation-rail.js using the updatePlatformLogo() function since CSS content property doesn't work on elements. */