/*
 * Tekla MCP Hub — design tokens (shared with Tekla Support, ../tekla-answers/design)
 * Source of truth for color, type, spacing, radius, elevation and motion.
 *
 * Three layers:
 *   1. Primitives   (--gray-500, --blue-600 …)       never use directly in components
 *   2. Semantic     (--color-text, --color-border …)  use these in components
 *   3. Domain       (--status-open-fg, --impact-blocked-bg …) ticket / page states
 *
 * Theming: light by default, dark via OS preference or [data-theme="dark"] on <html>.
 * [data-theme="light"] forces light even when the OS is dark.
 */

/* ------------------------------------------------------------------ */
/* 1. Primitives                                                       */
/* ------------------------------------------------------------------ */
:root {
  /* Neutral — cool zinc gray. Carries 90% of the UI. */
  --gray-0: #ffffff;
  --gray-25: #fcfcfd;
  --gray-50: #f8f8f9;
  --gray-100: #f1f1f3;
  --gray-150: #eaeaed;
  --gray-200: #e3e3e7;
  --gray-300: #d2d2d8;
  --gray-400: #a1a1aa;
  --gray-500: #71717a;
  --gray-600: #52525b;
  --gray-700: #3f3f46;
  --gray-800: #27272a;
  --gray-850: #1e1e21;
  --gray-900: #18181b;
  --gray-925: #141416;
  --gray-950: #0e0e10;

  /* Blue — the single accent: links, focus, selection, "open" */
  --blue-50: #eef3ff;
  --blue-100: #dde7ff;
  --blue-200: #c0d3ff;
  --blue-300: #93b2ff;
  --blue-400: #6690fa;
  --blue-500: #3f6df0;
  --blue-600: #2d56d6;
  --blue-700: #2443ab;
  --blue-800: #213a87;
  --blue-900: #1f3469;

  /* Green — resolved, verified, success */
  --green-50: #edfcf2;
  --green-100: #d3f8df;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;
  --green-900: #14532d;

  /* Amber — waiting, stale, workaround */
  --amber-50: #fff8eb;
  --amber-100: #feefc7;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-700: #b45309;
  --amber-900: #78350f;

  /* Red — blocked, overdue, destructive */
  --red-50: #fef2f2;
  --red-100: #fee2e2;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --red-900: #7f1d1d;

  /* Violet — reserved for AI. Nothing else may use it. */
  --violet-50: #f5f3ff;
  --violet-100: #ede9fe;
  --violet-200: #ddd6fe;
  --violet-400: #a78bfa;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;
  --violet-700: #6d28d9;
  --violet-900: #4c1d95;

  /* ---------------------------------------------------------------- */
  /* Typography                                                        */
  /* ---------------------------------------------------------------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Inter stylistic sets: open digits, disambiguated l/I, tabular numbers where it matters */
  --font-features: "cv11", "ss01", "ss03";

  /* App UI runs at 14px; reading content (help pages) at 16px */
  --text-xs: 0.75rem;     /* 12 — meta, timestamps, badges */
  --text-sm: 0.8125rem;   /* 13 — table cells, secondary UI */
  --text-base: 0.875rem;  /* 14 — default UI text */
  --text-md: 1rem;        /* 16 — reading body, inputs on touch */
  --text-lg: 1.125rem;    /* 18 — card titles, h3 in pages */
  --text-xl: 1.25rem;     /* 20 — page section h2, ticket title */
  --text-2xl: 1.5rem;     /* 24 — screen titles, stat values */
  --text-3xl: 1.875rem;   /* 30 — help page titles, homepage greeting */

  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65; /* help page prose */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --tracking-tight: -0.02em;  /* titles ≥ 20px */
  --tracking-normal: -0.006em;
  --tracking-wide: 0.06em;    /* uppercase eyebrow labels */

  --measure: 68ch; /* max line length for prose */

  /* ---------------------------------------------------------------- */
  /* Spacing — 4px grid                                                */
  /* ---------------------------------------------------------------- */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---------------------------------------------------------------- */
  /* Sizing                                                            */
  /* ---------------------------------------------------------------- */
  --control-sm: 28px;
  --control-md: 32px;  /* default button / input height */
  --control-lg: 40px;
  --sidebar-width: 248px;
  --topbar-height: 52px;
  --content-max: 1120px;
  --detail-aside: 296px; /* ticket properties panel */
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 20px;

  /* ---------------------------------------------------------------- */
  /* Radius                                                            */
  /* ---------------------------------------------------------------- */
  --radius-xs: 4px;   /* badges, kbd, checkboxes */
  --radius-sm: 6px;   /* buttons, inputs */
  --radius-md: 8px;   /* cards, menus, popovers */
  --radius-lg: 12px;  /* dialogs, large panels */
  --radius-full: 999px;

  /* ---------------------------------------------------------------- */
  /* Motion                                                            */
  /* ---------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 100ms;   /* hover, press */
  --duration-base: 160ms;   /* menus, popovers, toggles */
  --duration-slow: 240ms;   /* dialogs, side panels */

  /* ---------------------------------------------------------------- */
  /* Z-index                                                           */
  /* ---------------------------------------------------------------- */
  --z-sticky: 10;
  --z-sidebar: 20;
  --z-dropdown: 30;
  --z-overlay: 40;
  --z-dialog: 50;
  --z-toast: 60;
  --z-tooltip: 70;
}

