/* ══════════════════════════════════════════════════════════════════════
Lintex Design System v1 — Tokens
══════════════════════════════════════════════════════════════════════
Single source of truth för färger, spacing, typografi, radii,
shadows, motion, och chart-paletter.
Alla appar i Lintex-stacken ska länka till denna fil i :
Aktuell källa: design system showcase på /design/
Versionerat via git — granska commit-historik för förändringar.
När värdena uppdateras här propagerar de till alla appar vid nästa
deploy. Inga app-specifika overrides behövs eftersom alla använder
samma var()-namn.
FAS 1 klar 2026-04-27 (denna fil skapad).
FAS 2 (portal-familjen länkar till denna) — pågår.
FAS 3 (PIM theme.js refaktor) — kommer senare.
══════════════════════════════════════════════════════════════════════ */
:root,
:root[data-theme="light"] {
/* ── Neutrals — Zinc palette (varm neutral) ──────────────────────── */
--zinc-50: #fafafa;
--zinc-100: #f4f4f5;
--zinc-200: #e4e4e7;
--zinc-300: #d4d4d8;
--zinc-400: #a1a1aa;
--zinc-500: #71717a;
--zinc-600: #52525b;
--zinc-700: #3f3f46;
--zinc-800: #27272a;
--zinc-900: #18181b;
--zinc-950: #09090b;
/* ── Brand — Lintex green ────────────────────────────────────────── */
--green: #0d6648;
--green-hi: #10b981;
--green-lo: #064e37;
--green-bg: rgba(13,102,72,.08);
/* ── Semantic colors ─────────────────────────────────────────────── */
--amber: #d97706;
--amber-bg: rgba(217,119,6,.08);
--red: #dc2626;
--red-bg: rgba(220,38,38,.08);
--blue: #2563eb;
--blue-bg: rgba(37,99,235,.08);
/* ── Surfaces ────────────────────────────────────────────────────── */
--bg: #fafafa;
--bg-raised: #ffffff;
--bg-sunken: #f4f4f5;
--bg-subtle: #f4f4f5; /* alias för bg-sunken — bakåtkompat */
--bg-wash: #fafafa; /* alias för bg — bakåtkompat */
--border: #e4e4e7;
--border-md: #d4d4d8;
--hover: #f4f4f5;
--active: #e4e4e7;
/* ── Text ────────────────────────────────────────────────────────── */
--text: #18181b;
--text-2: #52525b;
--text-3: #71717a;
--text-muted: #a1a1aa;
--text-on-primary: #ffffff;
/* ── Spacing — 4px grid ──────────────────────────────────────────── */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
--sp-12: 48px;
/* ── Typography scale ────────────────────────────────────────────── */
--text-2xs: 10px; /* micro-text: count badges, group rubriker uppercase */
--text-xs: 11px;
--text-sm: 12px;
--text-base: 13px;
--text-md: 14px;
--text-lg: 18px;
--text-xl: 24px;
--text-hero: 32px;
/* ── Radii ───────────────────────────────────────────────────────── */
--radius-sm: 4px;
--radius: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 99px;
/* ── Shadows ─────────────────────────────────────────────────────── */
--shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
--shadow-md: 0 4px 8px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
--shadow-lg: 0 16px 32px rgba(0,0,0,.10), 0 8px 16px rgba(0,0,0,.06);
/* ── Motion ──────────────────────────────────────────────────────── */
--easing: cubic-bezier(.4, 0, .2, 1);
--duration-fast: 120ms;
--duration-normal: 200ms;
--duration-slow: 400ms;
/* ── Chart palette — kategoriska serier ──────────────────────────── */
--chart-1: #0d6648; /* Lintex green — primary */
--chart-2: #2563eb; /* blue */
--chart-3: #d97706; /* amber */
--chart-4: #7c3aed; /* purple */
--chart-5: #db2777; /* pink */
--chart-6: #0891b2; /* cyan */
--chart-7: #65a30d; /* lime */
--chart-8: #71717a; /* neutral fallback */
--chart-accent-light: #a7d4bd; /* Lintex-mint — för 2:a serien i minimal-mode */
--chart-grid: rgba(0,0,0,.06);
--chart-axis: var(--text-3);
--chart-tooltip-bg: var(--text);
--chart-tooltip-fg: var(--text-on-primary);
}
/* ══════════════════════════════════════════════════════════════════════
Dark mode — auto via prefers-color-scheme + explicit via data-theme
══════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
/* Brand — slightly brighter i dark */
--green: #10b981;
--green-hi: #34d399;
--green-lo: #059669;
--green-bg: rgba(16,185,129,.12);
--amber: #f59e0b;
--amber-bg: rgba(245,158,11,.12);
--red: #f87171;
--red-bg: rgba(248,113,113,.12);
--blue: #60a5fa;
--blue-bg: rgba(96,165,250,.12);
--bg: #09090b;
--bg-raised: #18181b;
--bg-sunken: #18181b;
--bg-subtle: #18181b;
--bg-wash: #09090b;
--border: #27272a;
--border-md: #3f3f46;
--hover: #27272a;
--active: #3f3f46;
--text: #fafafa;
--text-2: #a1a1aa;
--text-3: #71717a;
--text-muted: #52525b;
--text-on-primary: #ffffff;
/* Shadows — något starkare i dark för att synas */
--shadow-sm: 0 1px 2px rgba(0,0,0,.20), 0 1px 3px rgba(0,0,0,.30);
--shadow-md: 0 4px 8px rgba(0,0,0,.30), 0 2px 4px rgba(0,0,0,.20);
--shadow-lg: 0 16px 32px rgba(0,0,0,.40), 0 8px 16px rgba(0,0,0,.25);
/* Charts dark */
--chart-1: #10b981;
--chart-2: #60a5fa;
--chart-3: #f59e0b;
--chart-4: #a78bfa;
--chart-5: #f472b6;
--chart-6: #22d3ee;
--chart-7: #a3e635;
--chart-8: #a1a1aa;
--chart-grid: rgba(255,255,255,.08);
--chart-tooltip-bg: var(--bg-raised);
--chart-tooltip-fg: var(--text);
}
}
:root[data-theme="dark"] {
--green: #10b981;
--green-hi: #34d399;
--green-lo: #059669;
--green-bg: rgba(16,185,129,.12);
--amber: #f59e0b;
--amber-bg: rgba(245,158,11,.12);
--red: #f87171;
--red-bg: rgba(248,113,113,.12);
--blue: #60a5fa;
--blue-bg: rgba(96,165,250,.12);
--bg: #09090b;
--bg-raised: #18181b;
--bg-sunken: #18181b;
--bg-subtle: #18181b;
--bg-wash: #09090b;
--border: #27272a;
--border-md: #3f3f46;
--hover: #27272a;
--active: #3f3f46;
--text: #fafafa;
--text-2: #a1a1aa;
--text-3: #71717a;
--text-muted: #52525b;
--text-on-primary: #ffffff;
--shadow-sm: 0 1px 2px rgba(0,0,0,.20), 0 1px 3px rgba(0,0,0,.30);
--shadow-md: 0 4px 8px rgba(0,0,0,.30), 0 2px 4px rgba(0,0,0,.20);
--shadow-lg: 0 16px 32px rgba(0,0,0,.40), 0 8px 16px rgba(0,0,0,.25);
--chart-1: #10b981;
--chart-2: #60a5fa;
--chart-3: #f59e0b;
--chart-4: #a78bfa;
--chart-5: #f472b6;
--chart-6: #22d3ee;
--chart-7: #a3e635;
--chart-8: #a1a1aa;
--chart-accent-light: #86bfa7; /* Mörkare mint för dark theme */
--chart-grid: rgba(255,255,255,.08);
--chart-tooltip-bg: var(--bg-raised);
--chart-tooltip-fg: var(--text);
}
/* ══════════════════════════════════════════════════════════════════════
Global tabell-wrapper — för custom -element i PIM/Portal
Matchar showcase .table-wrap pattern i lintex-portal/design/design.css
══════════════════════════════════════════════════════════════════════ */
.table-wrap {
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
background: var(--bg-raised);
}
.table-wrap table {
width: 100%;
border-collapse: collapse;
}
.table-wrap thead {
background: var(--bg-sunken);
}
.table-wrap thead th {
padding: 10px 14px;
font-size: var(--text-2xs);
color: var(--text-3);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
border-bottom: 1px solid var(--border);
text-align: left;
}
.table-wrap td {
padding: 10px 14px;
border-bottom: 1px solid var(--border);
font-size: var(--text-sm);
color: var(--text);
}
.table-wrap tbody tr:hover td {
background: var(--hover);
}
.table-wrap tbody tr:last-child td {
border-bottom: none;
}
.table-wrap.sticky {
overflow-y: auto;
}
.table-wrap.sticky thead {
position: sticky;
top: 0;
z-index: 1;
}
.table-wrap.sticky thead th {
background: var(--bg-sunken);
}