/** * Telme design tokens — ljus/mörk + system (data-theme på ). * Värden: light | dark | auto */ :root, [data-theme="light"] { color-scheme: light; /* Brand (oförändrade) */ --telme-cyan: #96d2dc; --telme-blue: #3e7697; --telme-blue-dark: #2a5569; --telme-orange: #e85d2a; --telme-green: #5cb85c; --color-primary: var(--telme-blue); --color-accent: var(--telme-cyan); --color-cta: var(--telme-orange); --color-text: #1a2b33; --color-text-muted: #4a6270; --color-heading: var(--telme-blue-dark); --color-bg: #ffffff; --color-bg-gradient: none; --color-bg-alt: #f4f9fb; --color-surface: #ffffff; --color-surface-hover: #eef6f9; --color-module-accent: linear-gradient( 165deg, var(--telme-cyan) 0%, var(--telme-blue) 50%, var(--telme-blue-dark) 100% ); --color-bg-hero: linear-gradient(135deg, #e8f4f7 0%, #ffffff 55%, #f0f7fa 100%); --color-border: #d0e4ea; --color-header-bg: rgb(255 255 255 / 92%); --color-header-surface: 255 255 255; --color-header-border: var(--color-border); --color-nav-mega-bg: rgb(255 255 255 / 97%); --color-nav-mega-card-bg: #ffffff; --color-link-hover: var(--telme-blue-dark); --color-on-primary: #ffffff; --color-hero-scrim: linear-gradient( 105deg, rgb(42 85 105 / 88%) 0%, rgb(42 85 105 / 55%) 45%, rgb(42 85 105 / 25%) 100% ); --color-hero-slide-bg: #f2f8fa; --color-hero-slide-border: rgb(62 118 151 / 18%); --color-page-hero-bg: linear-gradient(135deg, var(--telme-cyan) 0%, var(--telme-blue) 100%); --color-page-hero-text: #ffffff; --color-footer-bg: var(--telme-blue-dark); --color-footer-text: #e8f4f7; --color-footer-link: var(--telme-cyan); --color-footer-border: rgb(255 255 255 / 15%); --color-form-error-bg: #fde8e8; --color-form-error-text: #9b1c1c; --color-form-success-bg: #e6f4ea; --color-form-success-text: #1e6b3a; --color-price-head-bg: var(--telme-blue); --color-price-head-text: #ffffff; --shadow-sm: 0 2px 8px rgb(62 118 151 / 8%); --shadow-md: 0 8px 24px rgb(62 118 151 / 12%); --color-card-bg: linear-gradient( 152deg, #ffffff 0%, #f9fcfe 45%, color-mix(in srgb, var(--telme-cyan) 14%, #f2f8fa) 100% ); --color-card-bg-hover: linear-gradient( 152deg, #ffffff 0%, color-mix(in srgb, var(--telme-cyan) 22%, #f0f7fa) 55%, color-mix(in srgb, var(--telme-blue) 10%, #eaf3f7) 100% ); /* IBM Plex Sans: brödtext. Refrigerator Deluxe: h1 (fonts.css) */ --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Refrigerator Deluxe", var(--font-sans); /* h1, h2 */ --font-size-base: 1.0625rem; --line-height: 1.55; --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --container-max: 72rem; /* Sidmarginal: header/footer full bredd; övrigt innehåll i .container */ --page-gutter: clamp(1rem, 2.5vw, 2rem); --header-height: 4.25rem; --radius: 0.5rem; --radius-lg: 1rem; --z-header: 100; --z-overlay: 200; } /* * Mörkt läge: djup lila → svart (modern ambient look) * + diskret Telme-blå/cyan i glow — behåller varumärket. */ [data-theme="dark"] { color-scheme: dark; --color-primary: #8ec5d4; --color-accent: #96d2dc; --color-cta: #f07a4d; --color-text: #eceaf2; --color-text-muted: #a39eb5; --color-heading: #e4eef4; --color-bg: #040406; --color-bg-gradient: radial-gradient(ellipse 110% 85% at 12% -15%, rgb(58 32 88 / 0.5) 0%, transparent 52%), radial-gradient(ellipse 75% 55% at 92% 0%, rgb(22 58 78 / 0.38) 0%, transparent 48%), linear-gradient(168deg, #1c142c 0%, #110e18 35%, #08070c 68%, #020203 100%); --color-bg-alt: rgb(22 18 32 / 0.55); --color-surface: rgb(28 24 40 / 0.72); --color-surface-hover: rgb(42 36 58 / 0.88); --color-module-accent: linear-gradient( 165deg, #b8e8f0 0%, var(--telme-cyan) 35%, var(--color-primary) 100% ); --color-bg-hero: linear-gradient(155deg, #241a38 0%, #0c0a10 55%, #020203 100%); --color-border: rgb(255 255 255 / 10%); --color-header-bg: rgb(6 5 10 / 78%); --color-header-surface: 6 5 10; --color-header-border: rgb(255 255 255 / 8%); --color-nav-mega-bg: rgb(10 8 16 / 96%); --color-nav-mega-card-bg: rgb(22 18 32 / 98%); --color-link-hover: var(--telme-cyan); --color-on-primary: #0a0810; --color-hero-scrim: linear-gradient( 105deg, rgb(12 8 22 / 94%) 0%, rgb(8 10 18 / 78%) 45%, rgb(4 4 6 / 35%) 100% ); --color-page-hero-bg: linear-gradient(140deg, #2a1a42 0%, #12101c 45%, #060608 100%); --color-page-hero-text: #f2f0f6; --color-footer-bg: #020203; --color-footer-text: #b8b0c8; --color-footer-link: var(--telme-cyan); --color-footer-border: rgb(255 255 255 / 8%); --color-form-error-bg: rgb(62 24 32 / 0.85); --color-form-error-text: #f5b8b8; --color-form-success-bg: rgb(20 48 32 / 0.85); --color-form-success-text: #a8e6b8; --color-price-head-bg: rgb(36 28 52 / 0.95); --color-price-head-text: #eceaf2; --shadow-sm: 0 2px 16px rgb(0 0 0 / 45%); --shadow-md: 0 12px 40px rgb(0 0 0 / 55%); --color-card-bg: linear-gradient( 152deg, rgb(36 32 50 / 0.94) 0%, rgb(28 24 40 / 0.9) 48%, rgb(22 38 52 / 0.78) 100% ); --color-card-bg-hover: linear-gradient( 152deg, rgb(44 38 60 / 0.96) 0%, rgb(34 30 48 / 0.92) 45%, rgb(28 48 62 / 0.85) 100% ); } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { color-scheme: dark; --color-primary: #8ec5d4; --color-accent: #96d2dc; --color-cta: #f07a4d; --color-text: #eceaf2; --color-text-muted: #a39eb5; --color-heading: #e4eef4; --color-bg: #040406; --color-bg-gradient: radial-gradient(ellipse 110% 85% at 12% -15%, rgb(58 32 88 / 0.5) 0%, transparent 52%), radial-gradient(ellipse 75% 55% at 92% 0%, rgb(22 58 78 / 0.38) 0%, transparent 48%), linear-gradient(168deg, #1c142c 0%, #110e18 35%, #08070c 68%, #020203 100%); --color-bg-alt: rgb(22 18 32 / 0.55); --color-surface: rgb(28 24 40 / 0.72); --color-surface-hover: rgb(42 36 58 / 0.88); --color-module-accent: linear-gradient( 165deg, #b8e8f0 0%, var(--telme-cyan) 35%, var(--color-primary) 100% ); --color-bg-hero: linear-gradient(155deg, #241a38 0%, #0c0a10 55%, #020203 100%); --color-border: rgb(255 255 255 / 10%); --color-header-bg: rgb(6 5 10 / 78%); --color-header-surface: 6 5 10; --color-header-border: rgb(255 255 255 / 8%); --color-nav-mega-bg: rgb(10 8 16 / 96%); --color-nav-mega-card-bg: rgb(22 18 32 / 98%); --color-link-hover: var(--telme-cyan); --color-on-primary: #0a0810; --color-hero-scrim: linear-gradient( 105deg, rgb(12 8 22 / 94%) 0%, rgb(8 10 18 / 78%) 45%, rgb(4 4 6 / 35%) 100% ); --color-page-hero-bg: linear-gradient(140deg, #2a1a42 0%, #12101c 45%, #060608 100%); --color-page-hero-text: #f2f0f6; --color-footer-bg: #020203; --color-footer-text: #b8b0c8; --color-footer-link: var(--telme-cyan); --color-footer-border: rgb(255 255 255 / 8%); --color-form-error-bg: rgb(62 24 32 / 0.85); --color-form-error-text: #f5b8b8; --color-form-success-bg: rgb(20 48 32 / 0.85); --color-form-success-text: #a8e6b8; --color-price-head-bg: rgb(36 28 52 / 0.95); --color-price-head-text: #eceaf2; --shadow-sm: 0 2px 16px rgb(0 0 0 / 45%); --shadow-md: 0 12px 40px rgb(0 0 0 / 55%); --color-card-bg: linear-gradient( 152deg, rgb(36 32 50 / 0.94) 0%, rgb(28 24 40 / 0.9) 48%, rgb(22 38 52 / 0.78) 100% ); --color-card-bg-hover: linear-gradient( 152deg, rgb(44 38 60 / 0.96) 0%, rgb(34 30 48 / 0.92) 45%, rgb(28 48 62 / 0.85) 100% ); } }