/* ------------------------------------------------------------------ */
/* 2 + 3. Semantic & domain tokens — LIGHT                             */
/* ------------------------------------------------------------------ */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --color-bg: var(--gray-0);              /* main content area */
  --color-bg-subtle: var(--gray-50);      /* sidebar, page background behind cards */
  --color-bg-muted: var(--gray-100);      /* hover rows, code blocks */
  --color-bg-emphasis: var(--gray-150);   /* selected nav item, pressed */
  --color-surface: var(--gray-0);         /* cards, inputs */
  --color-surface-raised: var(--gray-0);  /* menus, popovers, dialogs */
  --color-overlay: rgb(14 14 16 / 0.32);

  /* Borders */
  --color-border: var(--gray-200);
  --color-border-subtle: var(--gray-150);
  --color-border-strong: var(--gray-300);

  /* Text */
  --color-text: var(--gray-900);
  --color-text-secondary: var(--gray-600);
  --color-text-tertiary: var(--gray-500);
  --color-text-disabled: var(--gray-400);
  --color-text-inverse: var(--gray-0);
  --color-text-link: var(--blue-600);
  --color-text-link-hover: var(--blue-700);

  /* Primary action = ink, not color. Keeps the accent for meaning. */
  --color-primary: var(--gray-900);
  --color-primary-hover: var(--gray-700);
  --color-primary-fg: var(--gray-0);

  /* Accent */
  --color-accent: var(--blue-600);
  --color-accent-hover: var(--blue-700);
  --color-accent-subtle: var(--blue-50);
  --color-accent-fg: var(--gray-0);
  --color-selection: rgb(63 109 240 / 0.18);
  --color-focus-ring: rgb(63 109 240 / 0.45);

  /* Tones — fg (text/icon), bg (tint), border, solid (dots, bars) */
  --tone-neutral-fg: var(--gray-600);
  --tone-neutral-bg: var(--gray-100);
  --tone-neutral-border: var(--gray-200);
  --tone-neutral-solid: var(--gray-400);

  --tone-info-fg: var(--blue-700);
  --tone-info-bg: var(--blue-50);
  --tone-info-border: var(--blue-200);
  --tone-info-solid: var(--blue-500);

  --tone-success-fg: var(--green-700);
  --tone-success-bg: var(--green-50);
  --tone-success-border: var(--green-100);
  --tone-success-solid: var(--green-600);

  --tone-warning-fg: var(--amber-700);
  --tone-warning-bg: var(--amber-50);
  --tone-warning-border: var(--amber-100);
  --tone-warning-solid: var(--amber-500);

  --tone-danger-fg: var(--red-700);
  --tone-danger-bg: var(--red-50);
  --tone-danger-border: var(--red-100);
  --tone-danger-solid: var(--red-600);

  --tone-ai-fg: var(--violet-700);
  --tone-ai-bg: var(--violet-50);
  --tone-ai-border: var(--violet-200);
  --tone-ai-solid: var(--violet-500);

  /* Body text on a tinted background — same hue, darkest shade. Never grey on color. */
  --tone-info-text: var(--blue-900);
  --tone-success-text: var(--green-900);
  --tone-warning-text: var(--amber-900);
  --tone-danger-text: var(--red-900);
  --tone-ai-text: var(--violet-900);

  /* Internal notes: warm tint so they never look like public replies */
  --color-internal-bg: #fffbf0;
  --color-internal-border: var(--amber-100);

  /* Elevation — light from above. Two parts: soft direct light + tight ambient
     occlusion; the tight part fades as elevation rises.
     xs buttons, sm hover and drag, md menus, lg toasts and drawers, xl dialogs */
  --shadow-xs: 0 1px 2px rgb(16 16 20 / 0.06);
  --shadow-sm: 0 2px 4px -1px rgb(16 16 20 / 0.06), 0 1px 2px rgb(16 16 20 / 0.06);
  --shadow-md: 0 6px 12px -3px rgb(16 16 20 / 0.10), 0 2px 4px -2px rgb(16 16 20 / 0.06);
  --shadow-lg: 0 12px 24px -6px rgb(16 16 20 / 0.14), 0 3px 6px -3px rgb(16 16 20 / 0.05);
  --shadow-xl: 0 24px 48px -12px rgb(16 16 20 / 0.22);
  --shadow-inset: inset 0 1px 2px rgb(16 16 20 / 0.05);     /* inputs, wells */
  --highlight-top: inset 0 1px 0 rgb(255 255 255 / 0.14);   /* raised ink buttons */
}

