/*
 * AitFind precision skin — optional, late-loaded presentation layer.
 * The native new-api / QuantumNous application, notices and component
 * behavior remain intact. Enable with data-aitfind-skin="precision" on html.
 * Deliberately does not override spacing, scale, sidebar size or layout.
 */

html[data-aitfind-skin='precision'] {
  --aitfind-font:
    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
    'PingFang SC', 'PingFang TC', 'Hiragino Sans GB', 'Microsoft YaHei',
    'Segoe UI', sans-serif;
}

/* Preset ownership follows the native provider: the default preset removes
 * body[data-theme-preset], while explicit presets set it. The docs bridge
 * writes the same preference on html. Alias native colors when either surface
 * selects a custom preset, so native theme controls continue to take effect.
 */
html[data-aitfind-skin='precision'],
html[data-aitfind-skin='precision']
  body[data-theme-preset]:not([data-theme-preset='default']) {
  --aitfind-canvas: var(--background);
  --aitfind-ink: var(--foreground);
  --aitfind-surface: var(--card);
  --aitfind-popover: var(--popover);
  --aitfind-muted: var(--muted);
  --aitfind-muted-ink: var(--muted-foreground);
  --aitfind-secondary: var(--secondary);
  --aitfind-primary: var(--primary);
  --aitfind-on-primary: var(--primary-foreground);
  --aitfind-accent: var(--primary);
  --aitfind-selected: var(--accent);
  --aitfind-line: var(--border);
  --aitfind-input: var(--input);
  --aitfind-chart-2: var(--chart-2);
  --aitfind-chart-3: var(--chart-3);
  --aitfind-chart-4: var(--chart-4);
  --aitfind-chart-5: var(--chart-5);
  --aitfind-table-head: var(--table-header);
  --aitfind-table-hover: var(--table-header-hover);
  --aitfind-disabled: var(--table-disabled);
  --aitfind-disabled-hover: var(--table-disabled-hover);
  --aitfind-skeleton: var(--skeleton-base);
  --aitfind-skeleton-highlight: var(--skeleton-highlight);
  --aitfind-shadow: 0 2px 8px rgb(0 0 0 / 6%);
  --link: var(--primary);
}

/* System UI is the default; explicit Sans and Serif retain their native
 * font variables and imported faces. No typography preference is rewritten.
 */
html[data-aitfind-skin='precision']:not([data-theme-font='sans']):not(
    [data-theme-font='serif']
  ) {
  --font-ui-sans: var(--aitfind-font);
}

html[data-aitfind-skin='precision']:not(
    [data-theme-preset]:not([data-theme-preset='default'])
  ):not(:has(body[data-theme-preset]:not([data-theme-preset='default']))) {
  --aitfind-canvas: #fafafa;
  --aitfind-ink: #1d1d1f;
  --aitfind-surface: #ffffff;
  --aitfind-popover: #ffffff;
  --aitfind-muted: #f5f5f7;
  --aitfind-muted-ink: #656871;
  --aitfind-secondary: #f0f0f2;
  --aitfind-primary: #1d1d1f;
  --aitfind-on-primary: #fafafa;
  --aitfind-accent: #ba3434;
  --aitfind-selected: #f8eaea;
  --aitfind-line: #e1e2e6;
  --aitfind-input: #d9dbe0;
  --aitfind-chart-2: #4e5158;
  --aitfind-chart-3: #858891;
  --aitfind-chart-4: #a77272;
  --aitfind-chart-5: #a5a8b0;
  --aitfind-table-head: #f5f5f7;
  --aitfind-table-hover: #ededf0;
  --aitfind-disabled: #f2f2f4;
  --aitfind-disabled-hover: #eaeaec;
  --aitfind-skeleton: #ededf0;
  --aitfind-skeleton-highlight: #f8f8fa;
  --aitfind-shadow: 0 2px 8px rgb(29 29 31 / 4%);
  color-scheme: light;
}

