/* Ported from LiquidWeb src/styles/tokens.css, plus the Bootstrap variable bridge. */

:root {
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --color-canvas: #eef5ff;
  --color-canvas-raised: #f9fbff;
  --color-text: #172033;
  --color-text-muted: #536274;
  --color-text-soft: #728196;
  --color-text-inverse: #fbfdff;
  --color-accent: #2671ff;
  --color-accent-strong: #0f56d9;
  --color-accent-soft: rgba(38, 113, 255, 0.14);
  --color-success: #1a8f69;
  --color-warning: #a66a00;
  --color-danger: #cb3d4a;
  --color-focus: rgba(38, 113, 255, 0.42);
  --color-grid: rgba(42, 80, 126, 0.08);
  --color-ambient-one: rgba(65, 142, 255, 0.22);
  --color-ambient-two: rgba(72, 202, 174, 0.18);

  /* Drifting rainbow spotlights behind everything (see glass.css body::after). */
  --aurora-one: #4a8cff;
  --aurora-two: #b06cff;
  --aurora-three: #ff8a6b;
  --aurora-four: #3fd0c9;
  --aurora-opacity: 0.42;

  --glass-rgb: 255 255 255;
  --glass-alpha-base: 0.64;
  --glass-alpha-strong-base: 0.78;
  --glass-alpha-soft-base: 0.46;
  --glass-alpha-scale: 1;
  --glass-tint: rgb(var(--glass-rgb) / clamp(0.22, calc(var(--glass-alpha-base) * var(--glass-alpha-scale)), 0.94));
  --glass-tint-strong: rgb(var(--glass-rgb) / clamp(0.32, calc(var(--glass-alpha-strong-base) * var(--glass-alpha-scale)), 0.96));
  --glass-tint-soft: rgb(var(--glass-rgb) / clamp(0.16, calc(var(--glass-alpha-soft-base) * var(--glass-alpha-scale)), 0.82));
  --glass-border: rgba(38, 63, 96, 0.16);
  --glass-border-strong: rgba(38, 63, 96, 0.24);
  --glass-highlight: rgba(255, 255, 255, 0.82);
  --glass-shadow: 0 24px 80px rgba(38, 63, 96, 0.16);
  --glass-shadow-soft: 0 14px 42px rgba(38, 63, 96, 0.12);
  --glass-blur: 24px;

  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  --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;

  --text-xs: 0.78rem;
  --text-sm: 0.9rem;
  --text-md: 1rem;
  --text-lg: 1.12rem;
  --text-xl: 1.35rem;
  --text-2xl: 1.8rem;
  --text-3xl: 2.35rem;

  --motion-fast: 140ms;
  --motion-normal: 220ms;
  --motion-slow: 420ms;
  --spring-soft: cubic-bezier(0.2, 0.8, 0.2, 1);

  --topbar-height: 4.25rem;
  /* Hero and chat stage together are exactly one viewport. */
  --hero-height: 56dvh;

  --z-toolbar: 20;
  --z-tabbar: 30;
  --z-overlay: 80;
  --z-modal: 90;
}

html[data-theme='dark'] {
  --color-canvas: #090d14;
  --color-canvas-raised: #111823;
  --color-text: #f2f7ff;
  --color-text-muted: #b4c0d0;
  --color-text-soft: #8c9bae;
  --color-text-inverse: #08101c;
  --color-accent: #7ab0ff;
  --color-accent-strong: #a9cdff;
  --color-accent-soft: rgba(122, 176, 255, 0.18);
  --color-success: #68d4af;
  --color-warning: #f0bd63;
  --color-danger: #ff8995;
  --color-focus: rgba(122, 176, 255, 0.5);
  --color-grid: rgba(204, 223, 255, 0.07);
  --color-ambient-one: rgba(54, 113, 224, 0.18);
  --color-ambient-two: rgba(67, 207, 171, 0.12);

  --aurora-one: #2f6bdb;
  --aurora-two: #8a4ddb;
  --aurora-three: #d8613f;
  --aurora-four: #23a89f;
  --aurora-opacity: 0.38;

  --glass-rgb: 21 29 42;
  --glass-alpha-base: 0.68;
  --glass-alpha-strong-base: 0.82;
  --glass-alpha-soft-base: 0.48;
  --glass-border: rgba(211, 227, 255, 0.15);
  --glass-border-strong: rgba(211, 227, 255, 0.22);
  --glass-highlight: rgba(255, 255, 255, 0.16);
  --glass-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
  --glass-shadow-soft: 0 16px 48px rgba(0, 0, 0, 0.32);
}

/*
  Bridge the LiquidWeb tokens into Bootstrap's own custom properties so Bootstrap
  components (nav-pills, breadcrumb, table, form-control, badge) inherit the
  palette instead of fighting it.
*/
:root,
html[data-theme='dark'] {
  --bs-body-font-family: var(--font-sans);
  --bs-body-color: var(--color-text);
  --bs-body-color-rgb: 23, 32, 51;
  --bs-body-bg: transparent;
  --bs-emphasis-color: var(--color-text);
  --bs-secondary-color: var(--color-text-muted);
  --bs-tertiary-color: var(--color-text-soft);
  --bs-border-color: var(--glass-border);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-md);
  --bs-border-radius-xl: var(--radius-lg);
  --bs-border-radius-pill: var(--radius-pill);
  --bs-primary: var(--color-accent);
  --bs-primary-rgb: 38, 113, 255;
  --bs-link-color: var(--color-accent);
  --bs-link-hover-color: var(--color-accent-strong);
  --bs-link-color-rgb: 38, 113, 255;
  --bs-heading-color: var(--color-text);
  --bs-focus-ring-color: var(--color-focus);
  --bs-focus-ring-width: 3px;
}

html[data-theme='dark'] {
  --bs-body-color-rgb: 242, 247, 255;
  --bs-primary-rgb: 122, 176, 255;
  --bs-link-color-rgb: 122, 176, 255;
}