/*
 * Echosystem AI Network — brand layer for new-api.
 * Injected by nginx (sub_filter on </head>); the app itself is unmodified.
 * Tokens are set on <body> with !important so they win over new-api's own
 * theme presets (which apply via [data-theme-preset] on <body>).
 *
 * Palette: Ice #F3F5FF · Paper #FFFFFF · Ink #0D1033 · Klein #2F2BFF
 *          Sodium #FFB21A (signal/focus only) · Slate #5B6187
 * Type:    Unbounded (display) · Instrument Sans (UI) · JetBrains Mono (code/keys)
 */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Unbounded:wght@400;500;600&display=swap');

:root {
  --ecs-klein: #2f2bff;
  --ecs-sodium: #ffb21a;
  --ecs-ink: #0d1033;
  --ecs-display: 'Unbounded', 'Instrument Sans', system-ui, sans-serif;
  --ecs-ui: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ecs-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
}

/* ---------- Light tokens ---------- */
body,
body[data-theme-preset],
body[data-theme-font] {
  --font-ui-sans: var(--ecs-ui) !important;
  --font-body: var(--ecs-ui) !important;
  --font-sans: var(--ecs-ui) !important;
  --radius: 0.875rem !important;

  --background: #f3f5ff !important;
  --foreground: #0d1033 !important;
  --card: #ffffff !important;
  --card-foreground: #0d1033 !important;
  --popover: #ffffff !important;
  --popover-foreground: #0d1033 !important;
  --primary: #2f2bff !important;
  --primary-foreground: #ffffff !important;
  --secondary: #e8ebff !important;
  --secondary-foreground: #1d1a9e !important;
  --muted: #eceffd !important;
  --muted-foreground: #5b6187 !important;
  --accent: #e6e8ff !important;
  --accent-foreground: #1d1a9e !important;
  --destructive: #e5383b !important;
  --destructive-foreground: #ffffff !important;
  --success: #0f9f7a !important;
  --success-foreground: #ffffff !important;
  --warning: #e09400 !important;
  --warning-foreground: #0d1033 !important;
  --info: #2f2bff !important;
  --info-foreground: #ffffff !important;
  --border: #dde1f7 !important;
  --input: #d3d8f3 !important;
  --ring: #ffb21a !important;

  --chart-1: #2f2bff !important;
  --chart-2: #ffb21a !important;
  --chart-3: #8f84ff !important;
  --chart-4: #12b5a6 !important;
  --chart-5: #ff6b5b !important;
  --overview-accent-1: #2f2bff !important;
  --overview-accent-2: #ffb21a !important;
  --overview-accent-3: #8f84ff !important;

  /* The sidebar is the brand "spine": solid Klein. */
  --sidebar: #2f2bff !important;
  --sidebar-foreground: #ffffff !important;
  --sidebar-primary: #ffffff !important;
  --sidebar-primary-foreground: #2f2bff !important;
  --sidebar-accent: #ffffff !important;
  --sidebar-accent-foreground: #2f2bff !important;
  --sidebar-border: rgb(255 255 255 / 0.16) !important;
  --sidebar-ring: #ffb21a !important;

  font-family: var(--ecs-ui) !important;
  background: var(--background);
  font-feature-settings: 'ss01', 'cv11';
}

/* ---------- Dark tokens ---------- */
.dark body,
.dark body[data-theme-preset],
.dark body[data-theme-font] {
  --background: #070a26 !important;
  --foreground: #e9ebff !important;
  --card: #0f1440 !important;
  --card-foreground: #e9ebff !important;
  --popover: #121848 !important;
  --popover-foreground: #e9ebff !important;
  --primary: #7c7bff !important;
  --primary-foreground: #070a26 !important;
  --secondary: #1a2058 !important;
  --secondary-foreground: #c9ccff !important;
  --muted: #151b4d !important;
  --muted-foreground: #9aa0d0 !important;
  --accent: #1d2463 !important;
  --accent-foreground: #e9ebff !important;
  --destructive: #ff5d5f !important;
  --success: #2fd3a5 !important;
  --success-foreground: #070a26 !important;
  --warning: #ffb21a !important;
  --info: #7c7bff !important;
  --info-foreground: #070a26 !important;
  --border: #222a66 !important;
  --input: #2a3275 !important;
  --ring: #ffb21a !important;

  --chart-1: #7c7bff !important;
  --chart-2: #ffb21a !important;
  --chart-3: #b3abff !important;
  --chart-4: #2fd3c2 !important;
  --chart-5: #ff8a7d !important;
  --overview-accent-1: #7c7bff !important;
  --overview-accent-2: #ffb21a !important;
  --overview-accent-3: #b3abff !important;

  --sidebar: #0b0f33 !important;
  --sidebar-foreground: #e9ebff !important;
  --sidebar-primary: #7c7bff !important;
  --sidebar-primary-foreground: #070a26 !important;
  --sidebar-accent: #7c7bff !important;
  --sidebar-accent-foreground: #070a26 !important;
  --sidebar-border: #1c2360 !important;
}

