/*
 * orca.teams — design tokens "Signal-Kontor" (ported from orca.people, same family)
 *
 * 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, violet for orca.teams) 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: #7c3aed;

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

    /* Chart palette: orca.people order with violet (product hue) and teal swapped */
    --chart-1: #7c3aed;
    --chart-2: #0369a1;
    --chart-3: #b45309;
    --chart-4: #0f9d8f;
    --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: #a78bfa;

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

    --chart-1: #a78bfa;
    --chart-2: #38bdf8;
    --chart-3: #fbbf24;
    --chart-4: #2dd4bf;
    --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 components 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: 124, 58, 237;
    --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: 124, 58, 237;
    --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: 167, 139, 250;
    --bs-link-hover-color-rgb: 242, 244, 247;
    --bs-primary-rgb: 167, 139, 250;
    --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;
}

/* =====================================================
   Inline SVG images (form controls, close button)
   CSS cannot feed var() into a data: URI, so the stroke colours live here
   next to the palette they come from, per theme.
   ===================================================== */
:root {
    --img-select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
    --img-close: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-width='1.75' d='M4 4l8 8M12 4l-8 8'/%3e%3c/svg%3e");
    --img-switch-off: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%236b7280'/%3e%3c/svg%3e");
    --img-switch-on: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
    --img-check-on: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    --img-radio-on: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23ffffff'/%3e%3c/svg%3e");
}

[data-theme="dark"] {
    --img-select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238b95a3' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
    --img-close: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238b95a3' stroke-linecap='round' stroke-width='1.75' d='M4 4l8 8M12 4l-8 8'/%3e%3c/svg%3e");
    --img-switch-off: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238b95a3'/%3e%3c/svg%3e");
    --img-switch-on: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23141a22'/%3e%3c/svg%3e");
    --img-check-on: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23141a22' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    --img-radio-on: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23141a22'/%3e%3c/svg%3e");
}

/* Microsoft sign-in logo (brand colours, login button only) */
:root {
    --ms-logo-1: #f25022;
    --ms-logo-2: #7fba00;
    --ms-logo-3: #00a4ef;
    --ms-logo-4: #ffb900;
}