/* Designtokens – ljust och mörkt läge. Ljust är standard. Mörkt används när datorn är inställd på mörkt (och man inte valt ljust), eller när man valt mörkt med växlaren (data-theme på , sparas i webbläsaren). */ :root { color-scheme: light; /* Färger */ --bg: #F4F5F2; --surface: #FFFFFF; /* fält, rutor och sådant som måste vara helt täckt */ --glass: rgba(255, 255, 255, .68); /* kort med frostat glas */ --glass-border: rgba(255, 255, 255, .9); --field-bg: #FAFAF8; --hover-bg: #F4F5F1; --text: #0E1116; --text-2: #5B6270; --text-3: #3D434D; --text-muted: #7E8591; --text-faint: #B4BAC4; --line: #E1E3DD; --line-strong: #D9DCD5; --subtle: #ECEEE9; --grid-dot: #D9DCD5; --tabs-bg: #E6E8E3; --accent: #3355FF; --accent-hover: #2645E0; --accent-tint: #3355FF14; --accent-glow: rgba(51, 85, 255, .28); --focus-ring: rgba(51, 85, 255, .14); --positive: #0B6B4A; --positive-bg: #E3F3EC; --warning: #B3380A; --warning-hover: #962F08; --warning-bg: #FDEDE4; --warning-text: #9A3412; --warning-border: #F1C9B8; /* Det mörka "framhävda" kortet (kvar att leva på, total skuld …) */ --feature-bg: #0E1116; --feature-border: #0E1116; --feature-hover: #262B33; --on-feature: #FFFFFF; --on-feature-2: #B4BAC4; --on-feature-negative: #FF8A65; /* Knappen "mörk" */ --dark: #0E1116; --dark-hover: #262B33; --on-dark: #FFFFFF; --on-dark-2: #B4BAC4; /* Diagram: validerade för färgblindhet mot ytan (dataviz-riktlinjerna) */ --seg-costs: var(--accent); --seg-loans: #EB6834; --seg-savings: #1BAF7A; --chart-crosshair: #9BA1AB; /* Bakgrundsglöd */ --aurora-1: rgba(51, 85, 255, .16); --aurora-2: rgba(27, 175, 122, .12); --aurora-3: rgba(124, 58, 237, .10); /* Skuggor ger djup */ --shadow-card: 0 1px 2px rgba(14, 17, 22, .04), 0 8px 24px -12px rgba(14, 17, 22, .10); --shadow-lift: 0 2px 4px rgba(14, 17, 22, .05), 0 24px 48px -20px rgba(14, 17, 22, .22); --shadow-pop: 0 24px 64px rgba(14, 17, 22, .18); --backdrop: rgba(14, 17, 22, .35); --tour-dim: rgba(14, 17, 22, .55); /* rundturen tonar ned allt utom det som visas */ /* Typsnitt */ --font-sans: 'Sora', 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; /* Radier */ --r-sm: 12px; --r-md: 14px; --r-card-sm: 20px; --r-card: 24px; --r-card-lg: 28px; --r-pill: 999px; /* Mått */ --sidebar-w: 264px; --header-h: 104px; --gutter: 56px; --status-bar: #07090D; /* bakom iPhones statusfält i appläge, mörkt så att den vita texten syns i båda temana */ /* Rörelse */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); } /* ---------- Mörkt läge ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #07090D; --surface: #12161E; --glass: rgba(18, 22, 30, .62); --glass-border: rgba(255, 255, 255, .07); --field-bg: rgba(255, 255, 255, .04); --hover-bg: rgba(255, 255, 255, .045); --text: #E9ECF2; --text-2: #99A2B1; --text-3: #C4CAD5; --text-muted: #7C8595; --text-faint: #465061; --line: rgba(255, 255, 255, .08); --line-strong: rgba(255, 255, 255, .14); --subtle: rgba(255, 255, 255, .07); --grid-dot: rgba(255, 255, 255, .07); --tabs-bg: rgba(255, 255, 255, .06); --accent: #5E7EFF; --accent-hover: #7A94FF; --accent-tint: rgba(94, 126, 255, .16); --accent-glow: rgba(94, 126, 255, .45); --focus-ring: rgba(94, 126, 255, .28); --positive: #3DD68C; --positive-bg: rgba(61, 214, 140, .12); --warning: #FF8A5B; --warning-hover: #FF9F78; --warning-bg: rgba(255, 138, 91, .12); --warning-text: #FFB08F; --warning-border: rgba(255, 138, 91, .35); --feature-bg: linear-gradient(145deg, #1A2150 0%, #10142A 55%, #0B0E1A 100%); --feature-border: rgba(94, 126, 255, .35); --feature-hover: #1A2150; --on-feature: #FFFFFF; --on-feature-2: #A9B3D6; --on-feature-negative: #FF9B7A; --dark: #E9ECF2; --dark-hover: #FFFFFF; --on-dark: #07090D; --on-dark-2: #A9B3D6; --seg-loans: #D95926; --seg-savings: #199E70; --chart-crosshair: #6B7385; --aurora-1: rgba(94, 126, 255, .30); --aurora-2: rgba(25, 158, 112, .16); --aurora-3: rgba(139, 92, 246, .22); --shadow-card: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 12px 32px -16px rgba(0, 0, 0, .8); --shadow-lift: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 28px 56px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(94, 126, 255, .18); --shadow-pop: 0 24px 64px rgba(0, 0, 0, .7); --backdrop: rgba(0, 0, 0, .6); --tour-dim: rgba(0, 0, 0, .75); } } :root[data-theme="dark"] { color-scheme: dark; --bg: #07090D; --surface: #12161E; --glass: rgba(18, 22, 30, .62); --glass-border: rgba(255, 255, 255, .07); --field-bg: rgba(255, 255, 255, .04); --hover-bg: rgba(255, 255, 255, .045); --text: #E9ECF2; --text-2: #99A2B1; --text-3: #C4CAD5; --text-muted: #7C8595; --text-faint: #465061; --line: rgba(255, 255, 255, .08); --line-strong: rgba(255, 255, 255, .14); --subtle: rgba(255, 255, 255, .07); --grid-dot: rgba(255, 255, 255, .07); --tabs-bg: rgba(255, 255, 255, .06); --accent: #5E7EFF; --accent-hover: #7A94FF; --accent-tint: rgba(94, 126, 255, .16); --accent-glow: rgba(94, 126, 255, .45); --focus-ring: rgba(94, 126, 255, .28); --positive: #3DD68C; --positive-bg: rgba(61, 214, 140, .12); --warning: #FF8A5B; --warning-hover: #FF9F78; --warning-bg: rgba(255, 138, 91, .12); --warning-text: #FFB08F; --warning-border: rgba(255, 138, 91, .35); --feature-bg: linear-gradient(145deg, #1A2150 0%, #10142A 55%, #0B0E1A 100%); --feature-border: rgba(94, 126, 255, .35); --feature-hover: #1A2150; --on-feature: #FFFFFF; --on-feature-2: #A9B3D6; --on-feature-negative: #FF9B7A; --dark: #E9ECF2; --dark-hover: #FFFFFF; --on-dark: #07090D; --on-dark-2: #A9B3D6; --seg-loans: #D95926; --seg-savings: #199E70; --chart-crosshair: #6B7385; --aurora-1: rgba(94, 126, 255, .30); --aurora-2: rgba(25, 158, 112, .16); --aurora-3: rgba(139, 92, 246, .22); --shadow-card: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 12px 32px -16px rgba(0, 0, 0, .8); --shadow-lift: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 28px 56px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(94, 126, 255, .18); --shadow-pop: 0 24px 64px rgba(0, 0, 0, .7); --backdrop: rgba(0, 0, 0, .6); --tour-dim: rgba(0, 0, 0, .75); }