/* ---------- Type ---------- */
h1,
h2,
[data-slot='card-title'],
[data-slot='dialog-title'],
[data-slot='sheet-title'] {
  font-family: var(--ecs-display) !important;
  font-weight: 500 !important;
  letter-spacing: -0.015em;
}
h1 {
  letter-spacing: -0.03em;
}
code,
pre,
kbd,
samp,
.font-mono {
  font-family: var(--ecs-mono) !important;
  font-feature-settings: normal;
}

/* ---------- Sidebar spine ---------- */
[data-slot='sidebar-container'],
[data-slot='sidebar-inner'] {
  background: var(--sidebar) !important;
  color: var(--sidebar-foreground);
}
[data-slot='sidebar-container'] {
  border-right: 0 !important;
}
/* Section labels: sentence case, legible on Klein (no tracked-out caps). */
[data-slot='sidebar-container'] [data-slot='sidebar-group'] > div:first-child,
[data-slot='sidebar-container'] [data-sidebar='group-label'] {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgb(255 255 255 / 0.62) !important;
}
.dark [data-slot='sidebar-container'] [data-sidebar='group-label'] {
  color: rgb(233 235 255 / 0.5) !important;
}
/* new-api marks the current item with a bare [data-active] attribute (any value). */
[data-slot='sidebar-container'] :is([data-sidebar='menu-button'], [data-sidebar='menu-sub-button']) {
  border-radius: 999px !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}
[data-slot='sidebar-container'] :is([data-sidebar='menu-button'], [data-sidebar='menu-sub-button']):not([data-active]) {
  color: var(--sidebar-foreground) !important;
}
[data-slot='sidebar-container'] :is([data-sidebar='menu-button'], [data-sidebar='menu-sub-button']):not([data-active]) > svg {
  color: currentColor !important;
}
[data-slot='sidebar-container'] :is([data-sidebar='menu-button'], [data-sidebar='menu-sub-button']):hover:not([data-active]) {
  background: rgb(255 255 255 / 0.12) !important;
}
.dark [data-slot='sidebar-container'] :is([data-sidebar='menu-button'], [data-sidebar='menu-sub-button']):hover:not([data-active]) {
  background: rgb(124 123 255 / 0.14) !important;
}
[data-slot='sidebar-container'] :is([data-sidebar='menu-button'], [data-sidebar='menu-sub-button'])[data-active] {
  background: var(--sidebar-accent) !important;
  color: var(--sidebar-accent-foreground) !important;
  font-weight: 600;
}

/* App header sits on the spine colour: light text on Klein. */
header:not(.fixed) {
  color: #ffffff;
}
header:not(.fixed) :is(a, button):not([data-slot='avatar']) {
  color: rgb(255 255 255 / 0.8) !important;
}
header:not(.fixed) :is(a, button):hover,
header:not(.fixed) [aria-current='page'],
header:not(.fixed) [data-active] {
  color: #ffffff !important;
}
header:not(.fixed) :is(input, [role='combobox'], button[class*='w-full'], button[class*='justify-between']) {
  background: rgb(255 255 255 / 0.12) !important;
  border-color: rgb(255 255 255 / 0.22) !important;
  color: #ffffff !important;
}
header:not(.fixed) kbd {
  background: rgb(255 255 255 / 0.16) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
header:not(.fixed) .text-muted-foreground {
  color: rgb(255 255 255 / 0.62) !important;
}

/* ---------- Surfaces ---------- */
[data-slot='sidebar-inset'] {
  background: var(--background) !important;
}
[data-slot='card'] {
  border-radius: 1.125rem !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
[data-slot='card'] [data-slot='card'] {
  border-radius: 0.875rem !important;
  background: color-mix(in oklab, var(--card) 70%, var(--background)) !important;
}
[data-slot='dialog-content'],
[data-slot='sheet-content'],
[data-slot='popover-content'],
[data-slot='dropdown-menu-content'] {
  border: 1px solid var(--border) !important;
  box-shadow: 0 24px 60px -24px rgb(13 16 51 / 0.35) !important;
}

/* ---------- Controls ---------- */
[data-slot='button'] {
  border-radius: 999px !important;
  font-weight: 600;
}
[data-slot='input'],
[data-slot='textarea'],
[data-slot='select-trigger'] {
  border-radius: 0.75rem !important;
  background: var(--card) !important;
}
[data-slot='badge'] {
  border-radius: 999px !important;
}

/* Visible keyboard focus everywhere: the sodium signal. */
:focus-visible {
  outline: 2px solid var(--ecs-sodium) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* ---------- Public header: a floating bar over each page ---------- */
header.pointer-events-none.fixed > div,
header.pointer-events-none.fixed > nav {
  margin-top: 12px !important;
  border-radius: 999px !important;
  border: 1px solid var(--border) !important;
  background: color-mix(in oklab, var(--card) 82%, transparent) !important;
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
}

/* Drop new-api's decorative gradient washes; the brand uses flat fields. */
[class*='bg-gradient-to-']:not(.bg-clip-text),
[class*='bg-linear-to-']:not(.bg-clip-text),
[class*='bg-radial']:not(.bg-clip-text) {
  background-image: none !important;
}
/* Gradient-clipped headline text becomes solid ink. */
.bg-clip-text {
  background-image: none !important;
  color: var(--foreground) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* No tracked-out all-caps labels: sentence case reads calmer. */
.uppercase {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}