/* ============================================================================
   trinsik.css — the Brain in the Trinsik design system (decision Marcel 04.10.2026)
   Loaded after vlabs.css. Same layout, Trinsik tokens: Air ground, Soft Black ink, Senf once per surface,
   Suisse Intl (UI) · Suisse Intl Mono (data) · GT Alpina (key figures, statements), sharp corners
   (pills only for status chips, tags and filters), no shadows, hairlines in warm/light grey.
   Light (Air) is the default; dark is the Soft Black inverse. Remove this <link> to roll back.
   Source: Claude Design "Trinsik Design System migrated" (tokens.json, colors_and_type.css).
   ============================================================================ */

@font-face { font-family: 'Suisse Intl'; src: url('../fonts/trinsik/SuisseIntl-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Suisse Intl'; src: url('../fonts/trinsik/SuisseIntl-RegularIt.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Suisse Intl'; src: url('../fonts/trinsik/SuisseIntl-Medium.woff2') format('woff2'); font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Suisse Intl Mono'; src: url('../fonts/trinsik/SuisseIntlMono-Regular-WebS.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'GT Alpina'; src: url('../fonts/trinsik/GT-Alpina-Standard-Thin.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'GT Alpina'; src: url('../fonts/trinsik/GT-Alpina-Standard-Light.woff2') format('woff2'); font-weight: 300 400; font-style: normal; font-display: swap; }

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root {
    --font-sans: 'Suisse Intl', 'Albert Sans', 'Helvetica Neue', system-ui, sans-serif;
    --font-mono: 'Suisse Intl Mono', 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
    --font-serif: 'GT Alpina', 'Newsreader', Georgia, serif;
    --vlabs-indigo: #DDCE00;           /* Senf */
    --vlabs-indigo-dim: #C9BB00;
    --vlabs-accent-ink: #262623;
    /* dark = Soft Black inverse */
    --tk-black: 31 31 29;     --tk-red: 205 112 31;   --tk-indigo: 221 206 0;   --tk-gray: 248 248 246;
    --tk-dark: 38 38 35;      --tk-surface: 46 46 42; --tk-border: 70 70 65;    --tk-muted: 190 189 174;
    --tk-ink: 248 248 246;    --tk-secondary: 214 213 203;
    --tk-card: 46 46 42;      --tk-subtle: 38 38 35;  --tk-line: 62 62 57;
    --tk-field: 31 31 29;     --tk-field-border: 190 189 174;
    --tk-accent-text: 221 206 0; --tk-accent-tint: 221 206 0; --tk-accent-tint-ink: 38 38 35;
    --tk-chip: 62 62 57;      --tk-chip-ink: 248 248 246;
    --tk-ok-bg: 62 62 57;     --tk-ok-ink: 196 192 140;
    --tk-warn-bg: 62 62 57;   --tk-warn-ink: 230 150 80;
    --tk-bad-bg: 205 112 31;  --tk-bad-ink: 38 38 35;
}
[data-theme="light"] {
    --tk-black: 248 248 246;  --tk-red: 205 112 31;   --tk-indigo: 221 206 0;   --tk-gray: 38 38 35;
    --tk-dark: 248 248 246;   --tk-surface: 255 255 255; --tk-border: 232 232 227; --tk-muted: 109 110 112;
    --tk-ink: 38 38 35;       --tk-secondary: 82 82 78;
    --tk-card: 255 255 255;   --tk-subtle: 232 232 227; --tk-line: 232 232 227;
    --tk-field: 255 255 255;  --tk-field-border: 38 38 35;
    --tk-accent-text: 38 38 35; --tk-accent-tint: 221 206 0; --tk-accent-tint-ink: 38 38 35;
    --tk-chip: 232 232 227;   --tk-chip-ink: 38 38 35;
    --tk-ok-bg: 232 232 227;  --tk-ok-ink: 100 97 67;     /* dark green = approval */
    --tk-warn-bg: 232 232 227; --tk-warn-ink: 97 74 55;   /* dark terra */
    --tk-bad-bg: 205 112 31;  --tk-bad-ink: 38 38 35;     /* terra fill = alert, always with a word */
}

/* the light-theme hex overrides in vlabs.css, re-pointed to Trinsik */
[data-theme="light"] body,
[data-theme="light"] .bg-vlabs-dark  { background-color: #F8F8F6 !important; }
[data-theme="light"] .bg-vlabs-surface { background-color: #FFFFFF !important; }
[data-theme="light"] .bg-vlabs-black { background-color: #F8F8F6 !important; }
[data-theme="light"] .bg-vlabs-dark\/80 { background-color: rgba(248, 248, 246, 0.92) !important; }
[data-theme="light"] .border-vlabs-border { border-color: #E8E8E3 !important; }
[data-theme="light"] .divide-vlabs-border > :not([hidden]) ~ :not([hidden]) { border-color: #E8E8E3 !important; }
[data-theme="light"] .bg-vlabs-border { background-color: #E8E8E3 !important; }
[data-theme="light"] .text-white { color: #262623 !important; }
[data-theme="light"] .text-vlabs-indigo { color: #262623 !important; }
[data-theme="light"] .text-vlabs-red { color: #A85A16 !important; }        /* terra, darkened for small text */
[data-theme="light"] input:focus, [data-theme="light"] select:focus, [data-theme="light"] textarea:focus { border-color: #262623; }
[data-theme="light"] ::-webkit-scrollbar-track { background: #F8F8F6; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #BEBDAE; }
[data-theme="light"] * { scrollbar-color: #BEBDAE #F8F8F6; }
.bg-vlabs-ink { background-color: rgb(var(--tk-ink)) !important; }
.border-vlabs-ink { border-color: rgb(var(--tk-ink)) !important; }
.text-vlabs-red { color: rgb(var(--tk-red)); }
.border-vlabs-red { border-color: rgb(var(--tk-red)) !important; }

/* ── type ───────────────────────────────────────────────────────────────── */
body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-sans); font-weight: 500; letter-spacing: -0.01em; }
.font-semibold, .font-bold, b, strong { font-weight: 500 !important; }   /* Suisse has 400 and 500; Tailwind loads later */
.font-light { font-family: var(--font-serif); font-weight: 300; letter-spacing: -0.02em; }
.font-mono, .tk-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tk-num.text-2xl, .tk-num.text-3xl, .tk-kpi { font-family: var(--font-serif); font-weight: 300; letter-spacing: -0.02em; }
.tk-serif { font-family: var(--font-serif); font-weight: 300; }
.tk-eyebrow, .tk-nav-group {
    font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: 0.12em;
    text-transform: uppercase; color: rgb(var(--tk-muted));
}
.tk-nav-group { font-size: 11px; }
::selection { background: #DDCE00; color: #262623; }

/* ── shape: sharp, flat ─────────────────────────────────────────────────── */
.tk-card, .tk-card-raised, .tk-panel, .tk-passage, .tk-field, textarea.tk-field, .tk-btn, .tk-btn-lg, .tk-nav-item,
.tk-prose blockquote, .tk-prose pre, .tk-prose code { border-radius: 0 !important; box-shadow: none !important; }
.tk-card, .tk-card-raised { border-color: rgb(var(--tk-border)); }
.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl { box-shadow: none !important; }

/* pills stay round: status chips, category tags, filters (DS radius-pill) */
.tk-pill, .tk-chip { border-radius: 999px; border-color: rgb(var(--tk-border)); }
[data-theme="light"] .tk-pill, [data-theme="light"] .tk-chip { border-color: #BEBDAE; }
.tk-pill[aria-selected="true"], .tk-chip.tk-pill-ink { background: rgb(var(--tk-ink)); border-color: rgb(var(--tk-ink)); color: rgb(var(--tk-dark)); font-weight: 500; }
.tk-tag {
    border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 500;
    letter-spacing: 0.06em; text-transform: uppercase;
}
.tk-tag-gold { background: #DDCE00; color: #262623; }

/* ── controls ───────────────────────────────────────────────────────────── */
.tk-btn { font-weight: 500; letter-spacing: 0.02em; }
.tk-btn-ink { background: rgb(var(--tk-ink)); color: rgb(var(--tk-dark)); }
.tk-btn-gold { background: #DDCE00; color: #262623; }
.tk-btn-gold:hover { background: #C9BB00; }
.tk-btn-outline { border-color: rgb(var(--tk-ink)); }
.tk-btn-outline:hover { background: rgb(var(--tk-ink)); color: rgb(var(--tk-dark)); }
.tk-btn-outline[aria-pressed="true"] { background: #DDCE00; border-color: #DDCE00; color: #262623; }
.tk-btn:focus-visible, .tk-pill:focus-visible, .tk-nav-item:focus-visible, .tk-chip:focus-visible, a:focus-visible {
    outline: 1px solid rgb(var(--tk-ink)); outline-offset: 2px;
}
.tk-field:focus, [data-theme="light"] .tk-field:focus { border-color: rgb(var(--tk-ink)); box-shadow: none; outline: 1px solid rgb(var(--tk-ink)); outline-offset: 2px; }

/* ── sidebar: Senf only on the active item ──────────────────────────────── */
.tk-nav-item { color: rgb(var(--tk-ink)); }
.tk-nav-item[aria-current="page"] { background: #DDCE00; color: #262623; font-weight: 500; }
.tk-nav-item[aria-current="page"] .tk-nav-icon { color: #262623; }
.tk-brand-logo { display: block; height: 18px; width: auto; }
.tk-brand-logo--light { display: none; }
:root:not([data-theme="light"]) .tk-brand-logo--dark { display: none; }
:root:not([data-theme="light"]) .tk-brand-logo--light { display: block; }

/* avatars are square in the Trinsik system (people photos and initials) */
.tk-avatar { border-radius: 0 !important; }

/* key figures (KPI tiles: tk-num at 24 px and up) in GT Alpina Light */
.tk-num:is(.text-2xl, .text-3xl, .text-4xl, .text-5xl, [class*="text-[2"], [class*="text-[3"], [class*="text-[4"], [class*="text-[5"]) {
    font-family: var(--font-serif); font-weight: 300; letter-spacing: -0.02em;
}