/*
 * 2QBIT design-system foundation
 * Canonical global tokens: Bootstrap -> this file -> ui-primitives.css ->
 * product/page styles. Component geometry belongs to the owning layer.
 */

:root {
  /* Typography */
  --font-family-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
    monospace;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-ui: 0.875rem;
  --text-body-sm: 0.9375rem;
  --text-body: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.5rem;

  --line-height-xs: 1rem;
  --line-height-sm: 1.125rem;
  --line-height-ui: 1.25rem;
  --line-height-body-sm: 1.375rem;
  --line-height-body: 1.625rem;
  --line-height-lg: 1.625rem;
  --line-height-xl: 1.75rem;
  --line-height-2xl: 1.9375rem;
  --line-height-3xl: 2.25rem;
  --line-height-4xl: 2.75rem;
  --line-height-heading: 1.2;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-heading: -0.015em;
  --letter-spacing-ui: 0;
  --letter-spacing-label: 0.01em;

  /* Canvas and surfaces */
  --color-bg-canvas: #07090e;
  --color-bg-page: var(--color-bg-canvas);
  --color-bg-subtle: #0a0d14;
  --color-surface-1: #0e121b;
  --color-surface-2: #131925;
  --color-surface-3: #192131;
  --color-surface-raised: #1e2738;
  --color-surface-elevated: var(--color-surface-raised);
  --color-surface-hover: #202a3c;
  --color-surface-selected: #172744;
  --color-surface-overlay: #111722;
  --color-surface-scrim: rgb(2 5 10 / 72%);
  --color-overlay-scrim: var(--color-surface-scrim);

  /* Text */
  --color-text-primary: #f3f6fc;
  --color-text-strong: var(--color-text-primary);
  --color-text-secondary: #c2cbd9;
  --color-text-tertiary: #8f9bad;
  --color-text-muted: var(--color-text-tertiary);
  --color-text-disabled: #687386;
  --color-text-inverse: #08101d;
  --color-link: #9dc7ff;
  --color-link-hover: #c4ddff;

  /* Interaction and intelligence */
  --color-accent: #6ea8fe;
  --color-accent-hover: #8bb9ff;
  --color-accent-active: #4f8fe8;
  --color-accent-soft: rgb(110 168 254 / 12%);
  --color-intelligence: #9b8afb;
  --color-intelligence-hover: #ae9fff;
  --color-intelligence-soft: rgb(155 138 251 / 12%);

  /* Long-form semantic aliases for shared UI APIs. */
  --color-interactive-primary: var(--color-accent);
  --color-interactive-hover: var(--color-accent-hover);
  --color-interactive-active: var(--color-accent-active);
  --color-interactive-soft: var(--color-accent-soft);
  --color-router: var(--color-intelligence);
  --color-router-soft: var(--color-intelligence-soft);

  /* Semantic feedback */
  --color-success: #68c998;
  --color-success-soft: rgb(104 201 152 / 12%);
  --color-warning: #e4b968;
  --color-warning-soft: rgb(228 185 104 / 12%);
  --color-danger: #ef8792;
  --color-danger-soft: rgb(239 135 146 / 12%);
  --color-info: #69c2dc;
  --color-info-soft: rgb(105 194 220 / 12%);

  /* Borders */
  --border-width: 1px;
  --border-width-hairline: var(--border-width);
  --border-width-strong: 2px;
  --color-border-subtle: rgb(255 255 255 / 7%);
  --color-border-default: rgb(255 255 255 / 11%);
  --color-border-strong: rgb(255 255 255 / 17%);
  --color-border-accent: rgb(110 168 254 / 48%);
  --border-default: var(--border-width) solid var(--color-border-default);
  --border-subtle: var(--border-width) solid var(--color-border-subtle);
  --border-strong: var(--border-width) solid var(--color-border-strong);

  /* Geometry */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  --radius-xs: 0.375rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-none: none;
  --shadow-sm: 0 4px 12px rgb(0 0 0 / 18%);
  --shadow-md: 0 12px 32px rgb(0 0 0 / 28%);
  --shadow-lg: 0 24px 64px rgb(0 0 0 / 42%);
  --shadow-surface: var(--shadow-sm);
  --shadow-elevated: var(--shadow-md);
  --shadow-overlay: var(--shadow-lg);
  --shadow-focus: 0 0 0 2px var(--color-bg-canvas),
    0 0 0 4px rgb(110 168 254 / 72%);

  /* Focus */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: rgb(110 168 254 / 78%);
  --focus-ring: 0 0 0 var(--focus-ring-offset) var(--color-bg-canvas),
    0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width))
      var(--focus-ring-color);

  /* Motion */
  --duration-instant: 80ms;
  --duration-fast: 140ms;
  --duration-normal: 200ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-enter: var(--ease-emphasized);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* AI Hub product aliases. Runtime-measured values keep their existing names. */
  --ai-sidebar-width: 260px;
  --ai-sidebar-rail-width: 56px;
  --ai-content-max-width: 820px;
  --ai-content-wide-max-width: 1120px;
  --ai-header-height: 72px;
  --ai-composer-max-width: var(--ai-content-max-width);
  --ai-composer-reserved-height: 120px;
  --ai-composer-surface: var(--color-surface-2);
  --ai-composer-border: var(--color-border-default);
  --ai-composer-shadow: var(--shadow-elevated);
  --ai-message-gap: var(--space-4);
  --ai-user-message-surface: var(--color-surface-3);
  --ai-assistant-message-surface: transparent;
  --ai-router-accent: var(--color-intelligence);
  --ai-router-accent-soft: var(--color-intelligence-soft);

  /* Minimal Bootstrap 5.3 semantic bridge */
  --bs-font-sans-serif: var(--font-family-sans);
  --bs-font-monospace: var(--font-family-mono);
  --bs-body-font-family: var(--font-family-sans);
  --bs-body-font-size: var(--text-body);
  --bs-body-line-height: var(--line-height-body);
  --bs-body-color: var(--color-text-primary);
  --bs-body-color-rgb: 243, 246, 252;
  --bs-body-bg: var(--color-bg-canvas);
  --bs-body-bg-rgb: 7, 9, 14;
  --bs-emphasis-color: var(--color-text-primary);
  --bs-emphasis-color-rgb: 243, 246, 252;
  --bs-secondary-color: var(--color-text-secondary);
  --bs-secondary-color-rgb: 194, 203, 217;
  --bs-tertiary-color: var(--color-text-muted);
  --bs-tertiary-color-rgb: 143, 155, 173;
  --bs-border-color: var(--color-border-default);
  --bs-border-color-translucent: var(--color-border-subtle);
  --bs-link-color: var(--color-link);
  --bs-link-color-rgb: 157, 199, 255;
  --bs-link-hover-color: var(--color-link-hover);
  --bs-link-hover-color-rgb: 196, 221, 255;
  --bs-primary: var(--color-accent);
  --bs-primary-rgb: 110, 168, 254;
  --bs-success: var(--color-success);
  --bs-success-rgb: 104, 201, 152;
  --bs-warning: var(--color-warning);
  --bs-warning-rgb: 228, 185, 104;
  --bs-danger: var(--color-danger);
  --bs-danger-rgb: 239, 135, 146;
  --bs-info: var(--color-info);
  --bs-info-rgb: 105, 194, 220;
  --bs-focus-ring-width: var(--focus-ring-width);
  --bs-focus-ring-opacity: 0.3;
  --bs-focus-ring-color: rgb(110 168 254 / 30%);
}

html {
  font-family: var(--font-family-sans);
}

body {
  font-family: var(--font-family-sans);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: inherit;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-heading);
  line-height: var(--line-height-heading);
}

code,
kbd,
pre,
samp {
  font-family: var(--font-family-mono);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
  }
}