/* ------------------------------------------------------------------ */
/* DARK                                                                */
/* ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg: var(--gray-925);
    --color-bg-subtle: var(--gray-950);
    --color-bg-muted: var(--gray-850);
    --color-bg-emphasis: var(--gray-800);
    --color-surface: var(--gray-900);
    --color-surface-raised: var(--gray-850);
    --color-overlay: rgb(0 0 0 / 0.56);

    --color-border: #2a2a2f;
    --color-border-subtle: #222226;
    --color-border-strong: #3a3a41;

    --color-text: #ececef;
    --color-text-secondary: #a8a8b1;
    --color-text-tertiary: #8a8a94;
    --color-text-disabled: #5c5c66;
    --color-text-inverse: var(--gray-950);
    --color-text-link: var(--blue-300);
    --color-text-link-hover: var(--blue-200);

    --color-primary: #ececef;
    --color-primary-hover: #ffffff;
    --color-primary-fg: var(--gray-950);

    --color-accent: var(--blue-400);
    --color-accent-hover: var(--blue-300);
    --color-accent-subtle: rgb(63 109 240 / 0.14);
    --color-accent-fg: var(--gray-950);
    --color-selection: rgb(102 144 250 / 0.28);
    --color-focus-ring: rgb(102 144 250 / 0.55);

    --tone-neutral-fg: #b4b4bc;
    --tone-neutral-bg: rgb(255 255 255 / 0.06);
    --tone-neutral-border: rgb(255 255 255 / 0.1);
    --tone-neutral-solid: var(--gray-500);

    --tone-info-fg: var(--blue-300);
    --tone-info-bg: rgb(63 109 240 / 0.14);
    --tone-info-border: rgb(63 109 240 / 0.3);
    --tone-info-solid: var(--blue-400);

    --tone-success-fg: var(--green-400);
    --tone-success-bg: rgb(34 197 94 / 0.12);
    --tone-success-border: rgb(34 197 94 / 0.26);
    --tone-success-solid: var(--green-500);

    --tone-warning-fg: var(--amber-400);
    --tone-warning-bg: rgb(245 158 11 / 0.12);
    --tone-warning-border: rgb(245 158 11 / 0.26);
    --tone-warning-solid: var(--amber-500);

    --tone-danger-fg: var(--red-400);
    --tone-danger-bg: rgb(239 68 68 / 0.12);
    --tone-danger-border: rgb(239 68 68 / 0.28);
    --tone-danger-solid: var(--red-500);

    --tone-ai-fg: var(--violet-400);
    --tone-ai-bg: rgb(139 92 246 / 0.12);
    --tone-ai-border: rgb(139 92 246 / 0.3);
    --tone-ai-solid: var(--violet-500);

    --tone-info-text: var(--blue-100);
    --tone-success-text: var(--green-100);
    --tone-warning-text: var(--amber-100);
    --tone-danger-text: var(--red-100);
    --tone-ai-text: var(--violet-100);

    --color-internal-bg: rgb(245 158 11 / 0.06);
    --color-internal-border: rgb(245 158 11 / 0.22);

    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-sm: 0 2px 4px -1px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 6px 16px -4px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(255 255 255 / 0.04);
    --shadow-lg: 0 14px 32px -8px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.05);
    --shadow-xl: 0 28px 56px -12px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.06);
    --shadow-inset: inset 0 1px 2px rgb(0 0 0 / 0.3);
    --highlight-top: inset 0 1px 0 rgb(255 255 255 / 0.5);
  }
}

/* Forced dark — identical values to the media query block above */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: var(--gray-925);
  --color-bg-subtle: var(--gray-950);
  --color-bg-muted: var(--gray-850);
  --color-bg-emphasis: var(--gray-800);
  --color-surface: var(--gray-900);
  --color-surface-raised: var(--gray-850);
  --color-overlay: rgb(0 0 0 / 0.56);

  --color-border: #2a2a2f;
  --color-border-subtle: #222226;
  --color-border-strong: #3a3a41;

  --color-text: #ececef;
  --color-text-secondary: #a8a8b1;
  --color-text-tertiary: #8a8a94;
  --color-text-disabled: #5c5c66;
  --color-text-inverse: var(--gray-950);
  --color-text-link: var(--blue-300);
  --color-text-link-hover: var(--blue-200);

  --color-primary: #ececef;
  --color-primary-hover: #ffffff;
  --color-primary-fg: var(--gray-950);

  --color-accent: var(--blue-400);
  --color-accent-hover: var(--blue-300);
  --color-accent-subtle: rgb(63 109 240 / 0.14);
  --color-accent-fg: var(--gray-950);
  --color-selection: rgb(102 144 250 / 0.28);
  --color-focus-ring: rgb(102 144 250 / 0.55);

  --tone-neutral-fg: #b4b4bc;
  --tone-neutral-bg: rgb(255 255 255 / 0.06);
  --tone-neutral-border: rgb(255 255 255 / 0.1);
  --tone-neutral-solid: var(--gray-500);

  --tone-info-fg: var(--blue-300);
  --tone-info-bg: rgb(63 109 240 / 0.14);
  --tone-info-border: rgb(63 109 240 / 0.3);
  --tone-info-solid: var(--blue-400);

  --tone-success-fg: var(--green-400);
  --tone-success-bg: rgb(34 197 94 / 0.12);
  --tone-success-border: rgb(34 197 94 / 0.26);
  --tone-success-solid: var(--green-500);

  --tone-warning-fg: var(--amber-400);
  --tone-warning-bg: rgb(245 158 11 / 0.12);
  --tone-warning-border: rgb(245 158 11 / 0.26);
  --tone-warning-solid: var(--amber-500);

  --tone-danger-fg: var(--red-400);
  --tone-danger-bg: rgb(239 68 68 / 0.12);
  --tone-danger-border: rgb(239 68 68 / 0.28);
  --tone-danger-solid: var(--red-500);

  --tone-ai-fg: var(--violet-400);
  --tone-ai-bg: rgb(139 92 246 / 0.12);
  --tone-ai-border: rgb(139 92 246 / 0.3);
  --tone-ai-solid: var(--violet-500);

  --tone-info-text: var(--blue-100);
  --tone-success-text: var(--green-100);
  --tone-warning-text: var(--amber-100);
  --tone-danger-text: var(--red-100);
  --tone-ai-text: var(--violet-100);

  --color-internal-bg: rgb(245 158 11 / 0.06);
  --color-internal-border: rgb(245 158 11 / 0.22);

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-sm: 0 2px 4px -1px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 6px 16px -4px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(255 255 255 / 0.04);
  --shadow-lg: 0 14px 32px -8px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.05);
  --shadow-xl: 0 28px 56px -12px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.06);
  --shadow-inset: inset 0 1px 2px rgb(0 0 0 / 0.3);
  --highlight-top: inset 0 1px 0 rgb(255 255 255 / 0.5);
}

