/* ========================================= HUB VARIABLES - THEME ENGINE V4 ========================================= */ /* ========================================= 1. THE MAGIC FILTER (Bakåtkompatibilitet) Dette redder de gamle filene dine mens du rydder! ========================================= */ :root, body { --neon-cyan: var(--brand-primary); --yellow: var(--brand-gold, #FFD700); --green: var(--status-success, #00ff00); --pink: var(--status-danger, #ff007f); --orange: var(--status-warning, #ff9800); --purple: var(--brand-purple, #b026ff); } /* ========================================= BAKÅTKOMPATIBILITET (The Magic Filter) Tvinger gammel HTML til å støtte Theme Engine! ========================================= */ :root, body { --neon-cyan: var(--brand-primary); --yellow: var(--brand-gold, #FFD700); --green: var(--brand-success, #00ff00); --pink: var(--brand-danger, #ff007f); --orange: var(--brand-warning, #ff9800); --purple: var(--brand-purple, #b026ff); /* Medalje-aliaser: mange gamle filer bruker var(--gold/--silver/--bronze) uten at de var definert (falt til arvet farge). Aliaser dem til brand-tonene. */ --gold: var(--brand-gold, #FFD700); --silver: var(--brand-silver, #C0C0C0); --bronze: var(--brand-bronze, #CD7F32); } /* color-scheme lar nettleserens egne kontroller (nedtrekk-liste, datovelger-ikon, scrollbar) følge temaet — erstatter `filter: invert(1)`-hackene på kalenderikonet (ADR-0050). Tema-klassen står på , men sidas scrollbar tegnes av , så rota må følge body (`:has`, Chrome 105+/Safari 15.4+). */ :root, :root:has(body.theme-cyberpunk), :root:has(body.theme-dark), .theme-cyberpunk { color-scheme: dark; } :root:has(body.theme-light) { color-scheme: light; } /* DEFAULT / CYBERPUNK MODE */ :root, .theme-cyberpunk { --bg-main: #0b0c10; --card-bg: #1f2833; --card-bg-rgb: 31, 40, 51; /* Nødvendig for Glassmorphism */ --card-bg-rgba: rgba(0,0,0,0.3); /* For glassmorphism-effekter */ /* Sidebaren tok tidligere --card-bg fordi --sidebar-bg aldri var koblet opp. Satt lik card-bg her for å bevare dagens cyberpunk-utseende uendret. */ --sidebar-bg: #1f2833; --text-main: #ffffff; --text-muted: #888888; --text-invert: #1a202c; /* Tekst på METTEDE STATUS-FYLL (warning/success/danger). Denne snur IKKE med temaet, fordi status-fargene heller ikke gjør det — de er middels lyse i alle tre temaene. --text-invert ville gitt 2,5:1 på oransje/grønn i Light-mode (WCAG-brudd). */ --text-on-status: #1a202c; --input-bg: rgba(0, 0, 0, 0.3); /* Mørk, myk bakgrunn for Dark/Cyberpunk */ --surface-raised: rgba(255, 255, 255, 0.05); /* Svakt LYSERE lag oppå kort (nøytrale merker o.l.) */ --brand-primary: #66fcf1; /* Neon Cyan */ --brand-primary-rgb: 102, 252, 241; --brand-accent: #ff007f; --brand-purple: #b026ff; --brand-danger: #ff007f; /* Neon Rosa */ --status-success: #00ff00; --status-warning: #ff9800; --status-danger: #ff007f; --brand-gold: #FFD700; --brand-silver: #C0C0C0; --brand-bronze: #CD7F32; --nav-hover: rgba(var(--brand-primary-rgb), 0.1); --border-color: #333333; --shadow-main: 0 8px 32px 0 rgba(0, 0, 0, 0.8); /* --brand-glow er en KOMPLETT box-shadow-verdi (ikke en farge), så den kan stå alene eller sist i en kommaliste: `box-shadow: 0 1px 3px …, var(--brand-glow)`. Definert i alle tre temaene siden 2026-09-05 (fane-skinna, ADR-0048). */ --brand-glow: 0 0 14px rgba(var(--brand-primary-rgb), 0.35); /* Glødstyrke for status-punkter o.l. som regnes med color-mix (ADR-0049). Prosent, 0 % = av. */ --glow-strength: 45%; /* Showcase / Velour Lerret (for Badges/Awards) */ --showcase-bg: radial-gradient(circle, #2a3644 0%, #0b0c10 100%); --showcase-circle-bg: #111111; /* Signage bilde-rammer (ADR-0019) — theme-aware i stedet for hardkodet hex. */ --sc-frame-shadow: 0 24px 70px rgba(0, 0, 0, 0.65); --sc-polaroid-paper: #ffffff; /* BLEKK — merkefarge brukt som TEKST (docs/konsept/HANDOFF.md pakke F, første del). Statusfargene er lesbare som FYLL (--text-on-status), men ikke alltid som tekst: grønn klokke i Light ga 2,7:1. Fyll og kanter bruker fortsatt status- og brand-fargene. */ --ink-success: #00ff00; --ink-warning: #ff9800; --ink-danger: #ff4d9d; --ink-gold: #FFD700; /* STAGE — hero-flate med prikkrutenett og glødring (member_dash_v2-konseptet; brukes av member/program.php nå, dashbordet når pakke A bygges). */ --hero-bg: radial-gradient(120% 140% at 12% 0%, rgba(var(--brand-primary-rgb), .16) 0%, transparent 55%), linear-gradient(160deg, #141b25 0%, #0b0c10 70%); --grid-dot: rgba(var(--brand-primary-rgb), .10); --glow-ring: 0 0 0 1px rgba(var(--brand-primary-rgb), .35), 0 0 34px rgba(var(--brand-primary-rgb), .20); } /* CLEAN DARK MODE */ .theme-dark { color-scheme: dark; --bg-main: #121212; --card-bg: #1e1e1e; --card-bg-rgb: 30, 30, 30; --card-bg-rgba: rgba(0,0,0,0.3); /* Se kommentar i cyberpunk: lik card-bg for å bevare dagens dark-utseende uendret. */ --sidebar-bg: #1e1e1e; --text-invert: #1a202c; /* Tekst på METTEDE STATUS-FYLL (warning/success/danger). Denne snur IKKE med temaet, fordi status-fargene heller ikke gjør det — de er middels lyse i alle tre temaene. --text-invert ville gitt 2,5:1 på oransje/grønn i Light-mode (WCAG-brudd). */ --text-on-status: #1a202c; --text-main: #e0e0e0; --text-muted: #9e9e9e; --input-bg: rgba(0, 0, 0, 0.3); /* Mørk, myk bakgrunn for Dark/Cyberpunk */ --surface-raised: rgba(255, 255, 255, 0.05); /* Svakt LYSERE lag oppå kort (nøytrale merker o.l.) */ --brand-primary: #4da8da; /* Muted Blue */ --brand-primary-rgb: 77, 168, 218; --brand-accent: #bb86fc; --brand-purple: #bb86fc; --brand-danger: #cf6679; --status-success: #03dac6; --status-warning: #f2c94c; --status-danger: #cf6679; --brand-gold: #f1c40f; --brand-silver: #bdc3c7; --brand-bronze: #e67e22; --nav-hover: rgba(255, 255, 255, 0.05); --border-color: #2c2c2c; --shadow-main: 0 4px 15px rgba(0,0,0,0.5); --brand-glow: 0 0 10px rgba(var(--brand-primary-rgb), 0.22); /* dempet — se kommentar i cyberpunk */ --glow-strength: 22%; /* Showcase / Velour Lerret (for Badges/Awards) */ --showcase-bg: radial-gradient(circle, #383838 0%, #121212 100%); --showcase-circle-bg: #1a1a1a; /* Signage bilde-rammer (ADR-0019) */ --sc-frame-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); --sc-polaroid-paper: #ffffff; --ink-success: #03dac6; --ink-warning: #f2c94c; --ink-danger: #cf6679; --ink-gold: #f1c40f; --hero-bg: linear-gradient(160deg, #232323 0%, #141414 70%); --grid-dot: rgba(255, 255, 255, .05); --glow-ring: 0 0 0 1px rgba(var(--brand-primary-rgb), .30), 0 8px 30px rgba(0, 0, 0, .5); } /* ENTERPRISE LIGHT MODE (Clean & Professional) */ /* ENTERPRISE LIGHT MODE (Eggehvit, Moden & Behagelig) */ .theme-light { color-scheme: light; /* Bakgrunner — LYSHETS-TRAPP. Tidligere lå bakgrunn (95 %), kort (100 %) og sidebar (100 %) praktisk talt oppå hverandre, så ~90 % av skjermflaten var 95–100 % lys. Nå er det fire lyshets-steg mellom hvert lag, og RENT HVITT er reservert for tekstfelt (se --input-bg). */ --bg-main: #e4e9f0; /* Dempet blågrå — gir kortene noe å poppe MOT */ --card-bg: #f4f6f9; /* Papir, ikke kritt. Sidebaren arver denne (sidebar.css) */ --card-bg-rgb: 244, 246, 249; --card-bg-rgba: #e0e0e0; /* For glassmorphism-effekter */ --sidebar-bg: #eef1f6; /* Tekst */ --text-main: #1a202c; /* Ikke 100% sort, mykere for øynene */ --text-muted: #718096; /* Dus gråblå for sekundærtekst */ --text-invert: #e0e0e0; /* Lys grå for invert */ /* Tekst på METTEDE STATUS-FYLL (warning/success/danger). Denne snur IKKE med temaet, fordi status-fargene heller ikke gjør det — de er middels lyse i alle tre temaene. --text-invert ville gitt 2,5:1 på oransje/grønn i Light-mode (WCAG-brudd). */ --text-on-status: #1a202c; --input-bg: #ffffff; /* RENT HVITT = «her kan du skrive». Eneste hvite flate i lyst tema. */ --surface-raised: rgba(0, 0, 0, 0.05); /* I Light-mode må «hevet» flate være svakt MØRKERE for å synes */ /* Aksenter (Modne, rene farger) */ --brand-primary: #0066cc; /* En dyp, profesjonell blåfarge (i stedet for skrikende cyan) */ --brand-danger: #e53e3e; /* Dus, pen rød */ --brand-success: #38a169; /* Dus, pen grønn */ --brand-warning: #d69e2e; /* Dus sennepsgul (bra lesbarhet på hvitt) */ --brand-primary-rgb: 0, 102, 204; --brand-accent: #805ad5; --brand-purple: #805ad5; --status-success: #38a169; --status-warning: #dd6b20; --status-danger: #e53e3e; --brand-gold: #d4af37; --brand-silver: #a0aec0; --brand-bronze: #b7791f; /* UI Elementer */ --nav-hover: #e8edf4; /* Lekker, myk grå hover-effekt på menyer */ --border-color: #d7dee7; /* Litt fastere enn før: kortene er ikke lenger hvite, så kanten må bære mer av separasjonen */ /* Skygger - Magien bak modent design! */ --shadow-main: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* Stor, men nesten usynlig skygge for premium-følelse */ /* Ingen lysende neon-skygger på dagen. Skrives som en gyldig null-skygge (ikke `none`), fordi `none` er ugyldig som ett ledd i en kommaliste og ville slått av HELE box-shadow-en. */ --brand-glow: 0 0 0 transparent; --glow-strength: 0%; /* ingen glød på dagen */ /* Showcase / Velour Lerret (for Badges/Awards) */ /* Beholder mørk bakgrunn for at lyse badge-farger (gull, cyan) skal synes! */ --showcase-bg: radial-gradient(circle, #4a5568 0%, #1a202c 100%); --showcase-circle-bg: #2d3748; /* Signage bilde-rammer (ADR-0019) — mykere skygge på lyst tema (unngå Light-mode-drift). */ --sc-frame-shadow: 0 16px 40px rgba(0, 0, 0, 0.18); --sc-polaroid-paper: #ffffff; /* Blekk: de mettede statusfargene gir 2–4:1 som tekst på lyst kort; disse er mørkere. */ --ink-success: #1f7a4d; --ink-warning: #9a4a08; --ink-danger: #b32130; --ink-gold: #856404; --hero-bg: linear-gradient(160deg, #ffffff 0%, #dfe6f0 100%); --grid-dot: rgba(11, 114, 133, .10); --glow-ring: 0 0 0 1px rgba(var(--brand-primary-rgb), .25), 0 10px 30px rgba(23, 43, 77, .12); } /* CYBERPUNK */ :root, .theme-cyberpunk { /* ... dine eksisterende variabler ... */ --brand-success: #00ff00; --brand-warning: #ffeb3b; --brand-purple: #b026ff; --brand-gold: #FFD700; --brand-silver: #C0C0C0; --brand-bronze: #CD7F32; --card-bg-rgb: 31, 40, 51; --brand-primary-rgb: 102, 252, 241; --brand-purple: #b026ff; --active-item-bg: #000000; } /* DARK MODE */ .theme-dark { /* ... dine eksisterende variabler ... */ --brand-success: #03dac6; --brand-warning: #f2c94c; --brand-purple: #bb86fc; --brand-gold: #f1c40f; --brand-silver: #bdc3c7; --brand-bronze: #e67e22; --active-item-bg: #000000; } /* LIGHT MODE */ .theme-light { /* ... dine eksisterende variabler ... */ --brand-success: #28a745; --brand-warning: #f39c12; --brand-purple: #8e44ad; --brand-gold: #d4af37; --brand-silver: #95a5a6; --brand-bronze: #d35400; --active-item-bg: var(--card-bg); }