html[data-aitfind-skin='precision']:not(
    [data-theme-preset]:not([data-theme-preset='default'])
  ):not(:has(body[data-theme-preset]:not([data-theme-preset='default']))).dark {
  --aitfind-canvas: #151619;
  --aitfind-ink: #f1f2f3;
  --aitfind-surface: #1d1f23;
  --aitfind-popover: #23252a;
  --aitfind-muted: #22242a;
  --aitfind-muted-ink: #a6a8af;
  --aitfind-secondary: #2a2c31;
  --aitfind-primary: #f1f2f3;
  --aitfind-on-primary: #1d1d1f;
  --aitfind-accent: #e06767;
  --aitfind-selected: #312124;
  --aitfind-line: #35373c;
  --aitfind-input: #43464e;
  --aitfind-chart-2: #c2c5cc;
  --aitfind-chart-3: #8b8e98;
  --aitfind-chart-4: #bb8989;
  --aitfind-chart-5: #656975;
  --aitfind-table-head: #22242a;
  --aitfind-table-hover: #2a2c32;
  --aitfind-disabled: #222429;
  --aitfind-disabled-hover: #2a2c31;
  --aitfind-skeleton: #2a2c32;
  --aitfind-skeleton-highlight: #393c43;
  --aitfind-shadow: 0 2px 8px rgb(0 0 0 / 12%);
  color-scheme: dark;
}

/* Brand tokens are defaults only. Explicit presets keep the original native
 * cascade, including semantic signals. No spacing or radius token is changed.
 */
html[data-aitfind-skin='precision']:not(
    [data-theme-preset]:not([data-theme-preset='default'])
  ):not(:has(body[data-theme-preset]:not([data-theme-preset='default']))) {
  --background: var(--aitfind-canvas);
  --foreground: var(--aitfind-ink);
  --card: var(--aitfind-surface);
  --card-foreground: var(--aitfind-ink);
  --popover: var(--aitfind-popover);
  --popover-foreground: var(--aitfind-ink);
  --primary: var(--aitfind-primary);
  --primary-foreground: var(--aitfind-on-primary);
  --secondary: var(--aitfind-secondary);
  --secondary-foreground: var(--aitfind-ink);
  --muted: var(--aitfind-muted);
  --muted-foreground: var(--aitfind-muted-ink);
  --accent: var(--aitfind-selected);
  --accent-foreground: var(--aitfind-ink);
  --border: var(--aitfind-line);
  --input: var(--aitfind-input);
  --ring: var(--aitfind-accent);
  --chart-1: var(--aitfind-accent);
  --chart-2: var(--aitfind-chart-2);
  --chart-3: var(--aitfind-chart-3);
  --chart-4: var(--aitfind-chart-4);
  --chart-5: var(--aitfind-chart-5);
  --overview-accent-1: var(--aitfind-accent);
  --overview-accent-2: var(--aitfind-chart-2);
  --overview-accent-3: var(--aitfind-chart-3);
  --sidebar: var(--aitfind-canvas);
  --sidebar-foreground: var(--aitfind-ink);
  --sidebar-primary: var(--aitfind-accent);
  --sidebar-primary-foreground: var(--aitfind-canvas);
  --sidebar-accent: var(--aitfind-selected);
  --sidebar-accent-foreground: var(--aitfind-accent);
  --sidebar-border: var(--aitfind-line);
  --sidebar-ring: var(--aitfind-accent);
  --skeleton-base: var(--aitfind-skeleton);
  --skeleton-highlight: var(--aitfind-skeleton-highlight);
  --table-row: var(--aitfind-surface);
  --table-header: var(--aitfind-table-head);
  --table-header-hover: var(--aitfind-table-hover);
  --table-disabled: var(--aitfind-disabled);
  --table-disabled-hover: var(--aitfind-disabled-hover);
  --table-disabled-border: var(--aitfind-input);
  --link: var(--aitfind-accent);
}

html[data-aitfind-skin='precision'] body {
  font-family: var(--font-body);
  background-color: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
}

/* Code keeps the native mono stack, including font-mono on terminal rows.
 * Only native /logo.png is replaced; user avatars and vendor marks are not.
 */
html[data-aitfind-skin='precision'] img[src='/logo.png'] {
  content: url('./logo-light.png');
  border-radius: 0;
  object-fit: contain;
}

html[data-aitfind-skin='precision'].dark img[src='/logo.png'] {
  content: url('./logo-dark.png');
}

html[data-aitfind-skin='precision'] svg.lucide {
  stroke-width: 1.7;
}

/* Primary actions stay high contrast. Text links and selection indicators
 * use the red accent. Native disabled opacity and invalid rings still apply.
 */
html[data-aitfind-skin='precision'] .text-primary {
  color: var(--link);
}

