/*
 * orca.people — design tokens "Signal-Kontor" (ported from Tessera V2)
 *
 * Every colour in the client comes from this file. Light values live on
 * :root, dark values on [data-theme="dark"] (set on <html> by js/lib/theme.js
 * and by the inline bootstrap script in index.html before first paint).
 *
 * The product hue (--hue-orca, teal) goes on icons, active bars, count badges
 * and tags only, never as a fill. Status colours (ok / critical / warn) mark
 * state, never decoration. Chart colours come from --chart-1 … --chart-10.
 *
 * The second block maps the legacy variable names (--bg-*, --text-*,
 * --accent-*, --border-color) and the Bootstrap variables (--bs-*) onto these
 * tokens so page modules that are not migrated yet render in both themes.
 */

:root {
    /* Surfaces */
    --ground: #f3f5f8;
    --surface: #ffffff;
    --raised: #f8fafc;
    --hairline: #dde3ea;

    /* Text */
    --text: #141a22;
    --text-2: #4b5563;
    --caption: #6b7280;

    /* Primary action (buttons) */
    --action: #141a22;
    --action-text: #ffffff;
    --action-hover: #23303f;

    /* Product hue */
    --hue-orca: #0f9d8f;

    /* Status */
    --ok: #15803d;
    --critical: #b91c1c;
    --warn: #b45309;
    --info: #0369a1;

    /* Chart palette (first entry = product hue) */
    --chart-1: #0f9d8f;
    --chart-2: #0369a1;
    --chart-3: #b45309;
    --chart-4: #6d28d9;
    --chart-5: #be185d;
    --chart-6: #4d7c0f;
    --chart-7: #c2410c;
    --chart-8: #475569;
    --chart-9: #0e7490;
    --chart-10: #a21caf;

    /* Derived (kept here so nothing else invents colours) */
    --rail-bg: var(--surface);
    --rail-border: var(--hairline);
    --card-border: var(--hairline);
    --hover: color-mix(in srgb, var(--text) 6%, transparent);
    --hover-strong: color-mix(in srgb, var(--text) 10%, transparent);
    --focus: var(--text);
    --overlay: rgba(20, 26, 34, 0.45);
    --shadow: 0 8px 24px rgba(20, 26, 34, 0.10);
    --shadow-lg: 0 16px 48px rgba(20, 26, 34, 0.18);
    --on-status: #ffffff;

    /* Type */
    --font-display: 'Space Grotesk', system-ui, sans-serif;
    --font-body: 'Instrument Sans', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --fs-title: 28px;
    --fs-card-title: 15px;
    --fs-body: 13px;
    --fs-caption: 12px;
    --fs-count: 26px;

    /* Radii */
    --r-control: 8px;
    --r-card: 10px;

    /* Layout */
    --rail-w: 232px;
    --topbar-h: 52px;
    --gutter: 28px;

    /* Control heights */
    --h-sm: 28px;
    --h-md: 36px;
    --h-lg: 44px;

    color-scheme: light;
}

[data-theme="dark"] {
    --ground: #0e1014;
    --surface: #161920;
    --raised: #1d222b;
    --hairline: #262c36;

    --text: #f2f4f7;
    --text-2: #a3adba;
    --caption: #8b95a3;

    --action: #f2f4f7;
    --action-text: #141a22;
    --action-hover: #d9dee6;

    --hue-orca: #2dd4bf;

    --ok: #22c55e;
    --critical: #ef4444;
    --warn: #f59e0b;
    --info: #38bdf8;

    --chart-1: #2dd4bf;
    --chart-2: #38bdf8;
    --chart-3: #fbbf24;
    --chart-4: #a78bfa;
    --chart-5: #f472b6;
    --chart-6: #a3e635;
    --chart-7: #ff7a5c;
    --chart-8: #94a3b8;
    --chart-9: #22d3ee;
    --chart-10: #e879f9;

    --rail-bg: #0b0d11;
    --rail-border: transparent;
    --card-border: transparent;
    --hover: color-mix(in srgb, var(--text) 8%, transparent);
    --hover-strong: color-mix(in srgb, var(--text) 12%, transparent);
    --overlay: rgba(0, 0, 0, 0.6);
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
    --on-status: #0e1014;

    color-scheme: dark;
}

