/* ========================================================================== SecurApp Design System — Design Tokens (variables.css) Skiper UI-inspired / Apple + Linear aesthetics ========================================================================== */ /* -------------------------------------------------------------------------- 1. ROOT — Shared tokens (theme-agnostic) -------------------------------------------------------------------------- */ /* scroll-behavior handled via JS to avoid scroll-restoration bugs */ :root { /* --- Marca activa (admin multimarca) ---------------------------------- Default = Dynbel (sitio público, sin data-brand). Cada [data-brand] sobreescribe estos 3 tokens; todo lo interactivo deriva de ellos. */ --brand-primary: var(--color-primary); --brand-secondary: var(--color-secondary); --brand-accent: var(--color-accent); /* --- Brand palette ---------------------------------------------------- */ --color-primary: #1E7BFF; --color-primary-hover: #22D3EE; --color-primary-light: #1E7BFF1a; /* 10% opacity */ --color-primary-muted: #1E7BFF33; /* 20% opacity */ --color-secondary: #22D3EE; --color-secondary-hover: #06B6D4; --color-secondary-light: #22D3EE1a; --color-secondary-muted: #22D3EE33; --color-accent: #22D3EE; --color-accent-hover: #06B6D4; --color-accent-light: #22D3EE1a; --color-accent-muted: #22D3EE33; /* --- Semantic colours ------------------------------------------------- */ --color-success: #22c55e; --color-warning: #f59e0b; --color-error: #ef4444; --color-info: #3b82f6; /* WhatsApp */ --color-whatsapp: #25D366; --color-whatsapp-hover: #1fb855; /* Gradient end — deeper vibrant blue */ --color-gradient-end: #22D3EE; /* --- Typography — font families -------------------------------------- */ --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace; /* --- Typography — weights -------------------------------------------- */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-extrabold: 800; --fw-black: 900; /* --- Typography — scale (fluid with clamp) --------------------------- */ --text-2xs: clamp(0.5625rem, 0.525rem + 0.15vw, 0.625rem); /* ~9-10px (device chrome, kbd) */ --text-xs: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem); /* ~11-12px */ --text-sm: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem); /* ~12-14px */ --text-base: clamp(0.875rem, 0.825rem + 0.25vw, 1rem); /* ~14-16px */ --text-md: clamp(1rem, 0.925rem + 0.35vw, 1.125rem); /* ~16-18px */ --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem); /* ~18-20px */ --text-xl: clamp(1.25rem, 1.1rem + 0.65vw, 1.5rem); /* ~20-24px */ --text-2xl: clamp(1.5rem, 1.25rem + 1vw, 2rem); /* ~24-32px */ --text-2-5xl: clamp(1.675rem, 1.375rem + 1.25vw, 2.25rem); /* ~27-36px */ --text-3xl: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem); /* ~30-40px */ --text-4xl: clamp(2.25rem, 1.75rem + 2vw, 3rem); /* ~36-48px */ --text-5xl: clamp(2.75rem, 2rem + 3vw, 4rem); /* ~44-64px */ --text-hero: clamp(2rem, 1.25rem + 4vw, 5rem); /* ~35-80px */ /* --- Line heights ----------------------------------------------------- */ --leading-none: 1; --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.65; --leading-loose: 1.8; /* --- Letter spacing --------------------------------------------------- */ --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; /* --- Spacing — 4px base with multipliers ----------------------------- */ --space-0: 0; --space-px: 1px; --space-0-5: 2px; --space-1: 4px; /* 1x base */ --space-1-5: 6px; --space-2: 8px; /* 2x */ --space-3: 12px; /* 3x */ --space-4: 16px; /* 4x */ --space-5: 20px; --space-6: 24px; /* 6x */ --space-8: 32px; /* 8x */ --space-10: 40px; --space-12: 48px; /* 12x */ --space-16: 64px; /* 16x */ --space-20: 80px; --space-24: 96px; --space-32: 128px; /* --- Border radii ----------------------------------------------------- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 9999px; /* --- Z-index scale ---------------------------------------------------- */ --z-behind: -1; --z-base: 0; --z-dropdown: 200; --z-sticky: 20; --z-overlay: 30; --z-modal: 40; --z-popover: 50; --z-toast: 60; --z-tooltip: 70; --z-max: 9999; /* --- Easing functions ------------------------------------------------- */ --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-in: cubic-bezier(0.55, 0, 1, 0.45); --ease-out: cubic-bezier(0, 0.55, 0.45, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-bounce: cubic-bezier(0.34, 1.8, 0.64, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --ease-slide: cubic-bezier(0.32, 0.72, 0, 1); --ease-tooltip: cubic-bezier(0.16, 1, 0.3, 1); /* --- Transition durations --------------------------------------------- */ --duration-instant: 75ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; --duration-slowest: 800ms; /* --- Transition shorthands -------------------------------------------- */ --transition-fast: all var(--duration-fast) var(--ease-default); --transition-normal: all var(--duration-normal) var(--ease-default); --transition-slow: all var(--duration-slow) var(--ease-smooth); --transition-spring: all var(--duration-normal) var(--ease-spring); /* --- Container widths ------------------------------------------------- */ --container-max: 1280px; --container-wide: 1440px; --container-narrow: 720px; /* --- Mobile pill-nav dock height (dock ~48px + bottom offset 12px) ---- */ --dock-height: 60px; /* --- Liquid Glass — legacy (used by cards, hero device, other surfaces) -- */ --glass-blur: 40px; --glass-saturate: 200%; --glass-blur-soft: 12px; /* Cards, overlays — frosted sutil */ --glass-backdrop: blur(var(--glass-blur)) saturate(var(--glass-saturate)); --glass-backdrop-soft: blur(var(--glass-blur-soft)) saturate(var(--glass-saturate)); /* --- Liquid Glass — iOS 26 reflex system (fooontic technique) ----------- */ /* Tint + light/dark colors for color-mix() multi-layer shadows */ --glass-color: #bbbbbc; --glass-light: #fff; --glass-dark: #000; --glass-reflex-light: 1; /* Multiplier: light inset highlights */ --glass-reflex-dark: 1; /* Multiplier: dark inset/outer shadows */ /* Computed backgrounds */ --glass-bg: color-mix(in srgb, var(--glass-color) 12%, transparent); --glass-bg-hover: color-mix(in srgb, var(--glass-color) 22%, transparent); --glass-bg-strong: color-mix(in srgb, var(--glass-color) 36%, transparent); /* 10-layer box-shadow: 4 light insets + 4 dark insets + 2 outer */ /* Adapts automatically via --glass-reflex-light / --glass-reflex-dark */ --glass-shadow: inset 0 0 0 1px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 10%), transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 90%), transparent), inset -2px -2px 0px -2px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 80%), transparent), inset -3px -8px 1px -6px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 60%), transparent), inset -0.3px -1px 4px 0px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 12%), transparent), inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 0px 3px 4px -2px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 2px -6.5px 1px -4px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 1px 5px 0px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 6px 16px 0px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 8%), transparent); /* Lightweight glass shadow — 5 layers for listed/multiplied elements */ /* Keeps the most impactful layers from the 10-layer --glass-shadow: */ /* 1. Edge highlight (glass border definition) */ /* 2. Top-left specular gloss (iOS liquid glass cue) */ /* 3. Inner depth shadow (concavity) */ /* 4. Small outer lift (surface separation) */ /* 5. Large ambient shadow (environmental depth) */ --glass-shadow-light: inset 0 0 0 1px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 10%), transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 80%), transparent), inset -0.3px -1px 4px 0px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 12%), transparent), 0px 1px 5px 0px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 6px 16px 0px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 8%), transparent); /* --- Text Glow — neon brand halo for headings on dark surfaces -------- */ --text-glow: 0 0 10px rgba(30, 123, 255, 0.9), 0 0 30px rgba(30, 123, 255, 0.7), 0 0 60px rgba(34, 211, 238, 0.5), 0 0 100px rgba(34, 211, 238, 0.3); /* filter: variant — for gradient text where text-shadow doesn't apply */ --text-glow-filter: drop-shadow(0 0 0.5px var(--color-primary)) drop-shadow(0 0 0.5px var(--color-primary)) drop-shadow(0 0 18px color-mix(in srgb, var(--color-primary) 65%, transparent)) drop-shadow(0 0 44px color-mix(in srgb, var(--color-secondary) 30%, transparent)); /* --- Liquid Glass — interactive button tokens (swiper, dashboard, etc.) Light: primary blue for contrast on light surfaces (cyan washes out). */ --glass-btn-bg: color-mix(in srgb, var(--brand-primary) 10%, transparent); --glass-btn-border: color-mix(in srgb, var(--brand-primary) 22%, transparent); --glass-btn-color: var(--brand-primary); /* --- Device Mockups — MacBook (aluminium bezel) ----------------------- */ --device-bezel: #c8c8cc; --device-bezel-border: #d4d4d8; --device-bezel-accent: #b8b8bc; --device-bezel-cam: #a8a8ac; --device-base-top: #d4d4d8; --device-base-bottom: #c0c0c4; --device-base-indent: #b8b8bc; /* --- Device Mockups — Browser (traffic light dots) -------------------- */ --device-dot-close: #ff5f57; --device-dot-minimize: #febc2e; --device-dot-maximize: #28c840; /* --- Device Mockups — iPhone ------------------------------------------ */ --device-phone-frame: #1a1a1a; --device-phone-border: #2a2a2a; --device-phone-island: #1a1a1a; /* Dynamic Island */ --device-phone-button: #d4d4d8; /* Side buttons, power, home indicator */ --device-phone-frame-lt: #e8e8ec; /* Light mode frame override */ --device-phone-border-lt:#d4d4d8; /* Light mode border override */ /* --- Ecosistema Glymdo (marca aliada — mismos valores en ambos temas) -- */ --glymdo-accent: #FF6B2B; --glymdo-accent-2: #FFB800; --glymdo-panel-bg: #060610; /* mismo fondo del tema oscuro */ --glymdo-panel-border: rgba(255, 255, 255, 0.08); --glymdo-panel-text: #fafafa; --glymdo-panel-muted: rgba(250, 250, 250, 0.64); --glymdo-gradient-text: linear-gradient(135deg, #FF6B2B, #FF8A3D); --glymdo-gradient-fill: linear-gradient(155deg, #FF6B2B 0%, #FF8A3D 45%, #FFB800 100%); --glymdo-tint: color-mix(in srgb, #FF6B2B 12%, transparent); --glymdo-tint-border: color-mix(in srgb, #FF6B2B 28%, transparent); /* --- Breakpoints (for reference — used in media queries) -------------- */ /* --bp-mobile: 639px (max-width) */ /* --bp-tablet: 640px (min-width) */ /* --bp-desktop: 1024px (min-width) */ /* --bp-wide: 1440px (min-width) */ /* --- Sileo toast (gooey SVG notifications) --------------------------- */ --sileo-duration: 600ms; --sileo-toast-width: 360px; --sileo-toast-height: 40px; --sileo-toast-roundness: 16px; --sileo-toast-blur: 8px; /* roundness * 0.5 */ --sileo-toast-fill: #1a1a1a; --sileo-toast-fg: rgba(255, 255, 255, 0.82); /* description — readable at small size */ --sileo-toast-fg-strong: rgba(255, 255, 255, 0.95); /* reserved for emphasis */ /* Apple-style spring easing (matches Motion's bounce:0.25 / duration:0.6) */ --sileo-spring-easing: linear( 0, 0.002 0.6%, 0.007 1.2%, 0.015 1.8%, 0.026 2.4%, 0.041 3.1%, 0.06 3.8%, 0.108 5.3%, 0.157 6.6%, 0.214 8%, 0.467 13.7%, 0.577 16.3%, 0.631 17.7%, 0.682 19.1%, 0.73 20.5%, 0.771 21.8%, 0.808 23.1%, 0.844 24.5%, 0.874 25.8%, 0.903 27.2%, 0.928 28.6%, 0.952 30.1%, 0.972 31.6%, 0.988 33.1%, 1.01 35.7%, 1.025 38.5%, 1.034 41.6%, 1.038 45%, 1.035 50.1%, 1.012 64.2%, 1.003 73%, 0.999 83.7%, 1 ); /* State tones — OKLCH from Sileo upstream */ --sileo-state-success: oklch(0.723 0.219 142.136); --sileo-state-loading: oklch(0.556 0 0); --sileo-state-error: oklch(0.637 0.237 25.331); --sileo-state-warning: oklch(0.795 0.184 86.047); --sileo-state-info: oklch(0.685 0.169 237.323); --sileo-state-action: var(--color-primary); /* marca Dynbel AI */ } /* -------------------------------------------------------------------------- 2. LIGHT MODE (default) -------------------------------------------------------------------------- */ :root, [data-theme="light"] { /* --- Surface / Background — all white, fluid ------------------------- */ --bg-primary: #ffffff; --bg-secondary: #ffffff; --bg-tertiary: #ffffff; --bg-elevated: #ffffff; --bg-inset: #f8f8fa; /* --- Text ------------------------------------------------------------- */ /* Contrast ratios on #ffffff bg (WCAG AA = 4.5:1 normal / 3:1 large): primary #09090b → 21:1 ✓ secondary #3f3f46 → 10.9:1 ✓ tertiary #52525b → 7.4:1 ✓ (was #71717a = 4.7:1 borderline) muted #71717a → 4.7:1 ✓ (was #a1a1aa = 3.4:1 ✗ failed AA) */ --text-primary: #09090b; --text-secondary: #3f3f46; --text-tertiary: #52525b; --text-muted: #71717a; --text-inverted: #fafafa; --text-on-primary: #ffffff; /* --- Borders ---------------------------------------------------------- */ --border-default: #e8e8ec; --border-subtle: #f0f0f2; --border-strong: #d4d4d8; --border-focus: var(--color-primary); /* --- Gradients -------------------------------------------------------- */ --gradient-primary: linear-gradient(135deg, #1E7BFF 0%, #22D3EE 100%); --gradient-subtle: linear-gradient(180deg, #ffffff 0%, #ffffff 100%); --gradient-card: linear-gradient(135deg, rgba(30, 123, 255,0.04) 0%, rgba(34, 211, 238,0.04) 100%); --gradient-text-from: #1E7BFF; --gradient-text-to: #22D3EE; --gradient-text: linear-gradient(135deg, var(--gradient-text-from), var(--gradient-text-to)); /* Brand fill — two gradients on the blue scale: strong (solid) + soft (tinted wash) */ --gradient-fill: linear-gradient(155deg, #0D52CC 0%, #1E7BFF 55%, #3D93FF 100%); --gradient-fill-soft: linear-gradient(155deg, rgba(30, 123, 255, 0.20) 0%, rgba(61, 147, 255, 0.08) 100%); --gradient-border: linear-gradient(135deg, rgba(30, 123, 255,0.3), rgba(34, 211, 238,0.15)); --gradient-active-from: #0D52CC; --gradient-active-mid: #1E7BFF; --gradient-active-to: #3D93FF; /* --- Shadows ---------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.03); --shadow-glow: 0 0 20px rgba(30, 123, 255, 0.2), 0 0 60px rgba(30, 123, 255, 0.1); /* --- Overlay / Backdrop ----------------------------------------------- */ --overlay: rgba(9, 9, 11, 0.5); --backdrop-blur: blur(12px); /* --- Card-specific ---------------------------------------------------- */ --card-bg: rgba(255, 255, 255, 0.8); --card-border: rgba(228, 228, 231, 0.8); --card-hover-border: rgba(30, 123, 255, 0.3); /* --- Nav (Liquid Glass) ----------------------------------------------- */ --nav-bg: rgba(255, 255, 255, 0.55); --nav-border: rgba(228, 228, 231, 0.6); /* --- Selection -------------------------------------------------------- */ --selection-bg: rgba(30, 123, 255, 0.15); --selection-text: #09090b; /* --- Scrollbar -------------------------------------------------------- */ --scrollbar-track: #ffffff; --scrollbar-thumb: #d4d4d8; --scrollbar-hover: #a1a1aa; } /* -------------------------------------------------------------------------- 3. DARK MODE Applied to [data-theme="dark"] always, and [data-theme="auto"] when the OS prefers dark. Single source — no duplication. -------------------------------------------------------------------------- */ [data-theme="dark"] { /* --- Liquid Glass — reflex multipliers (dark) -------------------------- */ --glass-reflex-light: 0.3; --glass-reflex-dark: 2; /* --- Surface / Background — deep blue-tinted (Vexel atmosphere) ------ */ --bg-primary: #060610; --bg-secondary: #0c0c18; --bg-tertiary: #141420; --bg-elevated: #1a1a28; --bg-inset: #050510; /* --- Text ------------------------------------------------------------- */ --text-primary: #fafafa; --text-secondary: #d4d4d8; --text-tertiary: #a1a1aa; --text-muted: #71717a; --text-inverted: #09090b; --text-on-primary: #ffffff; /* --- Borders — blue-tinted ------------------------------------------- */ --border-default: #1e1e30; --border-subtle: #161624; --border-strong: #2e2e42; --border-focus: var(--color-primary); /* --- Gradients --------------------------------------------------------- */ --gradient-primary: linear-gradient(135deg, #1E7BFF 0%, #22D3EE 100%); --gradient-subtle: linear-gradient(180deg, #060610 0%, #141420 100%); --gradient-card: linear-gradient(135deg, rgba(30, 123, 255,0.06) 0%, rgba(34, 211, 238,0.06) 100%); --gradient-text-from: #1E7BFF; --gradient-text-to: #22D3EE; --gradient-text: linear-gradient(135deg, var(--gradient-text-from), var(--gradient-text-to)); /* Brand fill — same two gradients as light; soft leans into cyan accent on dark */ --gradient-fill: linear-gradient(155deg, #0D52CC 0%, #1E7BFF 55%, #3D93FF 100%); --gradient-fill-soft: linear-gradient(155deg, rgba(30, 123, 255, 0.12) 0%, rgba(34, 211, 238, 0.07) 100%); --gradient-border: linear-gradient(135deg, rgba(30, 123, 255,0.4), rgba(34, 211, 238,0.2)); --gradient-active-from: #4D97FF; --gradient-active-mid: #22D3EE; --gradient-active-to: #22D3EE; /* --- Liquid Glass — interactive button tokens (dark) ------------------- */ --glass-btn-bg: color-mix(in srgb, var(--brand-accent) 8%, transparent); --glass-btn-border: color-mix(in srgb, var(--brand-accent) 20%, transparent); --glass-btn-color: var(--brand-accent); /* --- Shadows ---------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.3); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.3); --shadow-glow: 0 0 20px rgba(30, 123, 255, 0.25), 0 0 60px rgba(30, 123, 255, 0.12); --text-glow-filter: drop-shadow(0 0 0.5px var(--color-secondary)) drop-shadow(0 0 0.5px var(--color-secondary)) drop-shadow(0 0 18px color-mix(in srgb, var(--color-secondary) 65%, transparent)) drop-shadow(0 0 44px color-mix(in srgb, var(--color-accent) 30%, transparent)); /* --- Overlay / Backdrop ----------------------------------------------- */ --overlay: rgba(0, 0, 0, 0.7); --backdrop-blur: blur(16px); /* --- Card-specific ---------------------------------------------------- */ --card-bg: rgba(12, 12, 24, 0.8); --card-border: rgba(30, 30, 48, 0.6); --card-hover-border: rgba(34, 211, 238, 0.35); /* --- Nav (Liquid Glass) ----------------------------------------------- */ --nav-bg: rgba(6, 6, 16, 0.45); --nav-border: rgba(30, 30, 48, 0.5); /* --- Selection -------------------------------------------------------- */ --selection-bg: rgba(30, 123, 255, 0.2); --selection-text: #fafafa; /* --- Scrollbar -------------------------------------------------------- */ --scrollbar-track: #141420; --scrollbar-thumb: #2e2e42; --scrollbar-hover: #3a3a50; /* --- Device Mockups — MacBook (dark bezel) ----------------------------- */ --device-bezel: #0a0a0a; --device-bezel-border: #1a1a1a; --device-bezel-accent: #888888; --device-bezel-cam: #1f1f1f; --device-base-top: #c0c0c0; --device-base-bottom: #a8a8a8; --device-base-indent: #999999; /* --- Device Mockups — iPhone (dark = same frame, lighter buttons) ----- */ --device-phone-frame: #1a1a1a; --device-phone-border: #2a2a2a; --device-phone-island: #1a1a1a; --device-phone-button: #3a3a3a; --device-phone-frame-lt: #1a1a1a; /* Not used in dark, stays dark */ --device-phone-border-lt:#2a2a2a; /* Sileo toast — flip to light fill so it contrasts against the dark page */ --sileo-toast-fill: #f5f5f7; --sileo-toast-fg: rgba(26, 26, 30, 0.78); /* description — readable at small size */ --sileo-toast-fg-strong: rgba(26, 26, 30, 0.9); /* reserved for emphasis */ } /* -------------------------------------------------------------------------- 4. AUTO THEME — Respects OS preference Reuses the same tokens as [data-theme="dark"] via combined selector. The dark mode block above (section 3) already defines all values. We only need to apply them when OS prefers dark + auto is selected. -------------------------------------------------------------------------- */ /* The JS theme system handles this: when theme is "auto", it reads prefers-color-scheme and applies either "light" or "dark" to data-theme. This means the CSS only needs [data-theme="dark"] and [data-theme="light"] selectors — no duplication needed. If JS is disabled, auto falls back to light (section 2 default). */ /* -------------------------------------------------------------------------- 6. SECTION OVERRIDES — Forced themes per-section -------------------------------------------------------------------------- */ /* Force dark surfaces regardless of global theme */ .section--dark { --bg-primary: #060610; --bg-secondary: #0c0c18; --bg-tertiary: #141420; --text-primary: #fafafa; --text-secondary: #d4d4d8; --text-tertiary: #a1a1aa; --text-muted: #71717a; --border-default: #1e1e30; --border-subtle: #161624; --card-bg: rgba(12, 12, 24, 0.8); --card-border: rgba(30, 30, 48, 0.6); --card-hover-border: rgba(34, 211, 238, 0.35); --shadow-glow: 0 0 20px rgba(30, 123, 255, 0.25), 0 0 60px rgba(30, 123, 255, 0.12); --gradient-primary: linear-gradient(135deg, #1E7BFF 0%, #22D3EE 100%); --gradient-text-from: #1E7BFF; --gradient-text-to: #22D3EE; --gradient-text: linear-gradient(135deg, var(--gradient-text-from), var(--gradient-text-to)); --gradient-fill: linear-gradient(155deg, #0D52CC 0%, #1E7BFF 55%, #3D93FF 100%); --gradient-fill-soft: linear-gradient(155deg, rgba(30, 123, 255, 0.12) 0%, rgba(34, 211, 238, 0.07) 100%); --gradient-active-from: #4D97FF; --gradient-active-mid: #22D3EE; --gradient-active-to: #22D3EE; color: var(--text-primary); background-color: var(--bg-primary); } /* Force light surfaces regardless of global theme */ .section--light { --bg-primary: #ffffff; --bg-secondary: #ffffff; --bg-tertiary: #ffffff; --text-primary: #09090b; --text-secondary: #3f3f46; --text-tertiary: #71717a; --text-muted: #a1a1aa; --border-default: #e8e8ec; --border-subtle: #f0f0f2; --card-bg: rgba(255, 255, 255, 0.8); --card-border: rgba(228, 228, 231, 0.8); --card-hover-border: rgba(30, 123, 255, 0.3); --shadow-glow: 0 0 20px rgba(30, 123, 255, 0.2), 0 0 60px rgba(30, 123, 255, 0.1); --gradient-primary: linear-gradient(135deg, #1E7BFF 0%, #22D3EE 100%); --gradient-text-from: #1E7BFF; --gradient-text-to: #22D3EE; --gradient-text: linear-gradient(135deg, var(--gradient-text-from), var(--gradient-text-to)); --gradient-fill: linear-gradient(155deg, #0D52CC 0%, #1E7BFF 55%, #3D93FF 100%); --gradient-fill-soft: linear-gradient(155deg, rgba(30, 123, 255, 0.20) 0%, rgba(61, 147, 255, 0.08) 100%); --gradient-active-from: #0D52CC; --gradient-active-mid: #1E7BFF; --gradient-active-to: #3D93FF; color: var(--text-primary); background-color: var(--bg-primary); } /* ────────────────────────────────────────────────────────────── Paletas por marca (admin unificado) — el atributo data-brand en tiñe toda la interfaz. SecurApp azul, PRL COL magenta. Compatible con tema: los gradientes oscuros se sobreescriben con [data-brand][data-theme="dark"]. Solo aplica donde hay data-brand (panel admin); el sitio público no lo usa. ────────────────────────────────────────────────────────────── */ [data-brand="securapp"] { --brand-primary: #1E7BFF; --brand-secondary: #22D3EE; --brand-accent: #22D3EE; } [data-brand="prl"] { --brand-primary: #CE32FF; --brand-secondary: #EB78FF; --brand-accent: #FF3E89; --gradient-fill: linear-gradient(155deg, #3a0a4d 0%, #7a1e8e 40%, #CE32FF 100%); --gradient-active-from: #3a0a4d; --gradient-active-mid: #7a1e8e; --gradient-active-to: #CE32FF; --gradient-text-from: #CE32FF; --gradient-text-to: #FF3E89; --gradient-text: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); } [data-brand="prl"][data-theme="dark"] { --gradient-fill: linear-gradient(155deg, #1a0626 0%, #4a1060 40%, #CE32FF 100%); --gradient-active-from: #1a0626; --gradient-active-mid: #4a1060; --gradient-active-to: #CE32FF; --gradient-text-from: #CE32FF; --gradient-text-to: #FF3E89; } /* Glymdo — naranja/ámbar. Gradientes derivados de los 3 tokens de marca. */ [data-brand="glymdo"] { --brand-primary: #FF6B2B; --brand-secondary: #FFB800; --brand-accent: #FF8A3D; --gradient-fill: linear-gradient(155deg, color-mix(in srgb, var(--brand-primary) 55%, black) 0%, var(--brand-primary) 50%, var(--brand-secondary) 100%); --gradient-active-from: color-mix(in srgb, var(--brand-primary) 55%, black); --gradient-active-mid: var(--brand-primary); --gradient-active-to: var(--brand-secondary); --gradient-text-from: var(--brand-primary); --gradient-text-to: var(--brand-secondary); --gradient-text: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); } /* GO Asesores — naranja/cyan. Mismo esquema derivado. */ [data-brand="goasesores"] { --brand-primary: #fd8700; --brand-secondary: #16c1fd; --brand-accent: #ffb340; --gradient-fill: linear-gradient(155deg, color-mix(in srgb, var(--brand-primary) 55%, black) 0%, var(--brand-primary) 50%, var(--brand-secondary) 100%); --gradient-active-from: color-mix(in srgb, var(--brand-primary) 55%, black); --gradient-active-mid: var(--brand-primary); --gradient-active-to: var(--brand-secondary); --gradient-text-from: var(--brand-primary); --gradient-text-to: var(--brand-secondary); --gradient-text: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); }