/* ══════════════════════════════════════════════════════════════════════════ Shared design system — cross-app design tokens Used by: MyTask-Manager (and future apps) Tokens only. No component selectors, no app-specific class names. Theme is switched with a data-theme attribute on : (default) ══════════════════════════════════════════════════════════════════════════ */ /* ── Dark theme (default) ─────────────────────────────────────────────── */ :root, [data-theme="dark"] { /* Typography */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Shape */ --radius: 10px; /* Base surfaces */ --bg: #0f172a; --surface: #1e293b; --surface-2: #162032; --surface-hover: #273548; --surface-active: #334155; /* Text */ --txt: #e2e8f0; --txt-strong: #f1f5f9; --txt-soft: #cbd5e1; --txt-muted: #94a3b8; --txt-subtle: #64748b; --txt-faint: #475569; /* Borders */ --border: #334155; --border-strong: #475569; /* Accent */ --accent: #6366f1; --accent-dark: #4f46e5; --accent-fg: #ffffff; --focus-ring: rgba(99, 102, 241, .15); /* Navigation / sidebar */ --sidebar-bg: #0f172a; --sidebar-txt: #94a3b8; --sidebar-logo-fg: #ffffff; --sidebar-border: rgba(255, 255, 255, .08); --sidebar-hover-bg: rgba(255, 255, 255, .08); --sidebar-hover-fg: #ffffff; --sidebar-act: #6366f1; --sidebar-act-fg: #ffffff; /* Status */ --todo: #94a3b8; --in-progress: #3b82f6; --done: #22c55e; --blocked: #ef4444; /* Priority */ --low: #4ade80; --medium: #facc15; --high: #fb923c; --critical: #f87171; /* Semantic */ --warning: #f59e0b; --danger: #ef4444; --warning-tint: rgba(245, 158, 11, .12); --danger-tint: rgba(239, 68, 68, .12); --danger-bg: #7f1d1d; --danger-fg: #fecaca; --danger-solid-bg: #b91c1c; --danger-solid-fg: #ffffff; /* Soft tone pairs — background + foreground for chips, pills and badges */ --tone-neutral-bg: #273548; --tone-neutral-fg: #cbd5e1; --tone-info-bg: #1e3a5f; --tone-info-fg: #93c5fd; --tone-mint-bg: #1c3a2a; --tone-mint-fg: #6ee7b7; --tone-success-bg: #14532d; --tone-success-fg: #86efac; --tone-warning-bg: #78350f; --tone-warning-fg: #facc15; --tone-orange-bg: #7c2d12; --tone-orange-fg: #fb923c; --tone-danger-bg: #3b1515; --tone-danger-fg: #fca5a5; --tone-danger-strong-bg: #7f1d1d; --tone-danger-strong-border: #991b1b; --tone-accent-bg: #3730a3; --tone-accent-fg: #c7d2fe; /* Alerts */ --alert-warn-bg: #78350f; --alert-warn-fg: #fde68a; --alert-warn-border: #b45309; --alert-info-bg: #1e3a5f; --alert-info-fg: #bfdbfe; --alert-info-border: #1d4ed8; --alert-success-bg: #14532d; --alert-success-fg: #bbf7d0; --alert-success-border: #15803d; /* Form controls */ --input-bg: #1e293b; --input-border: #334155; --input-fg: #f1f5f9; --textarea-bg: #273548; --textarea-border: #475569; --textarea-fg: #e2e8f0; --textarea-focus-bg: #2d3f58; /* Misc UI */ --overlay: rgba(0, 0, 0, .45); --overlay-soft: rgba(255, 255, 255, .05); --shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .06); --shadow-lg: 0 20px 40px rgba(0, 0, 0, .3); --spinner-track: rgba(255, 255, 255, .35); --spinner-head: #ffffff; --spinner-track-alt: rgba(0, 0, 0, .15); --star: #facc15; } /* ── Light theme ──────────────────────────────────────────────────────── */ [data-theme="light"] { /* Base surfaces */ --bg: #f1f5f9; --surface: #ffffff; --surface-2: #f8fafc; --surface-hover: #f1f5f9; --surface-active: #e2e8f0; /* Text */ --txt: #1e293b; --txt-strong: #0f172a; --txt-soft: #475569; --txt-muted: #64748b; --txt-subtle: #94a3b8; --txt-faint: #cbd5e1; /* Borders */ --border: #e2e8f0; --border-strong: #cbd5e1; /* Accent */ --accent: #4f46e5; --accent-dark: #4338ca; --accent-fg: #ffffff; --focus-ring: rgba(79, 70, 229, .18); /* Navigation / sidebar */ --sidebar-bg: #ffffff; --sidebar-txt: #475569; --sidebar-logo-fg: #0f172a; --sidebar-border: rgba(15, 23, 42, .08); --sidebar-hover-bg: rgba(15, 23, 42, .06); --sidebar-hover-fg: #0f172a; --sidebar-act: #4f46e5; --sidebar-act-fg: #ffffff; /* Status */ --todo: #64748b; --in-progress: #2563eb; --done: #16a34a; --blocked: #dc2626; /* Priority */ --low: #16a34a; --medium: #ca8a04; --high: #ea580c; --critical: #dc2626; /* Semantic */ --warning: #d97706; --danger: #dc2626; --warning-tint: rgba(217, 119, 6, .12); --danger-tint: rgba(220, 38, 38, .10); --danger-bg: #fee2e2; --danger-fg: #b91c1c; --danger-solid-bg: #b91c1c; --danger-solid-fg: #ffffff; /* Soft tone pairs */ --tone-neutral-bg: #f1f5f9; --tone-neutral-fg: #475569; --tone-info-bg: #dbeafe; --tone-info-fg: #1d4ed8; --tone-mint-bg: #d1fae5; --tone-mint-fg: #047857; --tone-success-bg: #dcfce7; --tone-success-fg: #15803d; --tone-warning-bg: #fef3c7; --tone-warning-fg: #92400e; --tone-orange-bg: #ffedd5; --tone-orange-fg: #c2410c; --tone-danger-bg: #fee2e2; --tone-danger-fg: #b91c1c; --tone-danger-strong-bg: #fecaca; --tone-danger-strong-border: #fca5a5; --tone-accent-bg: #e0e7ff; --tone-accent-fg: #3730a3; /* Alerts */ --alert-warn-bg: #fef3c7; --alert-warn-fg: #92400e; --alert-warn-border: #fde68a; --alert-info-bg: #dbeafe; --alert-info-fg: #1d4ed8; --alert-info-border: #bfdbfe; --alert-success-bg: #dcfce7; --alert-success-fg: #15803d; --alert-success-border: #bbf7d0; /* Form controls */ --input-bg: #ffffff; --input-border: #cbd5e1; --input-fg: #0f172a; --textarea-bg: #f8fafc; --textarea-border: #cbd5e1; --textarea-fg: #1e293b; --textarea-focus-bg: #ffffff; /* Misc UI */ --overlay: rgba(15, 23, 42, .35); --overlay-soft: rgba(15, 23, 42, .04); --shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .06); --shadow-lg: 0 20px 40px rgba(15, 23, 42, .18); --spinner-track: rgba(15, 23, 42, .15); --spinner-head: #4f46e5; --spinner-track-alt: rgba(15, 23, 42, .15); --star: #eab308; } /* ── Klubb theme (Gjøvik Lyn Gutter 2019) ───────────────────────────────── Extracted from output/static/css/style.css + resources/design_profile.md (Steg 2.1a). Real values only where the app already has one; tokens with no brand equivalent in Gjøvik Lyn's current UI (no hover/active states, no info/mint/orange chips, no shadows, no focus ring, no spinner) fall back to this file's own light-theme values or a value computed with the light theme's own formula (documented inline). See GjøvikLyn Gutter 2019/CLAUDE.md for the full extraction report. */ [data-theme="klubb"] { /* Typography — Gjøvik Lyn loads no web font, only the system stack */ --font-sans: system-ui, -apple-system, 'Segoe UI', sans-serif; /* Shape — extracted from .kort border-radius */ --radius: 12px; /* Base surfaces */ --bg: #F7F7F7; /* body background */ --surface: #FFFFFF; /* .kort background */ --surface-2: #F5F5F5; /* --color-background-secondary (stat-kort, badge-nøytral) */ --surface-hover: #F5F5F5; /* no hover state exists today; reuses --surface-2, not invented */ --surface-active: #E5E5E5; /* no active state exists today; reuses --color-border-tertiary */ /* Text */ --txt: #222222; /* body text */ --txt-strong: #111111; /* reused from --gl-black; no separate darker heading shade exists */ --txt-soft: #444444; /* .kort-tittel */ --txt-muted: #888888; /* --color-text-secondary */ --txt-subtle: #999999; /* .hero p */ --txt-faint: #CCCCCC; /* unselected .navbar-lenker a */ /* Borders */ --border: #E5E5E5; /* --color-border-tertiary */ --border-strong: #CCCCCC; /* no distinct "strong" border exists; reuses --txt-faint's grey */ /* Accent */ --accent: #C0181A; /* --gl-red */ --accent-dark: #A01416; /* --gl-red-dark (hover) */ --accent-fg: #FFFFFF; /* text/icon colour on red buttons/badges, extracted */ --focus-ring: rgba(192, 24, 26, .18); /* no focus style exists; computed as accent @ 18%, the same alpha this file's own light theme uses */ /* Navigation / sidebar — Gjøvik Lyn's dark navbar/hero/footer chrome maps onto this group */ --sidebar-bg: #111111; /* --gl-black */ --sidebar-txt: #CCCCCC; /* .navbar-lenker a */ --sidebar-logo-fg: #FFFFFF; /* .logo-navn */ --sidebar-border: rgba(255, 255, 255, .08); /* no border drawn on navbar today; inherits dark theme's own hairline-divider convention */ --sidebar-hover-bg: rgba(255, 255, 255, .08); /* no hover background today; same inherited convention */ --sidebar-hover-fg: #FFFFFF; /* .navbar-lenker a:hover */ --sidebar-act: #C0181A; /* accent reused, matches hero-badge/active markers */ --sidebar-act-fg: #FFFFFF; /* Status — Gjøvik Lyn has no kanban-style status/priority system; done/blocked reuse the real success/danger colours below, todo/in-progress/priority are inherited verbatim from this file's light theme (mechanical, unused today) */ --todo: #64748b; --in-progress: #2563eb; --done: #27500A; /* reused from badge-ok / flash-ok text */ --blocked: #A32D2D; /* reused from badge-red / flash-feil text */ --low: #16a34a; --medium: #ca8a04; --high: #ea580c; --critical: #dc2626; /* Semantic */ --warning: #8A6B00; /* badge-warning text */ --danger: #A32D2D; /* badge-red / flash-feil text */ --warning-tint: rgba(138, 107, 0, .12); /* computed: --warning @ 12%, this file's own formula */ --danger-tint: rgba(163, 45, 45, .10); /* computed: --danger @ 10%, this file's own formula */ --danger-bg: #FEECEC; /* --gl-red-light */ --danger-fg: #A32D2D; --danger-solid-bg: #C0392B; /* the separate hard-coded red used inline in treninger.html / trening_detalj.html for destructive actions and over-time warnings — a real 3rd red already in the app, distinct from --gl-red */ --danger-solid-fg: #ffffff; /* Soft tone pairs — badge-* and flash-* colours; info/mint/orange/accent chips have no Gjøvik Lyn equivalent (the app only has red/neutral/ok/warning badges) and are inherited verbatim from the light theme, unused today */ --tone-neutral-bg: #F5F5F5; /* badge-nøytral */ --tone-neutral-fg: #888888; --tone-info-bg: #dbeafe; --tone-info-fg: #1d4ed8; --tone-mint-bg: #d1fae5; --tone-mint-fg: #047857; --tone-success-bg: #EAF3DE; /* badge-ok */ --tone-success-fg: #27500A; --tone-warning-bg: #FFF4D1; /* badge-warning */ --tone-warning-fg: #8A6B00; --tone-orange-bg: #ffedd5; --tone-orange-fg: #c2410c; --tone-danger-bg: #FEECEC; /* badge-red / flash-feil */ --tone-danger-fg: #A32D2D; --tone-danger-strong-bg: #fecaca; --tone-danger-strong-border: #fca5a5; --tone-accent-bg: #e0e7ff; --tone-accent-fg: #3730a3; /* Alerts — flash-ok is a real match; flash-feil's border has no named slot in this file (kept local to Gjøvik Lyn's own style.css); warn/info have no Gjøvik Lyn flash today and are inherited verbatim */ --alert-warn-bg: #FFF4D1; --alert-warn-fg: #8A6B00; --alert-warn-border: #fde68a; --alert-info-bg: #dbeafe; --alert-info-fg: #1d4ed8; --alert-info-border: #bfdbfe; --alert-success-bg: #EAF3DE; /* .flash-ok */ --alert-success-fg: #27500A; --alert-success-border: #C3E09A; /* .flash-ok border, extracted */ /* Form controls — extracted from .skjema-gruppe input/textarea */ --input-bg: #FFFFFF; --input-border: #E5E5E5; --input-fg: #222222; --textarea-bg: #FFFFFF; --textarea-border: #E5E5E5; --textarea-fg: #222222; --textarea-focus-bg: #FFFFFF; /* no distinct focus style exists; kept identical to base rather than invented */ /* Misc UI — no modals, shadows or spinners exist in Gjøvik Lyn today; overlay is computed from the real dark chrome colour + this file's own alpha convention, the rest are inherited verbatim (mechanical, unused) */ --overlay: rgba(17, 17, 17, .35); --overlay-soft: rgba(17, 17, 17, .04); --shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .06); --shadow-lg: 0 20px 40px rgba(15, 23, 42, .18); --spinner-track: rgba(15, 23, 42, .15); --spinner-head: #C0181A; /* accent reused, so a spinner reads as brand-coloured */ --spinner-track-alt: rgba(15, 23, 42, .15); --star: #eab308; } /* Native form controls and scrollbars follow the active theme */ :root, [data-theme="dark"] { color-scheme: dark; } [data-theme="light"] { color-scheme: light; } [data-theme="klubb"] { color-scheme: light; }