/* ========================================================================== PodUp Theme — DARK values MIRROR of light-theme.css: SAME variable names, DARK values. Edit a value here → changes DARK theme only. The block below (same key list/order as light-theme.css) is the edit surface. The LEGACY BRIDGE at the bottom is NOT a value knob — leave it as-is. ========================================================================== */ /* The html:has() half of this selector exists so resolves the dark palette too. The browser paints the PAGE scrollbar from the document element, which is not a descendant of and therefore could never see these tokens — it fell through to light-theme.css's :root and rendered a pale grey bar on every dark page. :has() re-evaluates live, so the theme toggle (js/global/theme.js rewrites data-theme on only) still switches it without a reload. Values are declared once, here; nothing is duplicated. */ body[data-theme="dark"], html:has(body[data-theme="dark"]) { /* ---- Surfaces ---- */ --color-bg: #0f0f0f; --color-surface: #1a1a1a; --color-surface-2: #222222; --color-border: #2e2e2e; --color-border-soft: #242424; --color-dim: #3a3a3a; /* ---- Text ---- */ --color-text: #FFFFFF; --color-text-secondary: #D1D1D1; --color-text-muted: #7a7672; /* ---- Primary (brand gold) ---- */ --color-primary: #B0842C; --color-primary-light: #E0C080; --color-primary-dark: #B0842C; --color-icon-gold: #C2A032; --color-icon-commanColor: #C2A032; --color-on-primary: #1a1305; --gradient-primary: linear-gradient(135deg, #09BBF0 0%, #0469E7 100%); --gradient-primary-comman: linear-gradient(90deg, #E2C147 0%, #C8A23C 49.52%, #F1D483 100%); /* ---- Accents ---- */ --color-accent-seafoam: #4CBAA6; --color-accent-skyblue-bright: #44A7CE; --color-accent-skyblue: #9FE4FF; --color-accent-orange: #C8642D; --color-accent-purple: #6366F1; --color-accent-purple-bg: rgba(99, 102, 241, .10); /* ---- Graph / category palette ---- */ --color-graph-teal: #4CBAA6; --color-graph-blue: #44A7CE; --color-graph-rust: #C8642D; --color-graph-gold: #E0C080; /* ---- Semantic (text) ---- */ --color-success: #4CBAA6; --color-warning: #b0842c; --color-error: #C8642D; --color-info: #8BDEFF; --color-on-success: #06231e; /* ---- Semantic surfaces (alerts / badges) ---- */ --color-success-bg: rgba(76, 186, 166, .15); --color-success-border: rgba(76, 186, 166, .3); --color-warning-bg: rgba(176, 132, 44, .08); --color-warning-border: rgba(176, 132, 44, .25); --color-error-bg: rgba(200, 100, 45, .08); --color-error-border: rgba(200, 100, 45, .25); --color-info-bg: rgba(139, 222, 255, .08); --color-info-border: rgba(139, 222, 255, .25); /* ---- Typography (theme-independent — keep equal in both files) ---- */ --font-primary: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-secondary: "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-size-xs: 11px; --font-size-sm: 12px; --font-size-md: 14px; --font-size-lg: 18px; --font-size-xl: 22px; --font-size-title:30px; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* ---- Radius (theme-independent) ---- */ --radius-none: 0px; --radius-2: 2px; --radius-small: 3px; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-10: 10px; --radius-12: 12px; --radius-14: 14px; --radius-16: 16px; --radius-20: 20px; --radius-24: 24px; --radius-30: 30px; --radius-lg: 50px; --radius-pill: 999px; --radius-card: var(--radius-12); /* used by quick-wizard.css */ /* ---- Shadows (deeper on dark) ---- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 4px 12px rgba(0, 0, 0, .5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, .6); /* ---- Interaction ---- */ --focus-ring: 0 0 0 2px rgba(176, 132, 44, .15); --selected-ring: 0 0 0 3px rgba(224, 192, 128, .2); --selected-bg: rgba(224, 192, 128, .06); /* ---- Buttons ---- */ --btn-radius: var(--radius-lg); --btn-padding: 9px 24px; --btn-font-weight: var(--font-weight-semibold); --btn-font-size: var(--font-size-md); --btn-letter-spacing: 0; --btn-primary-bg: linear-gradient(90deg, #E2C147 0%, #C8A23C 49.52%, #F1D483 100%); --btn-primary-bg-hover: linear-gradient(90deg, #E8C84F 0%, #D2AC42 49.52%, #F5DC93 100%); --btn-primary-color: #1F1F1F; --btn-primary-shadow: 0 2px 10px rgba(176, 132, 44, .30); --btn-primary-shadow-hover: 0 6px 20px rgba(224, 192, 128, .55); --btn-secondary-bg: transparent; --btn-secondary-color: #FFFFFF; /* guideline: white text, gold border */ --btn-secondary-border: 1.5px solid var(--color-primary); --btn-secondary-bg-hover: rgba(176, 132, 44, .12); --btn-secondary-shadow-hover: 0 0 18px rgba(224, 192, 128, .45); /* guideline: symmetric gold glow on hover */ --btn-accent-bg: var(--gradient-primary); --btn-accent-bg-hover: var(--gradient-primary); --btn-accent-color: #ffffff; --btn-disconnect-bg: var(--color-surface); --btn-disconnect-border: var(--color-border); --btn-disconnect-color: var(--color-error); --btn-actionItem-bg: rgba(176, 132, 44, 0.33); --btn-actionItem-bg-hover : rgba(176, 132, 44, 0.33); --btn-actionItem-color : #fff; --btn-actionItem-border : #E0C080; /* Button variants (colours). Mirror of light; these variants are overridden in dark by theme.css. */ --btn-orange-bg: linear-gradient(95deg, #08D259 3.96%, #00C09E 100%); --btn-orange-bg-hover: linear-gradient(180deg, #00C09E 3.96%, #08D259 100%); --btn-red-bg-hover: #d1372c; --btn-lightgray-bg: linear-gradient(180deg, #FDFDFD 0%, #F3F4F5 100%); --btn-lightgray-bg-hover: linear-gradient(180deg, #F3F4F5 0%, #FDFDFD 100%); --btn-lightgray-shadow: 0px 2px 2px rgba(81, 110, 134, 0.04); /* ---- Form inputs ---- */ --input-bg: var(--color-surface-2); --input-color: var(--color-text); --input-border: var(--input-border); --input-radius: var(--radius-md); --input-radius-area: 16px; --input-padding: 10px 18px; --input-placeholder: var(--color-text-muted); --input-focus-border: var(--color-primary); --input-focus-ring: 0px none; --input-bg-dark: #2B2B2B; --input-bg-border-dark: 1px solid #2B2B2B; --input-color-dark: #CECECE; --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c8c4bc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); /* Native