/* ======================= KAMV THEME: SUNRISE ========================== */ :root[data-theme="sunrise"], body[data-theme="sunrise"] { /* ================================================================ 1. BACKGROUNDS — escala neutra pura (invertida) body → app → sections → cards → elevated → overlay ================================================================ */ --n3d-clr-bg-bd: #ffffff; --n3d-clr-bg-p: #fafafa; --n3d-clr-bg-sec: #f6f6f6; --n3d-clr-bg-ter: #f2f2f2; --n3d-clr-bg-qua: #ededed; --n3d-clr-bg-qui: #e9e9e9; --n3d-clr-bg-sex: #e4e4e4; --n3d-clr-bg-sep: #e0e0e0; --n3d-clr-bg-oct: #dbdbdb; --n3d-clr-bg-non: #d6d6d6; --n3d-clr-bg-dec: #d1d1d1; --n3d-clr-bg-und: #cccccc; --n3d-clr-bg-duo: #c7c7c7; --n3d-clr-bg-inv: #050505; /* ================================================================ 2. SURFACES — para cards, panels, inputs, modals Separado de bg porque un card vive SOBRE un bg Tinteo mínimo de indigo (2-4%) para que no sea gris muerto ================================================================ */ --n3d-clr-surf-1: color-mix(in srgb, var(--indigokamv) 2%, #f5f5f5); --n3d-clr-surf-2: color-mix(in srgb, var(--indigokamv) 2%, #f0f0f0); --n3d-clr-surf-3: color-mix(in srgb, var(--indigokamv) 2.5%, #ececec); --n3d-clr-surf-4: color-mix(in srgb, var(--indigokamv) 3%, #e7e7e7); --n3d-clr-surf-5: color-mix(in srgb, var(--indigokamv) 3%, #e2e2e2); --n3d-clr-surf-6: color-mix(in srgb, var(--indigokamv) 3.5%, #dddddd); --n3d-clr-surf-7: color-mix(in srgb, var(--indigokamv) 4%, #d9d9d9); --n3d-clr-surf-8: color-mix(in srgb, var(--indigokamv) 4%, #d4d4d4); /* ================================================================ 3. TEXT — negro ascendente p-ter: contenido legible / qua-qui: secundario / sex: ghost ================================================================ */ --n3d-clr-txt-p: #0a0a0a; --n3d-clr-txt-sec: #1f1f1f; --n3d-clr-txt-ter: #3f3f3f; --n3d-clr-txt-qua: #656565; --n3d-clr-txt-qui: #919191; --n3d-clr-txt-sex: #b7b7b7; --n3d-clr-txt-inv: #fafafa; /* ================================================================ 4. BORDERS — neutros con micro-tinte frío Solo lo justo para que no se vean amarillentos ================================================================ */ --n3d-brdr-surf-p: color-mix(in srgb, var(--indigokamv) 4%, #e5e5e5); --n3d-brdr-surf-sec: color-mix(in srgb, var(--indigokamv) 4%, #dcdcdc); --n3d-brdr-surf-ter: color-mix(in srgb, var(--indigokamv) 5%, #d2d2d2); --n3d-brdr-surf-qua: color-mix(in srgb, var(--indigokamv) 5%, #c7c7c7); --n3d-brdr-surf-qui: color-mix(in srgb, var(--indigokamv) 6%, #bbbbbb); --n3d-brdr-surf-sex: color-mix(in srgb, var(--indigokamv) 6%, #adadad); /* ================================================================ 4b. BORDERS — neutros sin micro-tinte Blanco - Negro ================================================================ */ --n3d-brdr-clr-p: #e5e5e5; --n3d-brdr-clr-sec: #dcdcdc; --n3d-brdr-clr-ter: #d2d2d2; --n3d-brdr-clr-qua: #c7c7c7; --n3d-brdr-clr-qui: #bbbbbb; --n3d-brdr-clr-sex: #adadad; /* ================================================================ 5. INTERACTIVE — purple primario, lime secundario ================================================================ */ /* UI Colors */ --n3d-clr-ui-def: var(--purplekamv); --n3d-clr-ui-hov: var(--purplekamv-soft); --n3d-clr-ui-foc: var(--purplekamv-stark); --n3d-clr-ui-act: var(--limekamv-deep); --n3d-clr-ui-sel: var(--purplekamv-deep); --n3d-clr-ui-dis: var(--n3d-clr-txt-qui); /* UI Borders */ --n3d-brdr-clr-def: var(--purplekamv-stark); --n3d-brdr-clr-hov: var(--purplekamv); --n3d-brdr-clr-foc: var(--limekamv-deep); --n3d-brdr-clr-act: var(--limekamv-stark); --n3d-brdr-clr-sel: var(--purplekamv-deep); --n3d-brdr-clr-dis: var(--n3d-brdr-clr-ter); /* UI Backgrounds */ --n3d-clr-bg-def: color-mix(in srgb, var(--purplekamv) 6%, var(--n3d-clr-surf-2)); --n3d-clr-bg-hov: color-mix(in srgb, var(--purplekamv) 10%, var(--n3d-clr-surf-2)); --n3d-clr-bg-foc: color-mix(in srgb, var(--purplekamv) 12%, var(--n3d-clr-surf-2)); --n3d-clr-bg-act: color-mix(in srgb, var(--limekamv) 8%, var(--n3d-clr-surf-2)); --n3d-clr-bg-sel: color-mix(in srgb, var(--purplekamv) 8%, var(--n3d-clr-surf-2)); --n3d-clr-bg-dis: var(--n3d-clr-surf-1); /* UI Text */ --n3d-clr-txt-link: var(--purplekamv); --n3d-clr-txt-hov: var(--limekamv-deep); --n3d-clr-txt-act: var(--purplekamv-deep); --n3d-clr-txt-vis: var(--limekamv-stark); --n3d-clr-txt-sel: var(--purplekamv-stark); --n3d-clr-txt-dis: var(--n3d-clr-txt-qui); /* ================================================================ 6. SEMANTIC — indigo=info, jade=success ================================================================ */ /* Semantic Colors */ --n3d-clr-ui-succ: var(--jadekamv-stark); --n3d-clr-ui-inf: var(--indigokamv); --n3d-clr-ui-warn: color-mix(in srgb, var(--limekamv-stark) 60%, var(--orangekamv)); --n3d-clr-ui-err: color-mix(in srgb, var(--purplekamv) 25%, #cc2244); --n3d-clr-ui-highlight: var(--limekamv-deep); --n3d-clr-ui-neutral: var(--n3d-clr-txt-qua); /* Semantic Borders */ --n3d-brdr-clr-succ: var(--jadekamv-stark); --n3d-brdr-clr-inf: var(--indigokamv-stark); --n3d-brdr-clr-warn: color-mix(in srgb, var(--limekamv-stark) 60%, var(--orangekamv)); --n3d-brdr-clr-err: color-mix(in srgb, var(--purplekamv) 25%, #991133); --n3d-brdr-clr-highlight: var(--limekamv-stark); --n3d-brdr-clr-neutral: var(--n3d-brdr-clr-ter); /* Semantic Backgrounds */ --n3d-clr-bg-succ: color-mix(in srgb, var(--jadekamv) 8%, var(--n3d-clr-surf-2)); --n3d-clr-bg-inf: color-mix(in srgb, var(--indigokamv) 8%, var(--n3d-clr-surf-2)); --n3d-clr-bg-warn: color-mix(in srgb, var(--limekamv) 6%, var(--n3d-clr-surf-2)); --n3d-clr-bg-err: color-mix(in srgb, #ff3355 6%, var(--n3d-clr-surf-2)); --n3d-clr-bg-highlight: color-mix(in srgb, var(--limekamv) 8%, var(--n3d-clr-surf-2)); --n3d-clr-bg-neutral: var(--n3d-clr-surf-3); /* Semantic Text */ --n3d-clr-txt-succ: var(--jadekamv-stark); --n3d-clr-txt-inf: var(--indigokamv-stark); --n3d-clr-txt-warn: color-mix(in srgb, var(--limekamv-stark) 60%, var(--orangekamv)); --n3d-clr-txt-err: color-mix(in srgb, var(--purplekamv) 15%, #cc2244); --n3d-clr-txt-highlight: var(--limekamv-deep); --n3d-clr-txt-neutral: var(--n3d-clr-txt-ter); /* ================================================================ 7. GLASS & ALPHA — overlays, backdrops, frosted panels ================================================================ */ --n3d-glass-purple: color-mix(in srgb, var(--purplekamv) 6%, transparent); --n3d-glass-indigo: color-mix(in srgb, var(--indigokamv) 6%, transparent); --n3d-glass-jade: color-mix(in srgb, var(--jadekamv) 6%, transparent); --n3d-glass-lime: color-mix(in srgb, var(--limekamv) 6%, transparent); --n3d-overlay-light: rgba(0, 0, 0, 0.04); --n3d-overlay-medium: rgba(0, 0, 0, 0.08); --n3d-overlay-heavy: rgba(0, 0, 0, 0.14); --n3d-overlay-dark: rgba(255, 255, 255, 0.5); --n3d-overlay-darker: rgba(255, 255, 255, 0.75); --n3d-overlay-blackout: rgba(255, 255, 255, 0.9); /* ================================================================ 8. ACCENT TOKENS — para tags, badges, chips, highlights Cuando necesitas decir "esto es jade" o "esto es lime" ================================================================ */ --n3d-accent-purple: var(--purplekamv); --n3d-accent-indigo: var(--indigokamv); --n3d-accent-jade: var(--jadekamv); --n3d-accent-lime: var(--limekamv); --n3d-accent-purple-subtle: color-mix(in srgb, var(--purplekamv) 10%, var(--n3d-clr-surf-3)); --n3d-accent-indigo-subtle: color-mix(in srgb, var(--indigokamv) 10%, var(--n3d-clr-surf-3)); --n3d-accent-jade-subtle: color-mix(in srgb, var(--jadekamv) 8%, var(--n3d-clr-surf-3)); --n3d-accent-lime-subtle: color-mix(in srgb, var(--limekamv) 8%, var(--n3d-clr-surf-3)); /* === STATUS COLOR & GRADIENTS */ /* Gradient Ring */ --kg-status-on: repeating-linear-gradient(120deg, #6dbf00 2%, #00c89a 28%, #20c000 50%, #b5c000 77%, #6dbf00 98%); --kg-status-away: repeating-linear-gradient(120deg, #e02800 2%, #d9a000 28%, #d9a000 50%, #c04a40 77%, #e02800 98%); --kg-status-off: repeating-linear-gradient(120deg, #c5c0d8 2%, #a8b0ba 28%, #b0b3b8 50%, #baa8c5 77%, #c5c0d8 98%); /* Status Single Color*/ --n3d-clr-on: var(--limekamv-deep); --n3d-clr-away: #d9a800; --n3d-clr-off: var(--graystone); /* Reactions Colors */ --n3d-clr-like: #0055ff; --n3d-clr-heart: #fb0c8f; --n3d-clr-star: #ffc800; /* == BACKDROPS & GRADIENTS === */ --n3d-clr-bg-auth: #ededed; --n3d-clr-bg-auth-safe: var(--n3d-clr-bg-auth); /* top safe area + Safari tint */ --n3d-clr-bg-auth-safe-btm: var(--n3d-clr-bg-auth); /* bottom strip color */ /* == Alpha Blur */ --n3d-alphablur-bg: rgba(255, 255, 255, 0.855); --n3d-alphapills: rgba(255, 255, 255, 0.7); /* == GridLines w FadeStops */ --n3d-grdFdStps-bg: #fafafa; --n3d-grdFdStps-ln: #efefef; /* ================================================================ BG UI GRADIENT — neutral (3 stops) ================================================================ */ --n3d-grdnt-ui-p: linear-gradient(135deg, rgba(245, 245, 247, 1) 0%, rgba(242, 242, 244, 0.98) 50%, rgba(240, 240, 243, 1) 100%); /* ================================================================ GLASS SHADOWS — TYPE 1 ================================================================ */ /* Neutral */ --n3d-inner-glass-typ-1: 0 0 2px 1px rgba(255, 255, 255, 0.65) inset, 0 0 10px 4px rgba(255, 255, 255, 0.35) inset, 0px 4px 16px rgba(0, 0, 0, 0.08), 0px 8px 24px rgba(0, 0, 0, 0.06), 0px 16px 56px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(255, 255, 255, 0.50) inset, 0px 8px 24px rgba(255, 255, 255, 0.35) inset, 0px 16px 56px rgba(255, 255, 255, 0.20) inset; /* Purple */ --n3d-inner-glass-typ-1-ppk: 0 0 2px 1px rgba(255, 255, 255, 0.65) inset, 0 0 10px 4px rgba(255, 255, 255, 0.35) inset, 0px 4px 16px rgba(0, 0, 0, 0.08), 0px 8px 24px rgba(0, 0, 0, 0.06), 0px 16px 56px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(66, 0, 255, 0.06) inset, 0px 8px 24px rgba(66, 0, 255, 0.04) inset, 0px 16px 56px rgba(66, 0, 255, 0.03) inset; /* Lime */ --n3d-inner-glass-typ-1-lmk: 0 0 2px 1px rgba(255, 255, 255, 0.65) inset, 0 0 10px 4px rgba(255, 255, 255, 0.35) inset, 0px 4px 16px rgba(0, 0, 0, 0.08), 0px 8px 24px rgba(0, 0, 0, 0.06), 0px 16px 56px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(144, 255, 0, 0.06) inset, 0px 8px 24px rgba(144, 255, 0, 0.04) inset, 0px 16px 56px rgba(144, 255, 0, 0.03) inset; /* Indigo */ --n3d-inner-glass-typ-1-idk: 0 0 2px 1px rgba(255, 255, 255, 0.65) inset, 0 0 10px 4px rgba(255, 255, 255, 0.35) inset, 0px 4px 16px rgba(0, 0, 0, 0.08), 0px 8px 24px rgba(0, 0, 0, 0.06), 0px 16px 56px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(75, 51, 255, 0.06) inset, 0px 8px 24px rgba(75, 51, 255, 0.04) inset, 0px 16px 56px rgba(75, 51, 255, 0.03) inset; /* Jade */ --n3d-inner-glass-typ-1-jdk: 0 0 2px 1px rgba(255, 255, 255, 0.65) inset, 0 0 10px 4px rgba(255, 255, 255, 0.35) inset, 0px 4px 16px rgba(0, 0, 0, 0.08), 0px 8px 24px rgba(0, 0, 0, 0.06), 0px 16px 56px rgba(0, 0, 0, 0.04), 0px 4px 16px rgba(0, 189, 138, 0.06) inset, 0px 8px 24px rgba(0, 189, 138, 0.04) inset, 0px 16px 56px rgba(0, 189, 138, 0.03) inset; /* ================================================================ GLASS SHADOWS — TYPE 2 ================================================================ */ /* Neutral */ --n3d-inner-glass-typ-2: 0 8px 32px rgba(120, 120, 130, 0.10), inset 0 1px 0 rgb(255 255 255 / 70%), inset 0 1px 4px rgba(255, 255, 255, 0.50), inset 0 1px 4px rgba(255, 255, 255, 0.30), inset 0 -1px 0 rgb(160 155 175 / 10%), inset 2px 0 0 rgba(255, 255, 255, 0.40), inset -2px 0 0 rgba(0, 0, 0, 0.04), inset 0 0 20px rgba(255, 255, 255, 0.50), inset 0 0 2px 1px rgba(255, 255, 255, 0.25), inset 0 0 10px 4px rgba(255, 255, 255, 0.12), 0px 4px 16px rgba(0, 0, 0, 0.06), 0px 8px 24px rgba(120, 120, 130, 0.08), 0px 16px 56px rgba(0, 0, 0, 0.04), inset 0px 4px 16px rgba(255, 255, 255, 0.45), inset 0px 8px 24px rgba(255, 255, 255, 0.30), inset 0px 16px 56px rgba(255, 255, 255, 0.18); /* Purple */ --n3d-inner-glass-typ-2-ppk: 0 8px 32px rgb(64 43 130 / 10%), inset 0 1px 0 rgb(255 255 255 / 70%), inset 0 1px 4px rgba(255, 255, 255, 0.50), inset 0 1px 4px rgba(255, 255, 255, 0.30), inset 0 -1px 0 rgb(142 127 189 / 10%), inset 2px 0 0 rgba(255, 255, 255, 0.40), inset -2px 0 0 rgba(0, 0, 0, 0.04), inset 0 0 20px rgba(66, 0, 255, 0.08), inset 0 0 2px 1px rgba(255, 255, 255, 0.25), inset 0 0 10px 4px rgba(255, 255, 255, 0.12), 0px 4px 16px rgba(0, 0, 0, 0.06), 0px 8px 24px rgb(97 84 150 / 08%), 0px 16px 56px rgba(0, 0, 0, 0.04), inset 0px 4px 16px rgba(66, 0, 255, 0.06), inset 0px 8px 24px rgba(66, 0, 255, 0.04), inset 0px 16px 56px rgba(66, 0, 255, 0.03); /* Lime */ --n3d-inner-glass-typ-2-lmk: 0 8px 32px rgb(80 110 43 / 10%), inset 0 1px 0 rgb(255 255 255 / 70%), inset 0 1px 4px rgba(255, 255, 255, 0.50), inset 0 1px 4px rgba(255, 255, 255, 0.30), inset 0 -1px 0 rgb(155 185 127 / 10%), inset 2px 0 0 rgba(255, 255, 255, 0.40), inset -2px 0 0 rgba(0, 0, 0, 0.04), inset 0 0 20px rgba(144, 255, 0, 0.08), inset 0 0 2px 1px rgba(255, 255, 255, 0.25), inset 0 0 10px 4px rgba(255, 255, 255, 0.12), 0px 4px 16px rgba(0, 0, 0, 0.06), 0px 8px 24px rgb(100 130 70 / 08%), 0px 16px 56px rgba(0, 0, 0, 0.04), inset 0px 4px 16px rgba(144, 255, 0, 0.06), inset 0px 8px 24px rgba(144, 255, 0, 0.04), inset 0px 16px 56px rgba(144, 255, 0, 0.03); /* Indigo */ --n3d-inner-glass-typ-2-idk: 0 8px 32px rgb(55 40 130 / 10%), inset 0 1px 0 rgb(255 255 255 / 70%), inset 0 1px 4px rgba(255, 255, 255, 0.50), inset 0 1px 4px rgba(255, 255, 255, 0.30), inset 0 -1px 0 rgb(135 125 195 / 10%), inset 2px 0 0 rgba(255, 255, 255, 0.40), inset -2px 0 0 rgba(0, 0, 0, 0.04), inset 0 0 20px rgba(75, 51, 255, 0.08), inset 0 0 2px 1px rgba(255, 255, 255, 0.25), inset 0 0 10px 4px rgba(255, 255, 255, 0.12), 0px 4px 16px rgba(0, 0, 0, 0.06), 0px 8px 24px rgb(85 75 150 / 08%), 0px 16px 56px rgba(0, 0, 0, 0.04), inset 0px 4px 16px rgba(75, 51, 255, 0.06), inset 0px 8px 24px rgba(75, 51, 255, 0.04), inset 0px 16px 56px rgba(75, 51, 255, 0.03); /* Jade */ --n3d-inner-glass-typ-2-jdk: 0 8px 32px rgb(30 95 75 / 10%), inset 0 1px 0 rgb(255 255 255 / 70%), inset 0 1px 4px rgba(255, 255, 255, 0.50), inset 0 1px 4px rgba(255, 255, 255, 0.30), inset 0 -1px 0 rgb(120 185 165 / 10%), inset 2px 0 0 rgba(255, 255, 255, 0.40), inset -2px 0 0 rgba(0, 0, 0, 0.04), inset 0 0 20px rgba(0, 189, 138, 0.08), inset 0 0 2px 1px rgba(255, 255, 255, 0.25), inset 0 0 10px 4px rgba(255, 255, 255, 0.12), 0px 4px 16px rgba(0, 0, 0, 0.06), 0px 8px 24px rgb(60 120 100 / 08%), 0px 16px 56px rgba(0, 0, 0, 0.04), inset 0px 4px 16px rgba(0, 189, 138, 0.06), inset 0px 8px 24px rgba(0, 189, 138, 0.04), inset 0px 16px 56px rgba(0, 189, 138, 0.03); /* ================================================================ GLASS SHADOWS — TYPE 3 ================================================================ */ /* Neutral */ --n3d-inner-glass-typ-3: 0 1px 0 rgb(255 255 255 / 80%) inset, 0 -1px 0 rgb(0 0 0 / 05%) inset, 1px 0 0 rgb(255 255 255 / 45%) inset, -1px 0 0 rgb(255 255 255 / 45%) inset, 0 2px 8px rgb(160 155 175 / 06%) inset, 0 -2px 8px rgb(0 0 0 / 03%) inset, 0 0 24px rgb(255 255 255 / 40%) inset, 0 0 2px 1px rgb(255 255 255 / 30%) inset, 2px 4px 12px rgb(0 0 0 / 07%), -2px 2px 8px rgb(120 115 140 / 06%), 0 8px 32px rgb(0 0 0 / 05%), 0 2px 4px rgb(160 155 175 / 05%), 0 16px 48px rgb(30 28 40 / 04%); /* Purple */ --n3d-inner-glass-typ-3-ppk: 0 1px 0 rgb(255 255 255 / 80%) inset, 0 -1px 0 rgb(0 0 0 / 05%) inset, 1px 0 0 rgb(255 255 255 / 45%) inset, -1px 0 0 rgb(255 255 255 / 45%) inset, 0 2px 8px rgb(139 105 238 / 06%) inset, 0 -2px 8px rgb(0 0 0 / 03%) inset, 0 0 24px rgb(66 0 255 / 05%) inset, 0 0 2px 1px rgb(255 255 255 / 30%) inset, 2px 4px 12px rgb(0 0 0 / 07%), -2px 2px 8px rgb(88 60 180 / 06%), 0 8px 32px rgb(0 0 0 / 05%), 0 2px 4px rgb(139 105 238 / 05%), 0 16px 48px rgb(30 20 60 / 04%); /* Lime */ --n3d-inner-glass-typ-3-lmk: 0 1px 0 rgb(255 255 255 / 80%) inset, 0 -1px 0 rgb(0 0 0 / 05%) inset, 1px 0 0 rgb(255 255 255 / 45%) inset, -1px 0 0 rgb(255 255 255 / 45%) inset, 0 2px 8px rgb(160 230 80 / 06%) inset, 0 -2px 8px rgb(0 0 0 / 03%) inset, 0 0 24px rgb(144 255 0 / 05%) inset, 0 0 2px 1px rgb(255 255 255 / 30%) inset, 2px 4px 12px rgb(0 0 0 / 07%), -2px 2px 8px rgb(100 155 40 / 06%), 0 8px 32px rgb(0 0 0 / 05%), 0 2px 4px rgb(160 230 80 / 05%), 0 16px 48px rgb(35 50 15 / 04%); /* Indigo */ --n3d-inner-glass-typ-3-idk: 0 1px 0 rgb(255 255 255 / 80%) inset, 0 -1px 0 rgb(0 0 0 / 05%) inset, 1px 0 0 rgb(255 255 255 / 45%) inset, -1px 0 0 rgb(255 255 255 / 45%) inset, 0 2px 8px rgb(130 110 238 / 06%) inset, 0 -2px 8px rgb(0 0 0 / 03%) inset, 0 0 24px rgb(75 51 255 / 05%) inset, 0 0 2px 1px rgb(255 255 255 / 30%) inset, 2px 4px 12px rgb(0 0 0 / 07%), -2px 2px 8px rgb(80 55 180 / 06%), 0 8px 32px rgb(0 0 0 / 05%), 0 2px 4px rgb(130 110 238 / 05%), 0 16px 48px rgb(28 20 60 / 04%); /* Jade */ --n3d-inner-glass-typ-3-jdk: 0 1px 0 rgb(255 255 255 / 80%) inset, 0 -1px 0 rgb(0 0 0 / 05%) inset, 1px 0 0 rgb(255 255 255 / 45%) inset, -1px 0 0 rgb(255 255 255 / 45%) inset, 0 2px 8px rgb(70 200 165 / 06%) inset, 0 -2px 8px rgb(0 0 0 / 03%) inset, 0 0 24px rgb(0 189 138 / 05%) inset, 0 0 2px 1px rgb(255 255 255 / 30%) inset, 2px 4px 12px rgb(0 0 0 / 07%), -2px 2px 8px rgb(30 120 90 / 06%), 0 8px 32px rgb(0 0 0 / 05%), 0 2px 4px rgb(70 200 165 / 05%), 0 16px 48px rgb(10 40 30 / 04%); /* ================================================================ ELEVATION SHADOWS ================================================================ */ /* — Neutral — */ --n3d-shadow-xs: 2px 2px 4px rgba(100, 100, 110, 0.06), -1px -1px 2px rgb(120 115 130 / 4%); --n3d-shadow-sm: 4px 4px 8px rgba(100, 100, 110, 0.08), -1px -1px 2px rgb(120 115 130 / 5%); --n3d-shadow-md: 8px 8px 14px rgba(100, 100, 110, 0.09), -1px -1px 3px rgb(120 115 130 / 6%); --n3d-shadow-lg: 12px 12px 20px rgba(100, 100, 110, 0.10), -2px -2px 3px rgb(120 115 130 / 7%); --n3d-shadow-xl: 16px 16px 25px rgba(100, 100, 110, 0.11), -2px -2px 4px rgb(120 115 130 / 8%); --n3d-shadow-2xl: 20px 20px 30px rgba(100, 100, 110, 0.12), -2px -2px 4px rgb(120 115 130 / 9%); /* — Purple — */ --n3d-shadow-xs-ppk: 2px 2px 4px rgba(124, 98, 208, 0.06), -1px -1px 2px rgb(139 105 238 / 4%); --n3d-shadow-sm-ppk: 4px 4px 8px rgba(124, 98, 208, 0.08), -1px -1px 2px rgb(139 105 238 / 5%); --n3d-shadow-md-ppk: 8px 8px 14px rgba(124, 98, 208, 0.09), -1px -1px 3px rgb(139 105 238 / 6%); --n3d-shadow-lg-ppk: 12px 12px 20px rgba(124, 98, 208, 0.10), -2px -2px 3px rgb(139 105 238 / 7%); --n3d-shadow-xl-ppk: 16px 16px 25px rgba(124, 98, 208, 0.11), -2px -2px 4px rgb(139 105 238 / 8%); --n3d-shadow-2xl-ppk: 20px 20px 30px rgba(124, 98, 208, 0.12), -2px -2px 4px rgb(139 105 238 / 9%); /* — Lime — */ --n3d-shadow-xs-lmk: 2px 2px 4px rgba(140, 200, 75, 0.06), -1px -1px 2px rgb(160 230 80 / 4%); --n3d-shadow-sm-lmk: 4px 4px 8px rgba(140, 200, 75, 0.08), -1px -1px 2px rgb(160 230 80 / 5%); --n3d-shadow-md-lmk: 8px 8px 14px rgba(140, 200, 75, 0.09), -1px -1px 3px rgb(160 230 80 / 6%); --n3d-shadow-lg-lmk: 12px 12px 20px rgba(140, 200, 75, 0.10), -2px -2px 3px rgb(160 230 80 / 7%); --n3d-shadow-xl-lmk: 16px 16px 25px rgba(140, 200, 75, 0.11), -2px -2px 4px rgb(160 230 80 / 8%); --n3d-shadow-2xl-lmk: 20px 20px 30px rgba(140, 200, 75, 0.12), -2px -2px 4px rgb(160 230 80 / 9%); /* — Indigo — */ --n3d-shadow-xs-idk: 2px 2px 4px rgba(115, 95, 210, 0.06), -1px -1px 2px rgb(130 110 238 / 4%); --n3d-shadow-sm-idk: 4px 4px 8px rgba(115, 95, 210, 0.08), -1px -1px 2px rgb(130 110 238 / 5%); --n3d-shadow-md-idk: 8px 8px 14px rgba(115, 95, 210, 0.09), -1px -1px 3px rgb(130 110 238 / 6%); --n3d-shadow-lg-idk: 12px 12px 20px rgba(115, 95, 210, 0.10), -2px -2px 3px rgb(130 110 238 / 7%); --n3d-shadow-xl-idk: 16px 16px 25px rgba(115, 95, 210, 0.11), -2px -2px 4px rgb(130 110 238 / 8%); --n3d-shadow-2xl-idk: 20px 20px 30px rgba(115, 95, 210, 0.12), -2px -2px 4px rgb(130 110 238 / 9%); /* — Jade — */ --n3d-shadow-xs-jdk: 2px 2px 4px rgba(60, 175, 140, 0.06), -1px -1px 2px rgb(70 200 165 / 4%); --n3d-shadow-sm-jdk: 4px 4px 8px rgba(60, 175, 140, 0.08), -1px -1px 2px rgb(70 200 165 / 5%); --n3d-shadow-md-jdk: 8px 8px 14px rgba(60, 175, 140, 0.09), -1px -1px 3px rgb(70 200 165 / 6%); --n3d-shadow-lg-jdk: 12px 12px 20px rgba(60, 175, 140, 0.10), -2px -2px 3px rgb(70 200 165 / 7%); --n3d-shadow-xl-jdk: 16px 16px 25px rgba(60, 175, 140, 0.11), -2px -2px 4px rgb(70 200 165 / 8%); --n3d-shadow-2xl-jdk: 20px 20px 30px rgba(60, 175, 140, 0.12), -2px -2px 4px rgb(70 200 165 / 9%); /* ================================================================ TINTED SHADOWS ================================================================ */ /* — Purple — */ --n3d-shadow-tint-xs-ppk: 0 0 2px rgb(108 57 255 / 18%), 0 1px 1px rgb(230 197 255 / 10%); --n3d-shadow-tint-sm-ppk: 0 0 4px rgb(108 57 255 / 22%), 0 1px 2px rgb(230 197 255 / 14%); --n3d-shadow-tint-md-ppk: 0 0 8px rgb(108 57 255 / 28%), 0 2px 4px rgb(230 197 255 / 18%); --n3d-shadow-tint-lg-ppk: 0 0 14px rgb(108 57 255 / 32%), 0 3px 6px rgb(230 197 255 / 22%); --n3d-shadow-tint-xl-ppk: 0 0 20px rgb(108 57 255 / 36%), 0 4px 8px rgb(230 197 255 / 25%); --n3d-shadow-tint-2xl-ppk: 0 0 28px rgb(108 57 255 / 40%), 0 5px 10px rgb(230 197 255 / 28%); /* — Lime — */ --n3d-shadow-tint-xs-lmk: 0 0 2px rgb(144 255 0 / 18%), 0 1px 1px rgb(215 255 170 / 10%); --n3d-shadow-tint-sm-lmk: 0 0 4px rgb(144 255 0 / 22%), 0 1px 2px rgb(215 255 170 / 14%); --n3d-shadow-tint-md-lmk: 0 0 8px rgb(144 255 0 / 28%), 0 2px 4px rgb(215 255 170 / 18%); --n3d-shadow-tint-lg-lmk: 0 0 14px rgb(144 255 0 / 32%), 0 3px 6px rgb(215 255 170 / 22%); --n3d-shadow-tint-xl-lmk: 0 0 20px rgb(144 255 0 / 36%), 0 4px 8px rgb(215 255 170 / 25%); --n3d-shadow-tint-2xl-lmk: 0 0 28px rgb(144 255 0 / 40%), 0 5px 10px rgb(215 255 170 / 28%); /* — Indigo — */ --n3d-shadow-tint-xs-idk: 0 0 2px rgb(75 51 255 / 18%), 0 1px 1px rgb(210 200 255 / 10%); --n3d-shadow-tint-sm-idk: 0 0 4px rgb(75 51 255 / 22%), 0 1px 2px rgb(210 200 255 / 14%); --n3d-shadow-tint-md-idk: 0 0 8px rgb(75 51 255 / 28%), 0 2px 4px rgb(210 200 255 / 18%); --n3d-shadow-tint-lg-idk: 0 0 14px rgb(75 51 255 / 32%), 0 3px 6px rgb(210 200 255 / 22%); --n3d-shadow-tint-xl-idk: 0 0 20px rgb(75 51 255 / 36%), 0 4px 8px rgb(210 200 255 / 25%); --n3d-shadow-tint-2xl-idk: 0 0 28px rgb(75 51 255 / 40%), 0 5px 10px rgb(210 200 255 / 28%); /* — Jade — */ --n3d-shadow-tint-xs-jdk: 0 0 2px rgb(0 189 138 / 18%), 0 1px 1px rgb(170 240 218 / 10%); --n3d-shadow-tint-sm-jdk: 0 0 4px rgb(0 189 138 / 22%), 0 1px 2px rgb(170 240 218 / 14%); --n3d-shadow-tint-md-jdk: 0 0 8px rgb(0 189 138 / 28%), 0 2px 4px rgb(170 240 218 / 18%); --n3d-shadow-tint-lg-jdk: 0 0 14px rgb(0 189 138 / 32%), 0 3px 6px rgb(170 240 218 / 22%); --n3d-shadow-tint-xl-jdk: 0 0 20px rgb(0 189 138 / 36%), 0 4px 8px rgb(170 240 218 / 25%); --n3d-shadow-tint-2xl-jdk: 0 0 28px rgb(0 189 138 / 40%), 0 5px 10px rgb(170 240 218 / 28%); /* ================================================================ STACKED SHADOWS ================================================================ */ /* — Purple — */ --n3d-shadow-stack-xs-ppk: 1px 1px 0 rgba(139, 105, 238, 0.15), 2px 2px 0 rgba(139, 105, 238, 0.10); --n3d-shadow-stack-sm-ppk: 1px 1px 0 rgba(139, 105, 238, 0.18), 2px 2px 0 rgba(139, 105, 238, 0.13), 3px 3px 0 rgba(139, 105, 238, 0.08); --n3d-shadow-stack-md-ppk: 1px 1px 0 rgba(139, 105, 238, 0.22), 2px 2px 0 rgba(139, 105, 238, 0.17), 4px 4px 0 rgba(139, 105, 238, 0.12), 6px 6px 0 rgba(139, 105, 238, 0.07); --n3d-shadow-stack-lg-ppk: 1px 1px 0 rgba(139, 105, 238, 0.25), 3px 3px 0 rgba(139, 105, 238, 0.18), 6px 6px 0 rgba(139, 105, 238, 0.12), 9px 9px 0 rgba(139, 105, 238, 0.06); --n3d-shadow-stack-xl-ppk: 1px 1px 0 rgba(139, 105, 238, 0.28), 3px 3px 0 rgba(139, 105, 238, 0.22), 6px 6px 0 rgba(139, 105, 238, 0.15), 10px 10px 0 rgba(139, 105, 238, 0.09), 14px 14px 0 rgba(139, 105, 238, 0.04); --n3d-shadow-stack-2xl-ppk: 1px 1px 0 rgba(139, 105, 238, 0.32), 4px 4px 0 rgba(139, 105, 238, 0.24), 8px 8px 0 rgba(139, 105, 238, 0.16), 12px 12px 0 rgba(139, 105, 238, 0.10), 16px 16px 0 rgba(139, 105, 238, 0.05); /* — Lime — */ --n3d-shadow-stack-xs-lmk: 1px 1px 0 rgba(160, 230, 80, 0.15), 2px 2px 0 rgba(160, 230, 80, 0.10); --n3d-shadow-stack-sm-lmk: 1px 1px 0 rgba(160, 230, 80, 0.18), 2px 2px 0 rgba(160, 230, 80, 0.13), 3px 3px 0 rgba(160, 230, 80, 0.08); --n3d-shadow-stack-md-lmk: 1px 1px 0 rgba(160, 230, 80, 0.22), 2px 2px 0 rgba(160, 230, 80, 0.17), 4px 4px 0 rgba(160, 230, 80, 0.12), 6px 6px 0 rgba(160, 230, 80, 0.07); --n3d-shadow-stack-lg-lmk: 1px 1px 0 rgba(160, 230, 80, 0.25), 3px 3px 0 rgba(160, 230, 80, 0.18), 6px 6px 0 rgba(160, 230, 80, 0.12), 9px 9px 0 rgba(160, 230, 80, 0.06); --n3d-shadow-stack-xl-lmk: 1px 1px 0 rgba(160, 230, 80, 0.28), 3px 3px 0 rgba(160, 230, 80, 0.22), 6px 6px 0 rgba(160, 230, 80, 0.15), 10px 10px 0 rgba(160, 230, 80, 0.09), 14px 14px 0 rgba(160, 230, 80, 0.04); --n3d-shadow-stack-2xl-lmk: 1px 1px 0 rgba(160, 230, 80, 0.32), 4px 4px 0 rgba(160, 230, 80, 0.24), 8px 8px 0 rgba(160, 230, 80, 0.16), 12px 12px 0 rgba(160, 230, 80, 0.10), 16px 16px 0 rgba(160, 230, 80, 0.05); /* — Indigo — */ --n3d-shadow-stack-xs-idk: 1px 1px 0 rgba(130, 110, 238, 0.15), 2px 2px 0 rgba(130, 110, 238, 0.10); --n3d-shadow-stack-sm-idk: 1px 1px 0 rgba(130, 110, 238, 0.18), 2px 2px 0 rgba(130, 110, 238, 0.13), 3px 3px 0 rgba(130, 110, 238, 0.08); --n3d-shadow-stack-md-idk: 1px 1px 0 rgba(130, 110, 238, 0.22), 2px 2px 0 rgba(130, 110, 238, 0.17), 4px 4px 0 rgba(130, 110, 238, 0.12), 6px 6px 0 rgba(130, 110, 238, 0.07); --n3d-shadow-stack-lg-idk: 1px 1px 0 rgba(130, 110, 238, 0.25), 3px 3px 0 rgba(130, 110, 238, 0.18), 6px 6px 0 rgba(130, 110, 238, 0.12), 9px 9px 0 rgba(130, 110, 238, 0.06); --n3d-shadow-stack-xl-idk: 1px 1px 0 rgba(130, 110, 238, 0.28), 3px 3px 0 rgba(130, 110, 238, 0.22), 6px 6px 0 rgba(130, 110, 238, 0.15), 10px 10px 0 rgba(130, 110, 238, 0.09), 14px 14px 0 rgba(130, 110, 238, 0.04); --n3d-shadow-stack-2xl-idk: 1px 1px 0 rgba(130, 110, 238, 0.32), 4px 4px 0 rgba(130, 110, 238, 0.24), 8px 8px 0 rgba(130, 110, 238, 0.16), 12px 12px 0 rgba(130, 110, 238, 0.10), 16px 16px 0 rgba(130, 110, 238, 0.05); /* — Jade — */ --n3d-shadow-stack-xs-jdk: 1px 1px 0 rgba(70, 200, 165, 0.15), 2px 2px 0 rgba(70, 200, 165, 0.10); --n3d-shadow-stack-sm-jdk: 1px 1px 0 rgba(70, 200, 165, 0.18), 2px 2px 0 rgba(70, 200, 165, 0.13), 3px 3px 0 rgba(70, 200, 165, 0.08); --n3d-shadow-stack-md-jdk: 1px 1px 0 rgba(70, 200, 165, 0.22), 2px 2px 0 rgba(70, 200, 165, 0.17), 4px 4px 0 rgba(70, 200, 165, 0.12), 6px 6px 0 rgba(70, 200, 165, 0.07); --n3d-shadow-stack-lg-jdk: 1px 1px 0 rgba(70, 200, 165, 0.25), 3px 3px 0 rgba(70, 200, 165, 0.18), 6px 6px 0 rgba(70, 200, 165, 0.12), 9px 9px 0 rgba(70, 200, 165, 0.06); --n3d-shadow-stack-xl-jdk: 1px 1px 0 rgba(70, 200, 165, 0.28), 3px 3px 0 rgba(70, 200, 165, 0.22), 6px 6px 0 rgba(70, 200, 165, 0.15), 10px 10px 0 rgba(70, 200, 165, 0.09), 14px 14px 0 rgba(70, 200, 165, 0.04); --n3d-shadow-stack-2xl-jdk: 1px 1px 0 rgba(70, 200, 165, 0.32), 4px 4px 0 rgba(70, 200, 165, 0.24), 8px 8px 0 rgba(70, 200, 165, 0.16), 12px 12px 0 rgba(70, 200, 165, 0.10), 16px 16px 0 rgba(70, 200, 165, 0.05); /* ================================================================ INNER DIMENSION SHADOWS ================================================================ */ /* — Neutral — */ --n3d-shadow-inner-xs: 2px 2px 4px rgba(0, 0, 0, 0.06), -1px -1px 2px rgba(120, 115, 130, 0.05), inset 2px 2px 4px rgba(0, 0, 0, 0.08), inset -1px -1px 2px rgba(255, 255, 255, 0.60); --n3d-shadow-inner-sm: 3px 3px 6px rgba(0, 0, 0, 0.08), -1px -1px 3px rgba(120, 115, 130, 0.06), inset 3px 3px 6px rgba(0, 0, 0, 0.10), inset -2px -2px 4px rgba(255, 255, 255, 0.65); --n3d-shadow-inner-md: 5px 5px 10px rgba(0, 0, 0, 0.10), -2px -2px 4px rgba(120, 115, 130, 0.07), inset 4px 4px 8px rgba(0, 0, 0, 0.12), inset -3px -3px 5px rgba(255, 255, 255, 0.70); --n3d-shadow-inner-lg: 8px 8px 16px rgba(0, 0, 0, 0.12), -3px -3px 6px rgba(120, 115, 130, 0.08), inset 5px 5px 10px rgba(0, 0, 0, 0.14), inset -4px -4px 6px rgba(255, 255, 255, 0.75); --n3d-shadow-inner-xl: 12px 12px 22px rgba(0, 0, 0, 0.14), -4px -4px 8px rgba(120, 115, 130, 0.10), inset 6px 6px 12px rgba(0, 0, 0, 0.16), inset -5px -5px 8px rgba(255, 255, 255, 0.80); --n3d-shadow-inner-2xl: 16px 16px 30px rgba(0, 0, 0, 0.16), -5px -5px 10px rgba(120, 115, 130, 0.12), inset 8px 8px 16px rgba(0, 0, 0, 0.18), inset -6px -6px 10px rgba(255, 255, 255, 0.85); /* — Purple — */ --n3d-shadow-inner-xs-ppk: 2px 2px 4px rgba(0, 0, 0, 0.06), -1px -1px 2px rgba(139, 105, 238, 0.05), inset 2px 2px 4px rgba(0, 0, 0, 0.08), inset -1px -1px 2px rgba(255, 255, 255, 0.60); --n3d-shadow-inner-sm-ppk: 3px 3px 6px rgba(0, 0, 0, 0.08), -1px -1px 3px rgba(139, 105, 238, 0.06), inset 3px 3px 6px rgba(0, 0, 0, 0.10), inset -2px -2px 4px rgba(255, 255, 255, 0.65); --n3d-shadow-inner-md-ppk: 5px 5px 10px rgba(0, 0, 0, 0.10), -2px -2px 4px rgba(139, 105, 238, 0.07), inset 4px 4px 8px rgba(0, 0, 0, 0.12), inset -3px -3px 5px rgba(255, 255, 255, 0.70); --n3d-shadow-inner-lg-ppk: 8px 8px 16px rgba(0, 0, 0, 0.12), -3px -3px 6px rgba(139, 105, 238, 0.08), inset 5px 5px 10px rgba(0, 0, 0, 0.14), inset -4px -4px 6px rgba(255, 255, 255, 0.75); --n3d-shadow-inner-xl-ppk: 12px 12px 22px rgba(0, 0, 0, 0.14), -4px -4px 8px rgba(139, 105, 238, 0.10), inset 6px 6px 12px rgba(0, 0, 0, 0.16), inset -5px -5px 8px rgba(255, 255, 255, 0.80); --n3d-shadow-inner-2xl-ppk: 16px 16px 30px rgba(0, 0, 0, 0.16), -5px -5px 10px rgba(139, 105, 238, 0.12), inset 8px 8px 16px rgba(0, 0, 0, 0.18), inset -6px -6px 10px rgba(255, 255, 255, 0.85); /* — Lime — */ --n3d-shadow-inner-xs-lmk: 2px 2px 4px rgba(0, 0, 0, 0.06), -1px -1px 2px rgba(160, 230, 80, 0.05), inset 2px 2px 4px rgba(0, 0, 0, 0.08), inset -1px -1px 2px rgba(255, 255, 255, 0.60); --n3d-shadow-inner-sm-lmk: 3px 3px 6px rgba(0, 0, 0, 0.08), -1px -1px 3px rgba(160, 230, 80, 0.06), inset 3px 3px 6px rgba(0, 0, 0, 0.10), inset -2px -2px 4px rgba(255, 255, 255, 0.65); --n3d-shadow-inner-md-lmk: 5px 5px 10px rgba(0, 0, 0, 0.10), -2px -2px 4px rgba(160, 230, 80, 0.07), inset 4px 4px 8px rgba(0, 0, 0, 0.12), inset -3px -3px 5px rgba(255, 255, 255, 0.70); --n3d-shadow-inner-lg-lmk: 8px 8px 16px rgba(0, 0, 0, 0.12), -3px -3px 6px rgba(160, 230, 80, 0.08), inset 5px 5px 10px rgba(0, 0, 0, 0.14), inset -4px -4px 6px rgba(255, 255, 255, 0.75); --n3d-shadow-inner-xl-lmk: 12px 12px 22px rgba(0, 0, 0, 0.14), -4px -4px 8px rgba(160, 230, 80, 0.10), inset 6px 6px 12px rgba(0, 0, 0, 0.16), inset -5px -5px 8px rgba(255, 255, 255, 0.80); --n3d-shadow-inner-2xl-lmk: 16px 16px 30px rgba(0, 0, 0, 0.16), -5px -5px 10px rgba(160, 230, 80, 0.12), inset 8px 8px 16px rgba(0, 0, 0, 0.18), inset -6px -6px 10px rgba(255, 255, 255, 0.85); /* — Indigo — */ --n3d-shadow-inner-xs-idk: 2px 2px 4px rgba(0, 0, 0, 0.06), -1px -1px 2px rgba(130, 110, 238, 0.05), inset 2px 2px 4px rgba(0, 0, 0, 0.08), inset -1px -1px 2px rgba(255, 255, 255, 0.60); --n3d-shadow-inner-sm-idk: 3px 3px 6px rgba(0, 0, 0, 0.08), -1px -1px 3px rgba(130, 110, 238, 0.06), inset 3px 3px 6px rgba(0, 0, 0, 0.10), inset -2px -2px 4px rgba(255, 255, 255, 0.65); --n3d-shadow-inner-md-idk: 5px 5px 10px rgba(0, 0, 0, 0.10), -2px -2px 4px rgba(130, 110, 238, 0.07), inset 4px 4px 8px rgba(0, 0, 0, 0.12), inset -3px -3px 5px rgba(255, 255, 255, 0.70); --n3d-shadow-inner-lg-idk: 8px 8px 16px rgba(0, 0, 0, 0.12), -3px -3px 6px rgba(130, 110, 238, 0.08), inset 5px 5px 10px rgba(0, 0, 0, 0.14), inset -4px -4px 6px rgba(255, 255, 255, 0.75); --n3d-shadow-inner-xl-idk: 12px 12px 22px rgba(0, 0, 0, 0.14), -4px -4px 8px rgba(130, 110, 238, 0.10), inset 6px 6px 12px rgba(0, 0, 0, 0.16), inset -5px -5px 8px rgba(255, 255, 255, 0.80); --n3d-shadow-inner-2xl-idk: 16px 16px 30px rgba(0, 0, 0, 0.16), -5px -5px 10px rgba(130, 110, 238, 0.12), inset 8px 8px 16px rgba(0, 0, 0, 0.18), inset -6px -6px 10px rgba(255, 255, 255, 0.85); /* — Jade — */ --n3d-shadow-inner-xs-jdk: 2px 2px 4px rgba(0, 0, 0, 0.06), -1px -1px 2px rgba(70, 200, 165, 0.05), inset 2px 2px 4px rgba(0, 0, 0, 0.08), inset -1px -1px 2px rgba(255, 255, 255, 0.60); --n3d-shadow-inner-sm-jdk: 3px 3px 6px rgba(0, 0, 0, 0.08), -1px -1px 3px rgba(70, 200, 165, 0.06), inset 3px 3px 6px rgba(0, 0, 0, 0.10), inset -2px -2px 4px rgba(255, 255, 255, 0.65); --n3d-shadow-inner-md-jdk: 5px 5px 10px rgba(0, 0, 0, 0.10), -2px -2px 4px rgba(70, 200, 165, 0.07), inset 4px 4px 8px rgba(0, 0, 0, 0.12), inset -3px -3px 5px rgba(255, 255, 255, 0.70); --n3d-shadow-inner-lg-jdk: 8px 8px 16px rgba(0, 0, 0, 0.12), -3px -3px 6px rgba(70, 200, 165, 0.08), inset 5px 5px 10px rgba(0, 0, 0, 0.14), inset -4px -4px 6px rgba(255, 255, 255, 0.75); --n3d-shadow-inner-xl-jdk: 12px 12px 22px rgba(0, 0, 0, 0.14), -4px -4px 8px rgba(70, 200, 165, 0.10), inset 6px 6px 12px rgba(0, 0, 0, 0.16), inset -5px -5px 8px rgba(255, 255, 255, 0.80); --n3d-shadow-inner-2xl-jdk: 16px 16px 30px rgba(0, 0, 0, 0.16), -5px -5px 10px rgba(70, 200, 165, 0.12), inset 8px 8px 16px rgba(0, 0, 0, 0.18), inset -6px -6px 10px rgba(255, 255, 255, 0.85); /* ═══════════════════════════════════ BACKGROUND ORBS — per bulb state wall = SVG background layer wgl = WebGL mesh gradient layer ═══════════════════════════════════ */ /* ── State 0: OFF (default) ── */ --n3d-wall-orb-a-off: #d8d4d0; --n3d-wall-orb-b-off: #e4e0dc; --n3d-wgl-orb-a-off: #dcd8d4; --n3d-wgl-orb-b-off: #ccc8c4; /* ── State 1: WARM ── */ --n3d-wall-orb-a-wrm: #f5782f; --n3d-wall-orb-b-wrm: #ffc800; --n3d-wgl-orb-a-wrm: #ffad14; --n3d-wgl-orb-b-wrm: #ff7424; /* ── State 2: COOL ── */ --n3d-wall-orb-a-cld: #1dcfef; --n3d-wall-orb-b-cld: #3978ff; --n3d-wgl-orb-a-cld: #0c5090; --n3d-wgl-orb-b-cld: #09748b; /* ── State 3: NEON ── */ --n3d-wall-orb-a-neo: #00d58e; --n3d-wall-orb-b-neo: #7300ff; --n3d-wgl-orb-a-neo: #6aff00; --n3d-wgl-orb-b-neo: #6600ff; /* ── Active orbs ── */ --n3d-bg-wall-a: var(--n3d-wall-orb-a-off); --n3d-bg-wall-b: var(--n3d-wall-orb-b-off); --n3d-bg-wgl-a: var(--n3d-wgl-orb-a-off); --n3d-bg-wgl-b: var(--n3d-wgl-orb-b-off); /* ═══════════════════════════════════ UI PALETTE — 11 colors per bulb state Use anywhere: borders, text, gradients, bg ═══════════════════════════════════ */ /* ── State 0: OFF ── */ --n3d-ui-a-off: #4200ff; --n3d-ui-b-off: #90ff00; --n3d-ui-c-off: #4b33ff; --n3d-ui-d-off: #00bd8a; --n3d-ui-e-off: #7a7a7a; --n3d-ui-f-off: #5ce1e6; --n3d-ui-g-off: #73cc00; --n3d-ui-h-off: #3400cc; --n3d-ui-i-off: #00e5a0; --n3d-ui-j-off: #b8ff3c; --n3d-ui-k-off: #6341ff; --n3d-ui-glow-off: rgba(66,0,255,0.08); /* ── State 1: WARM ── */ --n3d-ui-a-wrm: #f5782f; --n3d-ui-b-wrm: #ffc800; --n3d-ui-c-wrm: #d06820; --n3d-ui-d-wrm: #ffad14; --n3d-ui-e-wrm: #9a5a18; --n3d-ui-f-wrm: #ffad14; --n3d-ui-g-wrm: #f5782f; --n3d-ui-h-wrm: #b85a10; --n3d-ui-i-wrm: #ffd048; --n3d-ui-j-wrm: #ffe070; --n3d-ui-k-wrm: #804810; --n3d-ui-glow-wrm: rgba(245,120,47,0.14); /* ── State 2: COOL ── */ --n3d-ui-a-cld: #3978ff; --n3d-ui-b-cld: #1dcfef; --n3d-ui-c-cld: #2060b0; --n3d-ui-d-cld: #5ca0ff; --n3d-ui-e-cld: #1a4a80; --n3d-ui-f-cld: #5ca0ff; --n3d-ui-g-cld: #3978ff; --n3d-ui-h-cld: #1850a0; --n3d-ui-i-cld: #90c8ff; --n3d-ui-j-cld: #3090e8; --n3d-ui-k-cld: #103060; --n3d-ui-glow-cld: rgba(57,120,255,0.14); /* ── State 3: NEON ── */ --n3d-ui-a-neo: #4200ff; --n3d-ui-b-neo: #90ff00; --n3d-ui-c-neo: #4b33ff; --n3d-ui-d-neo: #00bd8a; --n3d-ui-e-neo: #7a7a7a; --n3d-ui-f-neo: #5ce1e6; --n3d-ui-g-neo: #73cc00; --n3d-ui-h-neo: #3400cc; --n3d-ui-i-neo: #00e5a0; --n3d-ui-j-neo: #b8ff3c; --n3d-ui-k-neo: #6341ff; --n3d-ui-glow-neo: rgba(66,0,255,0.10); /* ── Active ── */ --n3d-ui-a: var(--n3d-ui-a-off); --n3d-ui-b: var(--n3d-ui-b-off); --n3d-ui-c: var(--n3d-ui-c-off); --n3d-ui-d: var(--n3d-ui-d-off); --n3d-ui-e: var(--n3d-ui-e-off); --n3d-ui-f: var(--n3d-ui-f-off); --n3d-ui-g: var(--n3d-ui-g-off); --n3d-ui-h: var(--n3d-ui-h-off); --n3d-ui-i: var(--n3d-ui-i-off); --n3d-ui-j: var(--n3d-ui-j-off); --n3d-ui-k: var(--n3d-ui-k-off); --n3d-ui-glow: var(--n3d-ui-glow-off); /* ================================================================ OVERLAYS — neutral + tinted variants ================================================================ */ /* Neutral */ --n3d-overlay-light: rgb(75 75 85 / 10%); --n3d-overlay-medium: rgb(205 202 210 / 55%); --n3d-overlay-dark: rgb(235 233 240 / 82%); --n3d-overlay-darker: rgb(245 243 250 / 77%); --n3d-overlay-blur: rgb(255 255 255 / 10%); --n3d-overlay-scrim: linear-gradient(to top, rgb(195 193 205 / 83%) 0%, rgb(115 113 125 / 12%) 100%); /* Purple */ --n3d-overlay-light-ppk: rgb(166 141 255 / 10%); --n3d-overlay-medium-ppk: rgb(208 196 255 / 55%); --n3d-overlay-dark-ppk: rgb(231 224 255 / 82%); --n3d-overlay-darker-ppk: rgb(243 240 255 / 77%); --n3d-overlay-blur-ppk: rgb(88 22 255 / 08%); --n3d-overlay-scrim-ppk: linear-gradient(to top, rgb(190 178 230 / 83%) 0%, rgb(136 119 210 / 12%) 100%); /* Lime */ --n3d-overlay-light-lmk: rgb(180 245 120 / 10%); --n3d-overlay-medium-lmk: rgb(200 230 170 / 55%); --n3d-overlay-dark-lmk: rgb(230 245 215 / 82%); --n3d-overlay-darker-lmk: rgb(240 250 230 / 77%); --n3d-overlay-blur-lmk: rgb(144 255 0 / 08%); --n3d-overlay-scrim-lmk: linear-gradient(to top, rgb(185 225 145 / 83%) 0%, rgb(111 200 66 / 12%) 100%); /* Indigo */ --n3d-overlay-light-idk: rgb(155 140 255 / 10%); --n3d-overlay-medium-idk: rgb(200 193 255 / 55%); --n3d-overlay-dark-idk: rgb(228 224 255 / 82%); --n3d-overlay-darker-idk: rgb(242 240 255 / 77%); --n3d-overlay-blur-idk: rgb(75 51 255 / 08%); --n3d-overlay-scrim-idk: linear-gradient(to top, rgb(183 175 230 / 83%) 0%, rgb(120 108 210 / 12%) 100%); /* Jade */ --n3d-overlay-light-jdk: rgb(100 220 185 / 10%); --n3d-overlay-medium-jdk: rgb(180 230 215 / 55%); --n3d-overlay-dark-jdk: rgb(220 245 238 / 82%); --n3d-overlay-darker-jdk: rgb(235 250 245 / 77%); --n3d-overlay-blur-jdk: rgb(0 189 138 / 08%); --n3d-overlay-scrim-jdk: linear-gradient(to top, rgb(160 220 200 / 83%) 0%, rgb(66 189 155 / 12%) 100%); }