/* ========================================================================== Spinden Theme Token System Single source of truth for all CSS custom properties. ThemeProvider (theme_provider.js) injects overrides on at runtime. ========================================================================== */ /* ── Tier 1: Semantic color tokens (dark defaults) ─────────────────────── */ :root { /* Brand / accent palette */ --color-primary: #2E75B6; --color-primary-dark: #1F497D; --color-accent: #F59E0B; --color-accent-2: #4EAFF0; /* AI / SPINIQ accent */ --color-ai: #8B5CF6; --color-ai-light: #A78BFA; --color-ai-dark: #7C3AED; --color-ai-surface: rgba(139, 92, 246, .08); --color-ai-border: rgba(139, 92, 246, .25); --color-ai-glow: 0 0 20px rgba(139, 92, 246, .2); /* Luxis (POS) brand palette */ --luxis-gold: #D4A84B; --luxis-gold-light: #E8C97A; --luxis-gold-dark: #C49032; --luxis-warm: #F5DEB3; --luxis-dark: #2C2418; --luxis-surface: rgba(212, 168, 75, .08); --luxis-border: rgba(212, 168, 75, .25); --luxis-glow: 0 0 20px rgba(212, 168, 75, .2); /* Solstice (Player Tracking) brand palette. 2026-07-02 theme remediation P2: the legacy PURPLE (#6D4DAF) branding is RETIRED — Solstice is amber/charcoal everywhere (Will's decision). The --solstice-* names are kept because ~40 consumers (index.html sidebar, themes.css Solstice theme, core_api.js chrome gradient, analytics tabs) reference them; the VALUES now resolve to the canonical --sol-* amber registry below. Do not point these back at purple. */ --solstice-purple: var(--sol-accent-primary); /* legacy name — renders AMBER */ --solstice-purple-light: var(--sol-accent-hover); /* legacy name — renders AMBER */ --solstice-violet: var(--sol-accent-active); /* legacy name — renders AMBER */ --solstice-sunset: #E8734A; /* warm companion accent (kept) */ --solstice-sunset-light: #F09070; --solstice-deep: var(--sol-bg-base); --solstice-surface: rgba(212, 135, 10, .08); --solstice-border: rgba(212, 135, 10, .25); --solstice-glow: 0 0 20px rgba(212, 135, 10, .2); /* Solstice Unified Design System (Phase 7) — THE canonical Solstice palette registry (theme remediation P2, 2026-07-02). Values are reconciled TO the floor-canvas palette (solstice_floor_canvas.css #sfc-root — migration- exempt, so every other surface matches IT): bg #0a0b10 · surface #13151c · text #e6e9ef · danger #ef4444. solstice_surface.css --sfc-* tokens are ALIASES of these — change values HERE only. */ --sol-bg-base: #0a0b10; --sol-bg-elevated: #13151c; --sol-bg-card: #1a1d24; --sol-bg-input: #21242d; --sol-accent-primary: #D4870A; --sol-accent-hover: #F0B84D; --sol-accent-active: #E8960F; --sol-text-primary: #e6e9ef; --sol-text-secondary: #c4c7d0; --sol-text-muted: #9098a8; --sol-success: #34c770; --sol-warning: #fbbf24; --sol-error: #ef4444; /* was #e05555 — reconciled to --sfc-danger / severity-critical */ --sol-info: #60a5fa; --sol-up: #4ade80; /* "playing bigger / won" green (from --sfc-up) */ --sol-down: #f87171; /* "playing smaller / lost" soft red (from --sfc-down) */ /* Player-tier metallics (SSoT — mirrored from solstice_surface.css) */ --sol-tier-gold: #D4AF37; --sol-tier-silver: #B8BCC2; --sol-tier-bronze: #CD7F32; --sol-tier-platinum: #5B7C99; /* Metallic tier-pill gradients + their ink colors (P6): the two-stop gradients were hand-copied between solstice_player_list.css (the defining surface) and modules.css .ls-cashier — consume these instead of pasting the stops again. */ --sol-tier-gold-grad: linear-gradient(135deg, #ecca6b 0%, #c19a30 100%); --sol-tier-gold-ink: #2b2008; --sol-tier-silver-grad: linear-gradient(135deg, #e6e9ee 0%, #aab0b8 100%); --sol-tier-silver-ink: #1c1f24; --sol-tier-bronze-grad: linear-gradient(135deg, #e3a062 0%, #ad6a2c 100%); --sol-tier-bronze-ink: #271606; --sol-tier-platinum-grad: linear-gradient(135deg, #c6d8ea 0%, #6b8caa 100%); --sol-tier-platinum-ink: #14202c; --sol-severity-critical: #ef4444; --sol-severity-high: #f97316; --sol-severity-medium: #eab308; --sol-severity-low: #22c55e; --sol-mtl-safe: #22c55e; --sol-mtl-caution: #eab308; --sol-mtl-warning: #f97316; --sol-mtl-critical: #ef4444; /* Compliance cash-transaction tiering — SINGLE SOURCE OF TRUTH for coloring a cash-in / cash-out amount by its MTL/CTR proximity. Two lines: MTL (amber) and CTR (red). "Approaching" is a LIGHTER tint of the line's target color; the value saturates to the full color (and 700 weight) the instant the threshold is crossed. Every Solstice surface that tiers a cash amount (.spl-amt-*, .ss-amt-*, .spl-thresh-*, the player-list card) pulls these — do NOT hardcode the hex anywhere. Boundaries live in JS (_amountTier): neutral <$2.5k · approach-mtl <$3k · mtl <$9k · approach-ctr ≤$10k · ctr >$10k. */ --sol-amt-approach-mtl: #f3d49a; /* light amber */ --sol-amt-mtl: #f0b84d; /* full amber */ --sol-amt-approach-ctr: #f6a8a8; /* light red */ --sol-amt-ctr: #ef4444; /* full red */ --sol-border-color: rgba(255, 255, 255, 0.08); --sol-border-color-2: rgba(255, 255, 255, 0.14); /* stronger border (from --sfc-border-2) */ --sol-border-radius: 8px; --sol-border-radius-sm: 4px; --sol-border-radius-lg: 12px; --sol-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --sol-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --sol-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); --sol-transition-fast: 150ms ease; --sol-transition-normal: 200ms ease; --sol-transition-slow: 300ms ease-in-out; /* Global --amber (theme remediation P2). ~55 Solstice callsites reference var(--amber, ) and this token was never defined anywhere — so each callsite rendered its own fallback (5 different ambers, including #FFB300). Defined here once, every one of them now resolves to the canonical brand amber. Page-local `--amber:` re-declarations are removed as they're encountered; don't add new ones. */ --amber: var(--sol-accent-primary); /* Backgrounds — Graphite Pro (default) */ --color-bg: #0F131A; --color-bg-2: #161B24; --color-surface: rgba(214,223,236,.06); --color-surface-2: rgba(24,30,40,.78); /* Text */ --color-text: #DCE3EE; --color-text-muted: #A7B3C7; /* Borders */ --color-border: rgba(203,215,236,.2); /* Semantic status */ --color-success: #27AE60; --color-warning: #F39C12; --color-danger: #E74C3C; /* Form fields */ --color-field-bg: rgba(218,229,246,.08); --color-field-border: rgba(208,220,243,.28); --color-field-text: #E7EEF9; --color-field-placeholder:#B0BCD1; --color-field-focus: rgba(166,191,235,.55); /* Chrome: sidebar & topbar */ --color-sidebar-bg: rgba(52,61,74,.95); --color-sidebar-text: #DCE3EE; --color-topbar-bg: rgba(19,24,33,.76); /* Layout dimensions */ --layout-sidebar-w: 220px; --layout-topnav-h: 56px; --layout-split-detail-w: 380px; --layout-content-max: 1400px; /* Transition speed for layout/theme switches */ --theme-transition: 0.22s ease; --theme-transition-duration: 0.22s; /* ── Spacing scale (4px base) ─── */ --space-0: 0px; --space-1: 4px; /* --space-xs */ --space-2: 8px; /* --space-sm */ --space-3: 12px; /* --space-md */ --space-4: 16px; /* --space-lg */ --space-5: 20px; --space-6: 24px; /* --space-xl */ --space-8: 32px; /* --space-2xl */ --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Aliases */ --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-3); --space-lg: var(--space-4); --space-xl: var(--space-6); --space-2xl: var(--space-8); /* ── Typography ─── */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace; --text-xs: 11px; --text-sm: 12px; --text-base: 14px; --text-md: 15px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 22px; --text-3xl: 28px; --text-4xl: 36px; --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ── Border radius ─── */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* ── Shadows ─── */ --shadow-xs: 0 1px 2px rgba(0,0,0,.2); --shadow-sm: 0 2px 4px rgba(0,0,0,.2); --shadow-md: 0 4px 12px rgba(0,0,0,.25); --shadow-lg: 0 8px 24px rgba(0,0,0,.3); --shadow-xl: 0 16px 48px rgba(0,0,0,.35); --shadow-glow: 0 0 20px rgba(46,117,182,.2); /* ── Z-index scale ─── */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-popover: 500; --z-toast: 600; --z-tooltip: 700; /* ── Tier 3: Component tokens (reference Tier 1 semantic tokens) ─── */ /* Cards */ --card-bg: var(--color-surface); --card-border: var(--color-border); --card-radius: var(--radius-md); --card-padding: var(--space-5); --card-header-bg: transparent; --card-hover-border: rgba(184,204,255,.30); --card-hover-shadow: var(--shadow-sm); /* Tables */ --table-header-bg: rgba(184,204,255,.04); --table-header-text: var(--color-text-muted); --table-row-hover: rgba(184,204,255,.06); --table-stripe: rgba(184,204,255,.025); --table-border: rgba(184,204,255,.08); --table-cell-padding: var(--space-3) var(--space-4); /* Buttons */ --btn-radius: var(--radius-sm); --btn-padding: var(--space-2) var(--space-4); --btn-font-weight: var(--weight-medium); --btn-height: 36px; --btn-height-sm: 28px; --btn-height-lg: 44px; /* Form fields */ --field-height: 38px; --field-height-lg: 44px; --field-radius: var(--radius-sm); --field-padding: var(--space-2) var(--space-3); --field-label-size: var(--text-sm); --field-label-weight: var(--weight-medium); --field-label-color: var(--color-text-muted); --field-error-color: var(--color-danger); /* Navigation */ --nav-item-padding: var(--space-2) var(--space-3); --nav-item-radius: var(--radius-sm); --nav-item-hover: rgba(184,204,255,.08); --nav-active-bg: rgba(46,117,182,.12); --nav-active-text: #7CB9F0; --nav-active-border: var(--color-primary); /* Modals */ --modal-bg: var(--color-bg-2); --modal-border: var(--color-border); --modal-radius: var(--radius-lg); --modal-overlay: rgba(0,0,0,.55); --modal-shadow: var(--shadow-xl); /* KPI cards */ --kpi-positive: var(--color-success); --kpi-negative: var(--color-danger); --kpi-neutral: var(--color-warning); --kpi-number-size: var(--text-3xl); --kpi-label-size: var(--text-sm); /* Status badges */ --badge-radius: var(--radius-full); --badge-padding: 2px 10px; --badge-font-size: var(--text-xs); --badge-font-weight: var(--weight-medium); /* Toasts */ --toast-radius: var(--radius-md); --toast-shadow: var(--shadow-lg); --toast-padding: var(--space-3) var(--space-4); /* Transitions */ --transition-fast: 0.1s ease; --transition-base: 0.2s ease; --transition-slow: 0.35s ease; --transition-spring: 0.3s cubic-bezier(.32,.72,0,1); } /* ── Tier 2: Map new tokens → existing vars (backward compat) ───────────── */ /* The existing --app-*, --grey, --border, --muted vars still drive most of the existing component styles. This mapping ensures the new token changes cascade to them without touching those ~3500 lines of core.css. */ body { --app-text-primary: var(--color-text); --app-text-muted: var(--color-text-muted); --app-field-bg: var(--color-field-bg); --app-field-border: var(--color-field-border); --app-field-text: var(--color-field-text); --app-field-placeholder: var(--color-field-placeholder); --app-field-focus: var(--color-field-focus); --grey: var(--color-surface); --border: var(--color-border); --muted: var(--color-text-muted); --navy: var(--color-primary-dark); --blue: var(--color-primary); --accent: var(--color-accent-2); --sidebar-w: var(--layout-sidebar-w); /* Tier 2 → Tier 3 component token aliases for backward compat */ --card-shadow: none; } /* ── Light mode token overrides ─────────────────────────────────────────── */ /* Triggered by: data-mode="light" on body OR data-site-theme="classic" */ body[data-mode="light"], body[data-site-theme="classic"] { --color-primary: #2E75B6; --color-primary-dark: #1F497D; --color-accent: #D97706; --color-accent-2: #3B82F6; --color-bg: #EEF2F8; --color-bg-2: #E5EBF5; --color-surface: #F2F7FF; --color-surface-2: #FFFFFF; --color-text: #233448; --color-text-muted: #5D6F8B; --color-border: #C9D6E7; --color-success: #16A34A; --color-warning: #CA8A04; --color-danger: #DC2626; --color-field-bg: #F2F7FF; --color-field-border: #C9D6E7; --color-field-text: #233448; --color-field-placeholder:#7587A3; --color-field-focus: rgba(46,117,182,.45); --color-sidebar-bg: #1F497D; --color-sidebar-text: #FFFFFF; --color-topbar-bg: rgba(255,255,255,.92); /* AI / SPINIQ accent — light mode */ --color-ai: #7C3AED; --color-ai-light: #8B5CF6; --color-ai-dark: #6D28D9; --color-ai-surface: rgba(124, 58, 237, .06); --color-ai-border: rgba(124, 58, 237, .20); --color-ai-glow: 0 0 16px rgba(124, 58, 237, .12); /* Component overrides for light mode */ --card-bg: #FFFFFF; --card-border: #D8E2F0; --card-hover-border: #B8C8DE; --table-header-bg: #F5F8FC; --table-row-hover: #F0F4FA; --table-stripe: #FAFBFE; --table-border: #E5ECF5; --nav-item-hover: rgba(46,117,182,.06); --nav-active-bg: rgba(46,117,182,.08); --nav-active-text: #1F497D; --modal-bg: #FFFFFF; --modal-border: #D8E2F0; --modal-overlay: rgba(0,0,0,.35); --shadow-xs: 0 1px 2px rgba(0,0,0,.06); --shadow-sm: 0 2px 4px rgba(0,0,0,.06); --shadow-md: 0 4px 12px rgba(0,0,0,.08); --shadow-lg: 0 8px 24px rgba(0,0,0,.1); --shadow-xl: 0 16px 48px rgba(0,0,0,.12); } /* ── Paper (Living System Light) token overrides ──────────────────────────── */ /* When LS chrome is active AND user is in light mode, use warm Paper palette */ /* instead of the blue-gray "classic" light tokens above. */ body.ls-active[data-mode="light"], body.ls-active[data-site-theme="classic"] { --color-bg: #F3F0E8; --color-bg-2: #EBE7DD; --color-surface: #FBF9F3; --color-surface-2: #FDFBF5; --color-text: #1A1812; --color-text-muted: #766D5E; --color-border: rgba(24,18,8,0.12); --color-field-bg: rgba(253,251,245,0.9); --color-field-border: rgba(24,18,8,0.14); --color-field-text: #1A1812; --color-field-placeholder:#9B9281; --color-field-focus: rgba(180,83,9,0.45); --color-primary: #B45309; --color-primary-dark: #92400E; --color-accent: #D97706; --color-accent-2: #B45309; --color-sidebar-bg: linear-gradient(165deg, rgba(66,87,255,.94) 0%, rgba(84,46,163,.94) 52%, rgba(24,18,56,.98) 100%); --color-sidebar-text: #FFFFFF; --color-topbar-bg: rgba(253,251,245,0.92); /* AI / SPINIQ accent — Paper */ --color-ai: #7C3AED; --color-ai-light: #8B5CF6; --color-ai-surface: rgba(124, 58, 237, .06); --color-ai-border: rgba(124, 58, 237, .20); /* Component tokens — Paper warm equivalents */ --card-bg: #FBF9F3; --card-border: rgba(24,18,8,0.10); --card-hover-border: rgba(180,83,9,0.28); --table-header-bg: rgba(24,18,8,0.04); --table-row-hover: rgba(180,83,9,0.04); --table-stripe: rgba(24,18,8,0.02); --table-border: rgba(24,18,8,0.06); --nav-item-hover: rgba(180,83,9,0.06); --nav-active-bg: rgba(180,83,9,0.10); --nav-active-text: #92400E; --modal-bg: #FDFBF5; --modal-border: rgba(24,18,8,0.12); --modal-overlay: rgba(24,18,8,0.35); --shadow-xs: 0 1px 2px rgba(24,18,8,0.04); --shadow-sm: 0 2px 4px rgba(24,18,8,0.04); --shadow-md: 0 4px 12px rgba(24,18,8,0.06); --shadow-lg: 0 8px 24px rgba(24,18,8,0.08); --shadow-xl: 0 16px 48px rgba(24,18,8,0.10); /* Surface border — replaces white-alpha global */ --surface-border: rgba(24,18,8,0.08); /* NOTE (theme remediation P3, 2026-07-02): the "Solstice tokens — Paper warm variants" block that used to live here is RETIRED. Solstice is theme-locked dark/amber (Standing Rule — PWA theme lock, wired in core_api.js applyNavState): on any Solstice page data-site-theme flips to "modern" even for classic users, so a light --sol-* variant can never legitimately apply. Do not reintroduce one. */ } /* ── Dark Theme Token Overrides ────────────────────────────────────────────── */ /* modern theme (previously the root default, now needs explicit overrides) */ body[data-site-theme="modern"] { --color-bg: #080B14; --color-bg-2: #0D1220; --color-surface: rgba(184,204,255,.07); --color-surface-2: rgba(15,20,38,.62); --color-text: #E6EBFF; --color-text-muted: #9FB0D8; --color-border: rgba(184,204,255,.22); --color-field-bg: rgba(184,204,255,.09); --color-field-border: rgba(184,204,255,.26); --color-field-text: #E6EEFF; --color-field-placeholder: #9FB1D8; --color-field-focus: rgba(153,196,255,.65); --color-sidebar-bg: rgba(8,11,20,.92); --color-sidebar-text: #C8D8FF; --color-topbar-bg: rgba(8,11,20,.85); } /* graphite theme (default — matches :root tokens) */ body[data-site-theme="graphite"] { --color-bg: #0F131A; --color-bg-2: #161B24; --color-surface: rgba(214,223,236,.06); --color-surface-2: rgba(24,30,40,.78); --color-text: #DCE3EE; --color-text-muted: #A7B3C7; --color-border: rgba(203,215,236,.2); --color-field-bg: rgba(218,229,246,.08); --color-field-border: rgba(208,220,243,.28); --color-field-text: #E7EEF9; --color-field-placeholder: #B0BCD1; --color-field-focus: rgba(166,191,235,.55); --color-sidebar-bg: rgba(52,61,74,.95); --color-sidebar-text: #DCE3EE; --color-topbar-bg: rgba(19,24,33,.76); } /* aurora theme */ body[data-site-theme="aurora"] { --color-bg: #07171D; --color-bg-2: #0A2028; --color-surface: rgba(151,241,226,.08); --color-surface-2: rgba(8,34,45,.68); --color-text: #DEF9F5; --color-text-muted: #98D8CF; --color-border: rgba(127,229,214,.24); --color-field-bg: rgba(149,241,228,.1); --color-field-border: rgba(143,242,225,.33); --color-field-text: #E9FFFB; --color-field-placeholder: #A7DBD4; --color-field-focus: rgba(128,236,216,.58); --color-sidebar-bg: rgba(7,146,138,.95); --color-sidebar-text: #DEF9F5; --color-topbar-bg: rgba(7,33,43,.7); } /* midnight theme */ body[data-site-theme="midnight"] { --color-bg: #060A12; --color-bg-2: #0A0F1C; --color-surface: rgba(163,181,230,.08); --color-surface-2: rgba(10,14,32,.68); --color-text: #E7EDFF; --color-text-muted: #A7B6D7; --color-border: rgba(170,190,242,.24); --color-field-bg: rgba(155,178,237,.1); --color-field-border: rgba(171,193,247,.32); --color-field-text: #ECF2FF; --color-field-placeholder: #A5B5DA; --color-field-focus: rgba(167,196,255,.62); --color-sidebar-bg: rgba(36,54,120,.94); --color-sidebar-text: #E7EDFF; --color-topbar-bg: rgba(8,14,29,.72); } /* sunset theme */ body[data-site-theme="sunset"] { --color-bg: #1A0E16; --color-bg-2: #221620; --color-surface: rgba(255,188,182,.09); --color-surface-2: rgba(38,12,24,.70); --color-text: #FFE9EE; --color-text-muted: #E7B7C3; --color-border: rgba(246,168,172,.28); --color-field-bg: rgba(247,174,173,.12); --color-field-border: rgba(248,181,173,.36); --color-field-text: #FFF1F2; --color-field-placeholder: #E2B4BE; --color-field-focus: rgba(255,192,157,.62); --color-sidebar-bg: rgba(177,74,95,.95); --color-sidebar-text: #FFE9EE; --color-topbar-bg: rgba(39,17,34,.72); } /* evergreen theme */ body[data-site-theme="evergreen"] { --color-bg: #07150F; --color-bg-2: #0C1F16; --color-surface: rgba(144,230,190,.08); --color-surface-2: rgba(8,30,20,.70); --color-text: #E6FFF3; --color-text-muted: #A7DABF; --color-border: rgba(129,214,171,.26); --color-field-bg: rgba(139,222,182,.11); --color-field-border: rgba(140,225,185,.34); --color-field-text: #EDFFF7; --color-field-placeholder: #A4D8BD; --color-field-focus: rgba(142,236,190,.58); --color-sidebar-bg: rgba(24,122,91,.95); --color-sidebar-text: #E6FFF3; --color-topbar-bg: rgba(10,35,25,.72); } /* darklight theme */ body[data-site-theme="darklight"] { --color-bg: #101725; --color-bg-2: #171F31; --color-surface: rgba(187,204,244,.09); --color-surface-2: rgba(24,36,62,.72); --color-text: #E8EEFC; --color-text-muted: #B0BEDF; --color-border: rgba(178,196,240,.3); --color-field-bg: rgba(173,193,241,.14); --color-field-border: rgba(187,204,244,.36); --color-field-text: #EEF3FF; --color-field-placeholder: #AEBEE1; --color-field-focus: rgba(173,203,255,.64); --color-sidebar-bg: rgba(61,82,146,.95); --color-sidebar-text: #E8EEFC; --color-topbar-bg: rgba(18,28,48,.72); } /* darkmedium theme */ body[data-site-theme="darkmedium"] { --color-bg: #161D2D; --color-bg-2: #1E2738; --color-surface: rgba(171,189,228,.08); --color-surface-2: rgba(31,41,64,.70); --color-text: #DFE7F9; --color-text-muted: #A3B3D5; --color-border: rgba(162,180,221,.26); --color-field-bg: rgba(159,179,224,.12); --color-field-border: rgba(172,191,232,.32); --color-field-text: #EAF1FF; --color-field-placeholder: #A7B7D9; --color-field-focus: rgba(162,192,248,.6); --color-sidebar-bg: rgba(52,70,126,.94); --color-sidebar-text: #DFE7F9; --color-topbar-bg: rgba(23,31,50,.72); } /* ── Light Theme Token Overrides ───────────────────────────────────────────── */ /* frost theme */ body[data-site-theme="frost"] { --color-bg: #EEF4FB; --color-bg-2: #E5EDF8; --color-surface: #EAF1FB; --color-surface-2: #F8FBFF; --color-text: #23364A; --color-text-muted: #5D728F; --color-border: #C7D5E9; --color-field-bg: #F4F8FF; --color-field-border: #CBD8EA; --color-field-text: #223447; --color-field-placeholder: #7C8EA8; --color-field-focus: rgba(71,122,190,.42); --color-sidebar-bg: #365C94; --color-sidebar-text: #FFFFFF; --color-topbar-bg: rgba(247,250,255,.92); } /* sand theme */ body[data-site-theme="sand"] { --color-bg: #F7F3EA; --color-bg-2: #EFE8DA; --color-surface: #F0E8DA; --color-surface-2: #FBF7EE; --color-text: #3C3125; --color-text-muted: #7B6750; --color-border: #DCCCB2; --color-field-bg: #FAF5EA; --color-field-border: #E0D1B9; --color-field-text: #3B3024; --color-field-placeholder: #8A745B; --color-field-focus: rgba(160,126,79,.42); --color-sidebar-bg: #8B6A43; --color-sidebar-text: #FFFFFF; --color-topbar-bg: rgba(252,248,238,.9); } /* dawn theme */ body[data-site-theme="dawn"] { --color-bg: #F5F7FF; --color-bg-2: #ECEFFD; --color-surface: #EEF2FF; --color-surface-2: #FAFBFF; --color-text: #2A3450; --color-text-muted: #647391; --color-border: #CFD9EF; --color-field-bg: #F7F9FF; --color-field-border: #D3DDF1; --color-field-text: #29344F; --color-field-placeholder: #7C8AA7; --color-field-focus: rgba(92,123,186,.4); --color-sidebar-bg: #5A6FB3; --color-sidebar-text: #FFFFFF; --color-topbar-bg: rgba(249,251,255,.92); } /* mintlight theme */ body[data-site-theme="mintlight"] { --color-bg: #EFF9F5; --color-bg-2: #E6F2EC; --color-surface: #E9F4EE; --color-surface-2: #F7FCFA; --color-text: #2C3E36; --color-text-muted: #617D70; --color-border: #C9DECF; --color-field-bg: #F3FBF7; --color-field-border: #CCE2D3; --color-field-text: #2B3E35; --color-field-placeholder: #739183; --color-field-focus: rgba(84,143,114,.42); --color-sidebar-bg: #3D7A63; --color-sidebar-text: #FFFFFF; --color-topbar-bg: rgba(246,252,249,.9); } /* rosepaper theme */ body[data-site-theme="rosepaper"] { --color-bg: #FAF2F6; --color-bg-2: #F3E8EF; --color-surface: #F4E9F0; --color-surface-2: #FDF7FA; --color-text: #4A2F3F; --color-text-muted: #8A6780; --color-border: #E0C9D7; --color-field-bg: #FCF4F8; --color-field-border: #E4CDDB; --color-field-text: #4A2F3F; --color-field-placeholder: #9A748D; --color-field-focus: rgba(165,108,141,.42); --color-sidebar-bg: #8C4E72; --color-sidebar-text: #FFFFFF; --color-topbar-bg: rgba(254,247,251,.9); } /* mediumlight theme */ body[data-site-theme="mediumlight"] { --color-bg: #EAF0FA; --color-bg-2: #E0E8F5; --color-surface: #E5EDF9; --color-surface-2: #F6FAFF; --color-text: #25364C; --color-text-muted: #5F7392; --color-border: #C7D5E9; --color-field-bg: #F1F6FF; --color-field-border: #C8D6EA; --color-field-text: #25364C; --color-field-placeholder: #768AA8; --color-field-focus: rgba(86,126,194,.44); --color-sidebar-bg: #4D6698; --color-sidebar-text: #FFFFFF; --color-topbar-bg: rgba(244,248,255,.9); } /* ── Light Theme Component Tokens ──────────────────────────────────────────── */ body[data-site-theme="classic"], body[data-site-theme="frost"], body[data-site-theme="sand"], body[data-site-theme="dawn"], body[data-site-theme="mintlight"], body[data-site-theme="rosepaper"], body[data-site-theme="mediumlight"] { /* Card tokens */ --card-hover-border: var(--color-border); --card-hover-shadow: 0 4px 12px rgba(0,0,0,.08); /* Table tokens */ --table-header-bg: var(--color-surface); --table-stripe: rgba(0,0,0,.02); --table-border: var(--color-border); --table-row-hover: rgba(0,0,0,.03); /* Navigation tokens */ --nav-item-hover: rgba(0,0,0,.05); --nav-active-bg: rgba(46,117,182,.08); --nav-active-text: var(--color-primary); /* Shadow overrides for light */ --shadow-xs: 0 1px 2px rgba(0,0,0,.06); --shadow-sm: 0 2px 4px rgba(0,0,0,.06); --shadow-md: 0 4px 12px rgba(0,0,0,.08); --shadow-lg: 0 8px 24px rgba(0,0,0,.1); --shadow-xl: 0 16px 48px rgba(0,0,0,.12); /* Modal tokens */ --modal-bg: var(--color-surface-2); --modal-overlay: rgba(0,0,0,.3); } /* ── Dark mode explicit (default, but useful for JS toggle) ─────────────── */ body[data-mode="dark"] { /* Re-state dark defaults so toggling away from light restores them */ --color-primary: #2E75B6; --color-primary-dark: #1F497D; --color-accent: #F59E0B; --color-accent-2: #4EAFF0; --color-bg: #080B14; --color-bg-2: #0D1220; --color-surface: rgba(184,204,255,.07); --color-surface-2: rgba(15,20,38,.62); --color-text: #E6EBFF; --color-text-muted: #9FB0D8; --color-border: rgba(184,204,255,.22); --color-success: #27AE60; --color-warning: #F39C12; --color-danger: #E74C3C; --color-field-bg: rgba(184,204,255,.09); --color-field-border: rgba(184,204,255,.26); --color-field-text: #E6EEFF; --color-field-placeholder:#9FB1D8; --color-field-focus: rgba(153,196,255,.65); --color-sidebar-bg: rgba(8,11,20,.92); --color-sidebar-text: #C8D8FF; --color-topbar-bg: rgba(8,11,20,.85); /* Component overrides - re-state dark defaults */ --card-bg: rgba(184,204,255,.07); --card-border: rgba(184,204,255,.22); --table-header-bg: rgba(184,204,255,.04); --table-row-hover: rgba(184,204,255,.06); --table-stripe: rgba(184,204,255,.025); --modal-bg: #0D1220; } /* ── System mode: follow OS preference ─────────────────────────────────── */ @media (prefers-color-scheme: light) { body[data-mode="system"] { --color-primary: #2E75B6; --color-primary-dark: #1F497D; --color-accent: #D97706; --color-accent-2: #3B82F6; --color-bg: #EEF2F8; --color-bg-2: #E5EBF5; --color-surface: #F2F7FF; --color-surface-2: #FFFFFF; --color-text: #233448; --color-text-muted: #5D6F8B; --color-border: #C9D6E7; --color-field-bg: #F2F7FF; --color-field-border: #C9D6E7; --color-field-text: #233448; --color-field-placeholder:#7587A3; --color-sidebar-bg: #1F497D; --color-sidebar-text: #FFFFFF; --color-topbar-bg: rgba(255,255,255,.92); /* Component overrides for light mode */ --card-bg: #FFFFFF; --card-border: #D8E2F0; --card-hover-border: #B8C8DE; --table-header-bg: #F5F8FC; --table-row-hover: #F0F4FA; --table-stripe: #FAFBFE; --table-border: #E5ECF5; --nav-item-hover: rgba(46,117,182,.06); --nav-active-bg: rgba(46,117,182,.08); --nav-active-text: #1F497D; --modal-bg: #FFFFFF; --modal-border: #D8E2F0; --modal-overlay: rgba(0,0,0,.35); --shadow-xs: 0 1px 2px rgba(0,0,0,.06); --shadow-sm: 0 2px 4px rgba(0,0,0,.06); --shadow-md: 0 4px 12px rgba(0,0,0,.08); --shadow-lg: 0 8px 24px rgba(0,0,0,.1); --shadow-xl: 0 16px 48px rgba(0,0,0,.12); } } /* ========================================================================== LAYOUT SYSTEM body[data-layout="sidebar"] — default left-sidebar layout (unchanged) body[data-layout="topnav"] — horizontal nav bar, full-width content body[data-layout="dashboard"] — widget grid mode, sidebar still present body[data-layout="splitpane"] — left nav + persistent right detail panel ========================================================================== */ /* ── Sidebar layout (default — no override needed, core.css handles it) ─── */ body[data-layout="sidebar"] #sidebar, body:not([data-layout]) #sidebar { /* Already handled by core.css */ } /* ── Top-nav layout ──────────────────────────────────────────────────────── */ body[data-layout="topnav"] #sidebar { display: none !important; } body[data-layout="topnav"] #main { margin-left: 0 !important; } body[data-layout="topnav"] #topnav-bar { display: flex !important; } body[data-layout="topnav"] .topbar { padding-left: 20px; } /* Top nav bar component (hidden in non-topnav layouts) */ #topnav-bar { display: none; position: fixed; top: 0; left: 0; right: 0; height: var(--layout-topnav-h); z-index: 300; background: var(--color-topbar-bg); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: 1px solid var(--color-border); align-items: center; padding: 0 20px; gap: 4px; overflow-x: auto; scrollbar-width: none; } #topnav-bar::-webkit-scrollbar { display: none; } body[data-layout="topnav"] .topbar { top: var(--layout-topnav-h); } body[data-layout="topnav"] .section { padding-top: calc(var(--layout-topnav-h) + 8px); } body[data-layout="topnav"] #main { padding-top: var(--layout-topnav-h); } .topnav-item { display: flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--color-sidebar-text); cursor: pointer; white-space: nowrap; border: none; background: transparent; transition: background var(--theme-transition), color var(--theme-transition); text-decoration: none; } .topnav-item:hover { background: rgba(255,255,255,.10); } .topnav-item.is-active { background: rgba(255,255,255,.15); color: #fff; font-weight: 600; } body[data-mode="light"] .topnav-item, body[data-site-theme="classic"] .topnav-item { color: var(--color-primary-dark); } body[data-mode="light"] .topnav-item:hover, body[data-site-theme="classic"] .topnav-item:hover { background: rgba(46,117,182,.10); } /* ── Dashboard layout ───────────────────────────────────────────────────── */ /* The dashboard layout uses the same sidebar but transforms the home page into a full-screen widget grid. Other pages render normally. */ body[data-layout="dashboard"] #section-dashboard .content { max-width: none !important; padding: 0 !important; } body[data-layout="dashboard"] #section-dashboard .topbar { display: none; } /* ── Split-pane layout ──────────────────────────────────────────────────── */ body[data-layout="splitpane"] #main { display: grid; grid-template-columns: 1fr var(--layout-split-detail-w); grid-template-rows: auto 1fr; grid-template-areas: "topbar topbar" "content detail"; min-height: 100vh; } body[data-layout="splitpane"] .topbar { grid-area: topbar; } body[data-layout="splitpane"] .content { grid-area: content; overflow-y: auto; } body[data-layout="splitpane"] #split-detail-panel { display: flex !important; } #split-detail-panel { display: none; grid-area: detail; position: sticky; top: 0; height: 100vh; background: var(--color-surface-2); border-left: 1px solid var(--color-border); overflow-y: auto; flex-direction: column; } .split-detail-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--color-border); font-size: 13px; font-weight: 600; color: var(--color-text); flex-shrink: 0; } .split-detail-body { flex: 1; padding: 20px; overflow-y: auto; font-size: 13px; color: var(--color-text-muted); } .split-detail-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 10px; opacity: .45; } .split-detail-empty svg { width: 40px; height: 40px; opacity: .5; } /* ── Sidebar collapsed state ────────────────────────────────────────────── */ body[data-sidebar-collapsed="true"] #sidebar { width: 56px; overflow: visible; } body[data-sidebar-collapsed="true"] #sidebar .sidebar-brand, body[data-sidebar-collapsed="true"] #sidebar .nav-section-label, body[data-sidebar-collapsed="true"] #sidebar .nav-item span, body[data-sidebar-collapsed="true"] #sidebar .sidebar-footer-links { display: none !important; } body[data-sidebar-collapsed="true"] #sidebar .nav-item { justify-content: center; padding: 8px; } body[data-sidebar-collapsed="true"] #sidebar .nav-item svg, body[data-sidebar-collapsed="true"] #sidebar .nav-item .ni-icon { margin: 0; } body[data-sidebar-collapsed="true"] #main { margin-left: 56px !important; } /* ── Sidebar collapse toggle button ─────────────────────────────────────── */ .sidebar-collapse-btn { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 5px; background: transparent; border: none; color: var(--color-sidebar-text); opacity: 0.5; cursor: pointer; transition: opacity var(--theme-transition); flex-shrink: 0; z-index: 5; } .sidebar-collapse-btn:hover { opacity: 1; } body[data-sidebar-collapsed="true"] .sidebar-collapse-btn { position: static; margin: 8px auto; } /* ── Theme transition — smooth when switching ───────────────────────────── */ body, #sidebar, .topbar, .card, .btn, input, select, textarea { transition: background var(--theme-transition), border-color var(--theme-transition), color var(--theme-transition); } /* ── Layout picker card (used in settings) ───────────────────────────────── */ .layout-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0; } @media (max-width: 900px) { .layout-picker { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .layout-picker { grid-template-columns: 1fr 1fr; } } .layout-card { position: relative; border: 2px solid var(--color-border); border-radius: 12px; background: var(--color-surface); padding: 14px; cursor: pointer; transition: border-color var(--theme-transition), background var(--theme-transition), transform 0.1s ease, box-shadow 0.15s ease; text-align: center; user-select: none; } .layout-card:hover { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.18); } .layout-card.is-selected { border-color: var(--color-primary); background: rgba(46,117,182,.12); box-shadow: 0 0 0 3px rgba(46,117,182,.22); } .layout-card-preview { width: 100%; aspect-ratio: 16/10; border-radius: 7px; overflow: hidden; background: var(--color-bg-2); border: 1px solid var(--color-border); margin-bottom: 10px; position: relative; } /* Mini layout previews */ .lp-sidebar-demo { display: flex; height: 100%; } .lp-sidebar-demo .lp-nav { width: 28%; background: var(--color-primary-dark); opacity: .85; } .lp-sidebar-demo .lp-body { flex: 1; padding: 6px; } .lp-sidebar-demo .lp-topbar { height: 20%; background: var(--color-surface-2); margin-bottom: 4px; border-radius: 3px; } .lp-sidebar-demo .lp-content { height: 75%; display: flex; flex-direction: column; gap: 3px; } .lp-sidebar-demo .lp-row { flex: 1; background: var(--color-surface); border-radius: 3px; } .lp-topnav-demo { display: flex; flex-direction: column; height: 100%; } .lp-topnav-demo .lp-topnav { height: 22%; background: var(--color-primary-dark); opacity: .85; } .lp-topnav-demo .lp-body { flex: 1; padding: 6px; display: flex; flex-direction: column; gap: 3px; } .lp-topnav-demo .lp-row { flex: 1; background: var(--color-surface); border-radius: 3px; } .lp-dashboard-demo { display: flex; height: 100%; } .lp-dashboard-demo .lp-nav { width: 28%; background: var(--color-primary-dark); opacity: .85; } .lp-dashboard-demo .lp-body { flex: 1; padding: 5px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .lp-dashboard-demo .lp-tile { background: var(--color-surface); border-radius: 4px; } .lp-splitpane-demo { display: flex; height: 100%; } .lp-splitpane-demo .lp-nav { width: 24%; background: var(--color-primary-dark); opacity: .85; } .lp-splitpane-demo .lp-main { flex: 1; padding: 5px; display: flex; flex-direction: column; gap: 3px; } .lp-splitpane-demo .lp-row { flex: 1; background: var(--color-surface); border-radius: 3px; } .lp-splitpane-demo .lp-detail { width: 34%; background: var(--color-surface-2); border-left: 1px solid var(--color-border); } .layout-card-name { font-size: 12px; font-weight: 700; color: var(--color-text); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 2px; } .layout-card-desc { font-size: 11px; color: var(--color-text-muted); line-height: 1.4; } .layout-card-badge { position: absolute; top: 8px; right: 8px; background: var(--color-primary); color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 20px; text-transform: uppercase; letter-spacing: .5px; } /* ── Color swatch picker (used in settings) ──────────────────────────────── */ .color-swatch-group { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; } .color-swatch-item { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; } .color-swatch { width: 40px; height: 40px; border-radius: 50%; border: 3px solid transparent; transition: border-color 0.15s, transform 0.1s; position: relative; } .color-swatch:hover { transform: scale(1.12); } .color-swatch.is-selected { border-color: var(--color-text); box-shadow: 0 0 0 2px var(--color-primary); } .color-swatch input[type="color"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: none; } .color-swatch-label { font-size: 10px; color: var(--color-text-muted); text-align: center; line-height: 1.2; max-width: 52px; } /* ── Mode toggle switch ──────────────────────────────────────────────────── */ .mode-toggle { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; cursor: pointer; transition: background var(--theme-transition), border-color var(--theme-transition); width: fit-content; } .mode-toggle:hover { border-color: var(--color-primary); } .mode-toggle-track { width: 44px; height: 24px; border-radius: 12px; background: var(--color-border); position: relative; transition: background var(--theme-transition); flex-shrink: 0; } .mode-toggle.is-light .mode-toggle-track { background: var(--color-primary); } .mode-toggle-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.2s ease; box-shadow: 0 1px 4px rgba(0,0,0,.3); } .mode-toggle.is-light .mode-toggle-knob { transform: translateX(20px); } .mode-toggle-label { font-size: 13px; font-weight: 600; color: var(--color-text); } .mode-toggle-sublabel { font-size: 11px; color: var(--color-text-muted); } /* ── Topbar theme button ─────────────────────────────────────────────────── */ .topbar-theme-btn { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 7px; background: transparent; border: 1px solid var(--color-border); color: var(--app-text-muted); font-size: 12px; cursor: pointer; transition: background var(--theme-transition), border-color var(--theme-transition); } .topbar-theme-btn:hover { background: var(--color-surface); border-color: var(--color-primary); }