/* ------------------------------------------------------------------ */
/* Domain aliases — map product states to tones.                       */
/* Change a mapping here, never in a component.                        */
/* ------------------------------------------------------------------ */
:root {
  /* Ticket status */
  --status-open-fg: var(--tone-info-fg);
  --status-open-bg: var(--tone-info-bg);
  --status-open-solid: var(--tone-info-solid);

  --status-in-progress-fg: var(--color-text);
  --status-in-progress-bg: var(--tone-neutral-bg);
  --status-in-progress-solid: var(--color-accent);

  --status-waiting-fg: var(--tone-warning-fg);      /* waiting on requester & third party */
  --status-waiting-bg: var(--tone-warning-bg);
  --status-waiting-solid: var(--tone-warning-solid);

  --status-resolved-fg: var(--tone-success-fg);
  --status-resolved-bg: var(--tone-success-bg);
  --status-resolved-solid: var(--tone-success-solid);

  --status-closed-fg: var(--tone-neutral-fg);
  --status-closed-bg: var(--tone-neutral-bg);
  --status-closed-solid: var(--tone-neutral-solid);

  /* Impact */
  --impact-blocked-fg: var(--tone-danger-fg);
  --impact-blocked-bg: var(--tone-danger-bg);
  --impact-blocked-solid: var(--tone-danger-solid);

  --impact-workaround-fg: var(--tone-warning-fg);
  --impact-workaround-bg: var(--tone-warning-bg);
  --impact-workaround-solid: var(--tone-warning-solid);

  --impact-annoyance-fg: var(--tone-neutral-fg);
  --impact-annoyance-bg: var(--tone-neutral-bg);
  --impact-annoyance-solid: var(--tone-neutral-solid);

  /* Page health */
  --page-verified-fg: var(--tone-success-fg);
  --page-stale-fg: var(--tone-warning-fg);
  --page-stale-bg: var(--tone-warning-bg);
  --page-unowned-fg: var(--tone-danger-fg);

  /* Response clock */
  --sla-ok-fg: var(--color-text-tertiary);
  --sla-due-soon-fg: var(--tone-warning-fg);
  --sla-overdue-fg: var(--tone-danger-fg);
  --sla-paused-fg: var(--color-text-tertiary);
}
/* ------------------------------------------------------------------ */
/* Domain aliases — map hub states to tones.                           */
/* Change a mapping here, never in a component.                        */
/* ------------------------------------------------------------------ */
:root {
  /* Account status */
  --user-active-solid: var(--tone-success-solid);
  --user-pending-fg: var(--tone-warning-fg);
  --user-pending-solid: var(--tone-warning-solid);
  --user-disabled-solid: var(--tone-neutral-solid);

  /* Endpoint sensitivity: sensitive data carries the lock, never color alone */
  --sensitive-fg: var(--tone-warning-fg);
  --sensitive-bg: var(--tone-warning-bg);

  /* Connector health */
  --health-ok-solid: var(--tone-success-solid);
  --health-failing-fg: var(--tone-danger-fg);
  --health-failing-solid: var(--tone-danger-solid);

  /* Query hygiene: calls without select= */
  --hygiene-poor-fg: var(--tone-warning-fg);
}