/* Native primary-tinted labels use a neutral (black/white) tint. Keep their
 * native ink rather than red text on that tint, including pressed permissions.
 * Explicit custom presets retain their own primary/foreground pairing.
 */
html[data-aitfind-skin='precision']:not(
    [data-theme-preset]:not([data-theme-preset='default'])
  ):not(:has(body[data-theme-preset]:not([data-theme-preset='default'])))
  .text-primary:is([class~='bg-primary/10'], [class~='bg-primary/10!']) {
  color: var(--aitfind-ink);
}

/* The public rankings page uses an ARIA tab + decorative span rather than
 * the shared Tabs primitive. Recolor only its selected line, not the button.
 */
html[data-aitfind-skin='precision']
  .overflow-x-clip
  [role='tablist']
  > [role='tab'][aria-selected='true']:not([data-slot])
  > span[aria-hidden].bg-foreground {
  background-color: var(--aitfind-accent);
}

/* Docs navigation mirrors the main header's straight active marker. */
html[data-aitfind-skin='precision'] .toplinks a.active {
  background-color: transparent;
  background-image: linear-gradient(
    var(--aitfind-accent),
    var(--aitfind-accent)
  );
  background-size: 20px 2px;
  background-position: center bottom;
  background-repeat: no-repeat;
}

html[data-aitfind-skin='precision']
  [data-slot='tabs-list'][data-variant='line']
  [data-slot='tabs-trigger'][data-active]::after {
  background-color: var(--aitfind-accent);
}

html[data-aitfind-skin='precision']
  [data-slot='table-row'][data-state='selected'] {
  background-color: var(--aitfind-selected);
}

/* Reuse the public header's existing active text marker. A short background
 * line stays straight even when the native anchor has rounded corners.
 */
html[data-aitfind-skin='precision']
  header
  nav
  a.text-foreground:not([data-slot]) {
  background-image: linear-gradient(
    var(--aitfind-accent),
    var(--aitfind-accent)
  );
  background-size: 20px 2px;
  background-position: center bottom;
  background-repeat: no-repeat;
}

/* Documentation callouts retain their native border width and geometry. */
html[data-aitfind-skin='precision'] .callout:not(.neutral) {
  border-left-color: var(--aitfind-accent);
}

/* Only decorative chart-tone IconBadge wrappers are neutralized. Semantic
 * health icons, status dots, alert badges and provider marks keep their color.
 */
html[data-aitfind-skin='precision']
  span[aria-hidden='true']:has(> svg.lucide):is(
    .text-chart-1,
    .text-chart-2,
    .text-chart-3,
    .text-chart-4,
    .text-chart-5
  ) {
  color: var(--aitfind-ink);
  background-color: var(--aitfind-muted);
}

/* Native overview balance panel contains a hard-coded green gradient stop.
 * Match its source-specific gradient class, never arbitrary content artwork.
 */
html[data-aitfind-skin='precision']
  [class*='bg-[linear-gradient(135deg,color-mix(in_oklch,var(--overview-accent-2)'] {
  background-image: linear-gradient(
    135deg,
    var(--aitfind-muted),
    var(--aitfind-surface)
  );
}

/* Explicit public-page decoration only: Hero's animated h1, Pricing and
 * Rankings' PublicLayout > relative wrapper, and CTA's existing title block.
 * No functional/status background or provider artwork is selected.
 */
html[data-aitfind-skin='precision']
  section:has(h1.landing-animate-fade-up)
  > [aria-hidden][style*='radial-gradient'],
html[data-aitfind-skin='precision']
  .overflow-x-clip
  > .relative
  > [aria-hidden].pointer-events-none[style*='radial-gradient'],
html[data-aitfind-skin='precision']
  section:has(> .max-w-2xl h2 > .bg-clip-text)
  > [aria-hidden][style*='radial-gradient'] {
  background-image: none !important;
}

html[data-aitfind-skin='precision']
  section:has(h1.landing-animate-fade-up)
  h1
  > .bg-clip-text,
html[data-aitfind-skin='precision']
  section:has(> .max-w-2xl h2 > .bg-clip-text)
  h2
  > .bg-clip-text {
  color: var(--aitfind-accent);
  background-image: none;
  -webkit-text-fill-color: var(--aitfind-accent);
}

/* Home Features bento demo only. The size-6 blue numbered pill and model
 * hover tiles are decorative examples; semantic blue elsewhere is untouched.
 */