/* =====================================================
   Legacy aliases
   Unmigrated page modules, templates and employee-table.js reference these
   names (inline styles included). They resolve to tokens in both themes.
   ===================================================== */
:root,
[data-theme="dark"] {
    --bg-primary: var(--ground);
    --bg-secondary: var(--surface);
    --bg-tertiary: var(--raised);
    --bg-hover: var(--hover);
    --bg-surface: var(--surface);
    --text-primary: var(--text);
    --text-secondary: var(--text-2);
    --text-muted: var(--caption);
    --border-color: var(--hairline);
    --border: var(--hairline);

    --accent-teal: var(--hue-orca);
    --accent-blue: var(--info);
    --accent-green: var(--ok);
    --accent-red: var(--critical);
    --accent-yellow: var(--warn);
    --accent-purple: var(--chart-4);
    --accent-orange: var(--chart-7);

    /* Bootstrap 5: override both themes so data-bs-theme can follow data-theme */
    --bs-body-bg: var(--ground);
    --bs-body-color: var(--text);
    --bs-secondary-bg: var(--surface);
    --bs-tertiary-bg: var(--raised);
    --bs-secondary-color: var(--text-2);
    --bs-tertiary-color: var(--caption);
    --bs-border-color: var(--hairline);
    --bs-border-color-translucent: var(--hairline);
    --bs-emphasis-color: var(--text);
    --bs-heading-color: var(--text);
    --bs-link-color: var(--hue-orca);
    --bs-link-hover-color: var(--text);
    --bs-link-color-rgb: 15, 157, 143;
    --bs-link-hover-color-rgb: 20, 26, 34;
    --bs-code-color: var(--chart-4);
    --bs-body-font-family: var(--font-body);
    --bs-body-font-size: 13px;
    --bs-border-radius: var(--r-control);
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: var(--r-card);
    --bs-form-control-bg: var(--surface);
    --bs-form-control-disabled-bg: var(--raised);

    --bs-primary: var(--hue-orca);
    --bs-primary-rgb: 15, 157, 143;
    --bs-secondary: var(--text-2);
    --bs-secondary-rgb: 75, 85, 99;
    --bs-success: var(--ok);
    --bs-success-rgb: 21, 128, 61;
    --bs-danger: var(--critical);
    --bs-danger-rgb: 185, 28, 28;
    --bs-warning: var(--warn);
    --bs-warning-rgb: 180, 83, 9;
    --bs-info: var(--info);
    --bs-info-rgb: 3, 105, 161;
    --bs-light: var(--raised);
    --bs-dark: var(--text);

    --bs-primary-text-emphasis: var(--hue-orca);
    --bs-success-text-emphasis: var(--ok);
    --bs-danger-text-emphasis: var(--critical);
    --bs-warning-text-emphasis: var(--warn);
    --bs-info-text-emphasis: var(--info);
    --bs-primary-bg-subtle: color-mix(in srgb, var(--hue-orca) 12%, transparent);
    --bs-success-bg-subtle: color-mix(in srgb, var(--ok) 12%, transparent);
    --bs-danger-bg-subtle: color-mix(in srgb, var(--critical) 12%, transparent);
    --bs-warning-bg-subtle: color-mix(in srgb, var(--warn) 12%, transparent);
    --bs-info-bg-subtle: color-mix(in srgb, var(--info) 12%, transparent);
    --bs-primary-border-subtle: color-mix(in srgb, var(--hue-orca) 35%, transparent);
    --bs-success-border-subtle: color-mix(in srgb, var(--ok) 35%, transparent);
    --bs-danger-border-subtle: color-mix(in srgb, var(--critical) 35%, transparent);
    --bs-warning-border-subtle: color-mix(in srgb, var(--warn) 35%, transparent);
    --bs-info-border-subtle: color-mix(in srgb, var(--info) 35%, transparent);

    --bs-gray-400: var(--caption);
    --bs-gray-600: var(--text-2);
}

[data-theme="dark"] {
    --bs-link-color-rgb: 45, 212, 191;
    --bs-link-hover-color-rgb: 242, 244, 247;
    --bs-primary-rgb: 45, 212, 191;
    --bs-secondary-rgb: 163, 173, 186;
    --bs-success-rgb: 34, 197, 94;
    --bs-danger-rgb: 239, 68, 68;
    --bs-warning-rgb: 245, 158, 11;
    --bs-info-rgb: 56, 189, 248;
}