/* ------------------------------------------------------------------ */
/* Charts — neutral series with one highlight, and a one-hue ramp for  */
/* magnitude. Each theme has its own steps, validated against its own  */
/* surface (dataviz validator: pair contrast ≥ 3:1, ramp monotone).    */
/* ------------------------------------------------------------------ */
:root {
  --chart-highlight: var(--blue-600);
  --chart-neutral: var(--gray-500);
  --chart-band: var(--color-bg-muted);
  --chart-grid: var(--color-border-subtle);
  --chart-axis: var(--color-border-strong);
  --chart-label: var(--color-text-tertiary);
  --chart-seq-0: var(--color-bg-muted);
  --chart-seq-1: var(--blue-300);
  --chart-seq-2: var(--blue-400);
  --chart-seq-3: var(--blue-500);
  --chart-seq-4: var(--blue-700);
  --chart-seq-5: var(--blue-900);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --chart-highlight: var(--blue-500);
    --chart-seq-1: var(--blue-700);
    --chart-seq-2: var(--blue-600);
    --chart-seq-3: var(--blue-400);
    --chart-seq-4: var(--blue-300);
    --chart-seq-5: var(--blue-100);
  }
}
:root[data-theme="dark"] {
  --chart-highlight: var(--blue-500);
  --chart-seq-1: var(--blue-700);
  --chart-seq-2: var(--blue-600);
  --chart-seq-3: var(--blue-400);
  --chart-seq-4: var(--blue-300);
  --chart-seq-5: var(--blue-100);
}