/** * Sky Solutions Group — tokens de color (única fuente de verdad) * * Capas: * 1. Primitivos (--ssg-*) → valores fijos, no cambian con el tema * 2. Semánticos → dark / light (data-theme) * 3. Chrome UI → nav, menú, overlays sobre tipografía * 4. On-media → siempre claro sobre vídeo film (climb) * * Regla: componentes usan semánticos (--ink, --chrome-fg…), nunca #fff/#000 a mano. * Excepción documentada: --on-media-* (hero climb; ver hero-text-always-white). */ :root{ /* ——— Primitivos marca ——— */ --ssg-orange:#FF6600; --ssg-orange-hot:#FF9900; --ssg-film:#06080A; --ssg-white:#ffffff; --ssg-black:#1a1b1d; --ssg-mist-dark:#0c0e11; --ssg-mist-light:#eceae8; --ssg-surface-dark:#12151a; --ssg-surface-dark-2:#181c22; --ssg-card-dark:#161a20; --ssg-chrome-dark:#0c0f14; --ssg-chrome-dark-mid:#080b10; --ssg-surface-light:#f7f7f7; --ssg-surface-light-2:#ffffff; --ssg-grey-soft:#f2f3f4; /* Alias legacy usados por secciones existentes */ --orange:var(--ssg-orange); --orange-hot:var(--ssg-orange-hot); --film:var(--ssg-film); /* On-media: texto/chrome sobre vídeo near-black (dark y light) */ --on-media-fg:var(--ssg-white); --on-media-fg-soft:rgba(255,255,255,.92); --on-media-line:rgba(255,255,255,.1); --on-media-logo-ring:rgba(255,255,255,.1); --on-media-logo-shadow:0 10px 28px rgba(0,0,0,.4); --on-media-focus:rgba(255,255,255,.6); --on-media-read-shadow: 0 0 1px rgba(0,0,0,.9), 0 1px 2px rgba(0,0,0,.85), 0 2px 8px rgba(0,0,0,.55); } /* ——— Dark (defecto CEO) ——— */ :root, [data-theme="dark"]{ --mist:var(--ssg-mist-dark); --charcoal:var(--ssg-grey-soft); --ink:var(--ssg-white); --ink-soft:rgba(255,255,255,.92); --surface:var(--ssg-surface-dark); --surface-2:var(--ssg-surface-dark-2); --border:rgba(255,233,218,.14); --muted:rgba(242,243,244,.68); --muted-2:rgba(242,243,244,.48); --card:var(--ssg-card-dark); --card-panel:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,136,64,.06)); --line:rgba(255,255,255,.1); --line-2:rgba(255,255,255,.07); --section-glow:rgba(255,255,255,.04); --hover-fill:rgba(255,255,255,.035); --read-shadow:var(--on-media-read-shadow); --mark-ink:rgba(242,243,244,.045); /* Blueprint / Architectural Grid tokens */ --grid-stroke:rgba(244,246,245,.075); --grid-stroke-strong:rgba(244,246,245,.15); --grid-cross:rgba(244,246,245,.28); --band-alt-bg:#0d1014; --band-alt-surface:#13171d; --band-alt-ink:var(--ssg-white); --band-alt-muted:rgba(242,243,244,.64); --band-alt-stroke:rgba(244,246,245,.085); /* Chrome: nav toggle + overlay menú (texto claro) */ --chrome-fg:var(--ssg-white); --chrome-fg-soft:rgba(255,255,255,.92); --chrome-fg-muted:rgba(255,255,255,.42); --chrome-fg-faint:rgba(255,255,255,.3); --chrome-fg-dim:rgba(255,255,255,.2); --chrome-fg-hover-peer:rgba(255,255,255,.4); --chrome-line:rgba(255,255,255,.12); --chrome-line-soft:rgba(255,255,255,.1); --chrome-line-faint:rgba(255,255,255,.07); --chrome-surface:var(--ssg-chrome-dark); --chrome-surface-mid:var(--ssg-chrome-dark-mid); --chrome-veil:var(--ssg-film); --chrome-glow:rgba(255,255,255,.14); --chrome-glow-2:rgba(255,255,255,.05); --chrome-sweep:rgba(255,255,255,.22); --chrome-grain-blend:overlay; --chrome-grain-opacity:1; --chrome-preview-border:rgba(255,255,255,.12); --chrome-preview-cap:rgba(255,255,255,.78); --chrome-logo-ring:rgba(255,255,255,.1); --chrome-logo-shadow:0 10px 28px rgba(0,0,0,.4); --chrome-focus:rgba(255,255,255,.6); --chrome-bg: radial-gradient(60% 48% at 88% -8%, rgba(255,255,255,.07), transparent 58%), radial-gradient(45% 35% at 8% 108%, rgba(255,255,255,.03), transparent 52%), linear-gradient(168deg, var(--ssg-chrome-dark) 0%, var(--ssg-film) 44%, var(--ssg-chrome-dark-mid) 100%); color-scheme:dark; } /* ——— Light (mono normal) ——— */ [data-theme="light"]{ /* --film se queda near-black: solo el vídeo del climb. El resto usa --mist. */ --mist:var(--ssg-mist-light); --charcoal:var(--ssg-black); --ink:var(--ssg-black); --ink-soft:rgba(26,27,29,.92); --surface:var(--ssg-surface-light); --surface-2:var(--ssg-surface-light-2); --border:rgba(26,27,29,.12); --muted:rgba(26,27,29,.72); --muted-2:rgba(26,27,29,.48); --card:var(--ssg-surface-light-2); --card-panel:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,248,243,.94)); --line:rgba(26,27,29,.12); --line-2:rgba(26,27,29,.08); --section-glow:rgba(255,102,0,.05); --hover-fill:rgba(26,27,29,.035); --read-shadow: 0 0 1px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08); --mark-ink:rgba(26,27,29,.05); /* Blueprint / Architectural Grid tokens */ --grid-stroke:rgba(26,27,29,.09); --grid-stroke-strong:rgba(26,27,29,.18); --grid-cross:rgba(26,27,29,.32); --band-alt-bg:#e5e3e0; --band-alt-surface:#f9f8f6; --band-alt-ink:var(--ssg-black); --band-alt-muted:rgba(26,27,29,.68); --band-alt-stroke:rgba(26,27,29,.1); /* Chrome: nav + menú (texto oscuro sobre superficie clara) */ --chrome-fg:var(--ssg-black); --chrome-fg-soft:rgba(26,27,29,.92); --chrome-fg-muted:rgba(26,27,29,.48); --chrome-fg-faint:rgba(26,27,29,.38); --chrome-fg-dim:rgba(26,27,29,.22); --chrome-fg-hover-peer:rgba(26,27,29,.4); --chrome-line:rgba(26,27,29,.14); --chrome-line-soft:rgba(26,27,29,.12); --chrome-line-faint:rgba(26,27,29,.08); --chrome-surface:var(--ssg-mist-light); --chrome-surface-mid:#e4e2e0; --chrome-veil:#e8e6e4; --chrome-glow:rgba(255,102,0,.2); --chrome-glow-2:rgba(26,27,29,.08); --chrome-sweep:rgba(255,102,0,.28); --chrome-grain-blend:soft-light; --chrome-grain-opacity:.55; --chrome-preview-border:rgba(26,27,29,.14); --chrome-preview-cap:rgba(26,27,29,.78); --chrome-logo-ring:rgba(0,0,0,.08); --chrome-logo-shadow:0 8px 22px rgba(0,0,0,.18); --chrome-focus:rgba(26,27,29,.55); --chrome-bg: radial-gradient(60% 48% at 88% -8%, rgba(255,102,0,.1), transparent 58%), radial-gradient(45% 35% at 8% 108%, rgba(26,27,29,.05), transparent 52%), linear-gradient(168deg, #f4f2f0 0%, var(--ssg-mist-light) 44%, #eae8e6 100%); color-scheme:light; }