html[data-aitfind-skin='precision']
  section:has(> .max-w-6xl > .grid.gap-px.rounded-xl)
  .text-blue-500 {
  color: var(--aitfind-accent);
}

html[data-aitfind-skin='precision']
  section:has(> .max-w-6xl > .grid.gap-px.rounded-xl)
  .rounded-full.text-blue-500 {
  border-color: color-mix(in srgb, var(--aitfind-accent) 30%, transparent);
  background-color: var(--aitfind-selected);
}

html[data-aitfind-skin='precision']
  section:has(> .max-w-6xl > .grid.gap-px.rounded-xl)
  [class~='hover:border-blue-500/30'][class~='hover:bg-blue-500/5']:hover {
  border-color: color-mix(in srgb, var(--aitfind-accent) 30%, transparent);
  background-color: var(--aitfind-selected);
}

html[data-aitfind-skin='precision']
  section:has(h1.landing-animate-fade-up)
  .landing-animate-fade-up.rounded-full {
  color: var(--aitfind-muted-ink);
  background-color: var(--aitfind-surface);
  border-color: var(--aitfind-line);
}

html[data-aitfind-skin='precision']
  section:has(h1.landing-animate-fade-up)
  .landing-animate-fade-up.rounded-full
  span[class*='bg-blue-'] {
  background-color: var(--aitfind-accent);
}

html[data-aitfind-skin='precision']
  section:has(h1.landing-animate-fade-up)
  a[href='https://ccswitch.io']
  > span[class*='bg-blue-'] {
  color: var(--aitfind-muted-ink);
  background-color: var(--aitfind-muted);
}

/* HeroTerminalDemo has a unique hard-coded blue-black surface. The selector
 * is limited to its native home section and current source class fragment.
 */
html[data-aitfind-skin='precision']
  section:has(h1.landing-animate-fade-up)
  [class*='dark:bg-[#0b0f17]'] {
  background-color: var(--aitfind-surface);
  border-color: var(--aitfind-line);
  box-shadow: var(--aitfind-shadow);
}

html[data-aitfind-skin='precision']
  section:has(h1.landing-animate-fade-up)
  [class*='dark:bg-[#0b0f17]']
  :is(.border-b, .border-t) {
  border-color: var(--aitfind-line);
}

html[data-aitfind-skin='precision']
  section:has(h1.landing-animate-fade-up)
  [class*='dark:bg-[#0b0f17]']
  > :is(.border-t, .font-mono)
  > .border-t {
  background-color: transparent;
}

html[data-aitfind-skin='precision']
  section:has(h1.landing-animate-fade-up)
  [class*='dark:bg-[#0b0f17]']
  > .border-t {
  background-color: transparent;
}

html[data-aitfind-skin='precision']
  section:has(h1.landing-animate-fade-up)
  [class*='dark:bg-[#0b0f17]']
  button {
  color: var(--aitfind-muted-ink);
}

html[data-aitfind-skin='precision']
  section:has(h1.landing-animate-fade-up)
  [class*='dark:bg-[#0b0f17]']
  button:not(.border-transparent) {
  color: var(--aitfind-ink);
  border-bottom-color: var(--aitfind-accent);
}

html[data-aitfind-skin='precision']
  section:has(h1.landing-animate-fade-up)
  [class*='dark:bg-[#0b0f17]']
  > .border-b
  > span[class*='bg-'] {
  color: var(--aitfind-accent);
  background-color: var(--aitfind-selected);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--aitfind-accent) 30%, transparent);
}

/* Request and response code use a single ink, as in the approved reference.
 * The 200 OK green dot is outside this code grid and stays semantic green.
 */
html[data-aitfind-skin='precision']
  section:has(h1.landing-animate-fade-up)
  [class*='dark:bg-[#0b0f17]']
  > .font-mono
  :is(.break-words, .break-words span) {
  color: var(--aitfind-ink);
}

html[data-aitfind-skin='precision']
  section:has(h1.landing-animate-fade-up)
  [class*='dark:bg-[#0b0f17]']
  :is(span, div)[class*='text-foreground/']:not(.break-words *) {
  color: var(--aitfind-muted-ink);
}

@media (prefers-reduced-motion: reduce) {
  html[data-aitfind-skin='precision'] .landing-animate-fade-up {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  html[data-aitfind-skin='precision']
    section:has(h1.landing-animate-fade-up)
    .animate-ping {
    animation: none !important;
  }
}