/* Färg- och designtokens — ljust läge är standard, mörkt läge slås på via [data-theme="dark"] på */ :root { /* Ytor */ --bg-primary: #ffffff; --bg-surface: #f2f5f8; --bg-surface-hover: #e6eaf0; --border-color: #d9e1e8; /* Text */ --text-primary: #15181a; --text-secondary: #65676b; --text-tertiary: #8a8d91; /* Accent (Mastodons signaturlila) */ --accent: #6364ff; --accent-hover: #5246e5; --accent-contrast: #ffffff; /* Semantik */ --danger: #d92345; --link-color: var(--accent); --code-bg: #eef0f2; --blockquote-border: var(--accent); /* Form */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --shadow-card: 0 1px 3px rgba(15, 24, 33, 0.08); /* Typografi */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } [data-theme="dark"] { /* Ytor */ --bg-primary: #1e2028; --bg-surface: #282c37; --bg-surface-hover: #313543; --border-color: #393f4f; /* Text */ --text-primary: #ffffff; --text-secondary: #9baec8; --text-tertiary: #717891; /* Accent — något ljusare i mörkt läge för bättre kontrast */ --accent: #7b7cff; --accent-hover: #9495ff; --accent-contrast: #ffffff; /* Semantik */ --danger: #ff6b81; --code-bg: #282c37; --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4); }