/* LocalAI theme bridge.
   The palette lives in theme-localai.css as the kit's colour roles
   (--dk-*), for light and dark. This file keeps the app's own variable
   names (--color-*, --shadow-*) and points each one at a role, so every
   existing rule picks up the palette without being edited. The roles
   switch with [data-theme] on <html>, so nothing here depends on the mode
   except the few data-visualisation hues that have no role.
   The non-colour tokens (type, space, radius, control height, motion and
   focus) are defined here too, and the kit's own roles are pointed at them
   at the end of this file. The vendored kit files are generated: override
   their tokens here, never edit them. */
:root {
  /* Surfaces */
  --color-bg-primary: var(--dk-canvas);
  --color-bg-secondary: var(--dk-card);
  --color-bg-tertiary: var(--dk-inset);
  --color-bg-overlay: color-mix(in srgb, var(--dk-canvas) 92%, transparent);
  --color-bg-hover: var(--dk-hover);

  --color-surface-sunken: var(--dk-inset);
  --color-surface-hover: var(--dk-hover);
  --color-surface-elevated: color-mix(in srgb, var(--dk-card) 88%, var(--dk-text));

  /* Primary: the accent. Hover and press mix in a little text colour,
     as the kit does for filled accent controls. */
  --color-primary: var(--dk-accent);
  --color-primary-hover: color-mix(in srgb, var(--dk-accent) 88%, var(--dk-text));
  --color-primary-active: color-mix(in srgb, var(--dk-accent) 76%, var(--dk-text));
  --color-primary-text: var(--dk-on-accent);
  --color-primary-light: var(--dk-accent-wash);
  --color-primary-border: color-mix(in srgb, var(--dk-accent) 38%, transparent);

  --color-selection-bg: color-mix(in srgb, var(--dk-accent) 32%, transparent);

  --color-secondary: var(--dk-muted);
  --color-secondary-hover: var(--dk-text);
  --color-secondary-light: color-mix(in srgb, var(--dk-muted) 14%, transparent);

  --color-accent: var(--dk-accent);
  --color-accent-hover: color-mix(in srgb, var(--dk-accent) 88%, var(--dk-text));
  --color-accent-light: var(--dk-accent-wash);
  --color-accent-border: color-mix(in srgb, var(--dk-accent) 38%, transparent);

  /* Text */
  --color-text-primary: var(--dk-text);
  --color-text-secondary: color-mix(in srgb, var(--dk-text) 78%, var(--dk-muted));
  --color-text-muted: var(--dk-muted);
  --color-text-tertiary: var(--dk-muted);
  --color-text-disabled: color-mix(in srgb, var(--dk-muted) 60%, var(--dk-canvas));
  --color-text-inverse: var(--dk-on-accent);

  /* Borders: hairlines use the decorative edge, strong lines and form
     controls use the control edge. */
  --color-border-subtle: color-mix(in srgb, var(--dk-edge) 65%, var(--dk-canvas));
  --color-border-default: var(--dk-edge);
  --color-border-strong: var(--dk-control-edge);
  --color-border-divider: color-mix(in srgb, var(--dk-edge) 75%, var(--dk-canvas));
  /* The edge of a layered surface (card, pane, composer, popover): the
     decorative edge with a little text colour, so a card reads against the
     canvas in dark as well as light. */
  --color-border-card: color-mix(in srgb, var(--dk-edge) 88%, var(--dk-text));
  --color-border-primary: color-mix(in srgb, var(--dk-accent) 55%, transparent);
  --color-border-focus: var(--dk-accent);

  /* Status */
  --color-success: var(--dk-ok);
  --color-success-light: var(--dk-ok-wash);
  --color-success-border: color-mix(in srgb, var(--dk-ok) 38%, transparent);
  --color-warning: var(--dk-warn);
  --color-warning-light: var(--dk-warn-wash);
  --color-warning-border: color-mix(in srgb, var(--dk-warn) 38%, transparent);
  --color-error: var(--dk-error);
  --color-error-light: var(--dk-error-wash);
  --color-error-border: color-mix(in srgb, var(--dk-error) 38%, transparent);
  --color-info: var(--dk-accent-text);
  --color-info-light: var(--dk-accent-wash);
  --color-info-border: color-mix(in srgb, var(--dk-accent) 38%, transparent);

  --color-modal-backdrop: var(--dk-scrim);

  --color-focus-ring: var(--dk-accent);
  --color-eyebrow: var(--dk-accent-text);

  /* Data viz: roles where one fits, fixed hues for the rest (see the
     data-theme blocks below). */
  --color-data-1: var(--dk-accent);
  --color-data-2: var(--dk-error);
  --color-data-4: var(--dk-warn);
  --color-data-5: var(--dk-ok);
  --color-data-8: var(--dk-accent-text);

  /* Log streams */
  --color-log-stdout: var(--color-text-secondary);
  --color-log-stderr: var(--dk-error-text);
  --color-log-info: var(--dk-accent-text);
  --color-log-warn: var(--dk-warn-text);

  /* Shadows: the kit's two, tinted by the theme, plus a faint one for
     small parts. Cards are flat with the rest shadow; floating surfaces
     (menus, dialogs, toasts) use the float shadow. */
  --shadow-subtle: 0 1px 2px rgb(var(--dk-shadow-tint) / calc(.06 * var(--dk-shadow-k, 1)));
  --shadow-sm: var(--dk-shadow-rest);
  --shadow-md: var(--dk-shadow-float);
  --shadow-lg: var(--dk-shadow-float);
  --shadow-glow: var(--dk-shadow-float);
  --shadow-sidebar: none;

  --shadow-inset-top: inset 0 0 0 0 transparent;
  --shadow-inset-hi: inset 0 0 0 0 transparent;

  --color-toggle-off: var(--dk-control-edge);
  --color-toggle-on: var(--dk-accent);

  /* Motion. One set of durations and easings: motion explains a change of
     state or place, never decorates. No easing overshoots, so nothing
     bounces. Exits use --ease-in and run about a quarter faster than enters.
     The old names below are aliases, kept until every rule uses the new ones. */
  --dur-instant: 90ms;   /* press, toggle thumb, colour on hover */
  --dur-fast: 140ms;     /* hover reveal, tooltip, chip state, small exits */
  --dur-base: 200ms;     /* menus, popovers, list item enter, toast */
  --dur-slow: 280ms;     /* side panes, sheets, sidebar collapse */
  --dur-page: 180ms;     /* route cross-fade */
  --dur-glide: 360ms;    /* a part that travels to its place on the next page */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);         /* default enter */
  --ease-out-strong: cubic-bezier(0.16, 1, 0.3, 1);  /* panes, sheets */
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);          /* exits */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);     /* progress, reorder */

  --duration-fast: var(--dur-fast);
  --duration-normal: var(--dur-base);
  --duration-slow: var(--dur-slow);
  --ease-default: var(--ease-out);
  --ease-spring: var(--ease-out);
  --duration-reveal: 420ms;
  --ease-reveal: var(--ease-out-strong);

  /* Spacing: 4-point steps. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-14: 56px;
  --page-gutter: var(--sp-8);
  --page-max-content: 1120px;

  --spacing-xs: var(--sp-1);
  --spacing-sm: var(--sp-2);
  --spacing-md: var(--sp-4);
  --spacing-lg: var(--sp-6);
  --spacing-xl: var(--sp-8);
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --space-section: clamp(2rem, 1.2rem + 3vw, 3.5rem);

  /* Radii: sharp geometry. 4 for kbd and inline tags, 6 for chips and
     badges, 8 for controls, 12 for cards, lists, panes and popovers, 16 for
     dialogs and sheets. 50% only for avatars and dots. */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-xl: var(--r-lg);
  --radius-full: 9999px;

  /* Typography: Geist for every role, Geist Mono only for code. The
     packages register the faces as "Geist Variable" and "Geist Mono
     Variable", so those names come first. */
  --font-sans: "Geist Variable", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono Variable", "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Type scale: size / line height. Body and list text is 15; 13 is for
     secondary lines, buttons and tabs; 12 for meta rows and hints. */
  --fs-meta: 12px;
  --lh-meta: 16px;
  --fs-small: 13px;
  --lh-small: 18px;
  --fs-body: 15px;
  --lh-body: 22px;
  --leading-body: 1.467; /* 22 / 15, for inherited line heights */
  --fs-lead: 17px;
  --lh-lead: 24px;
  --fs-section: var(--fs-lead);
  --lh-section: var(--lh-lead);
  --fs-title: 28px;
  --lh-title: 34px;
  --fs-display: 40px;
  --lh-display: 44px;

  --text-xs: var(--fs-meta);
  --text-sm: var(--fs-small);
  --text-base: var(--fs-body);
  --text-lg: var(--fs-section);
  /* 21 is retired: use --fs-section or --fs-title in new rules. */
  --text-xl: var(--dk-text-21);
  --text-2xl: var(--fs-title);
  --text-3xl: var(--fs-title);
  --text-4xl: var(--fs-display);

  /* Control heights: 36 on a desktop, 28 compact (rows, toolbars, panes),
     40 for the composer and mobile primary actions. A coarse pointer gets
     40 everywhere (see the media block below). */
  --ctl-h: 36px;
  --ctl-h-sm: 28px;
  --ctl-h-lg: 40px;
  --control-h: var(--ctl-h);
  --control-h-sm: var(--ctl-h-sm);

  /* Focus: a 2px canvas gap and a 2px accent ring at 70%. As a shadow for
     controls that draw their own ring, as an outline everywhere else. */
  --focus-ring-color: color-mix(in srgb, var(--dk-accent) 70%, transparent);
  --focus-ring: 0 0 0 2px var(--dk-canvas), 0 0 0 4px var(--focus-ring-color);

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

  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --sidebar-width: 240px;
  --sidebar-width-collapsed: 64px;

  /* Page-width archetypes — applied via .page / .page--narrow /
     .page--medium / .page--wide. Default is wide-enough for ops/data
     tables; medium suits two-column app pages (sticky nav + form);
     narrow caps reading width. */
  --page-max-narrow: 760px;
  --page-max-medium: 1080px;
  --page-max-default: 1600px;
  --page-max-wide: none;

  /* Responsive breakpoints — kept here so JS can read them via getComputedStyle. */
  --bp-mobile: 640px;
  --bp-tablet: 1024px;
}

/* Surface ladder of the calm palette. Floating surfaces (menus, popovers)
   sit above raised ones, which sit above cards, so in dark each step is a
   little lighter: a card-coloured menu over a card would vanish. Light keeps
   the white card, which the float shadow lifts. The strong edge is for a
   hovered or selected card outline. */
:root,
[data-theme="dark"] {
  --color-surface-raised: #1b2524;
  --color-surface-float: #232f2e;
  --color-border-emphasis: #3a4a47;
}
[data-theme="light"] {
  --color-surface-raised: var(--dk-card);
  --color-surface-float: var(--dk-card);
  --color-border-emphasis: color-mix(in srgb, var(--dk-edge) 70%, var(--dk-control-edge));
}

/* Data hues that have no status role come from the theme's chart series,
   so charts and code highlighting follow the palette in both modes. */
:root {
  --color-data-3: var(--dk-series-3);
  --color-data-6: var(--dk-series-2);
  --color-data-7: var(--dk-series-1);
}

/* The kit's roles, pointed at the product tokens. The kit ships OS font
   stacks, a softer radius scale and a spring easing that overshoots; the
   product uses Geist, sharper radii and no overshoot. */
:root {
  --dk-font-body: var(--font-sans);
  --dk-font-display: var(--font-sans);
  --dk-font-mono: var(--font-mono);

  --dk-text-12: var(--fs-meta);
  --dk-text-13: var(--fs-small);
  --dk-text-15: var(--fs-body);
  --dk-text-17: var(--fs-lead);
  --dk-text-32: var(--fs-title);
  --dk-text-44: var(--fs-display);

  --dk-space-1: var(--sp-1);
  --dk-space-2: var(--sp-2);
  --dk-space-3: var(--sp-3);
  --dk-space-4: var(--sp-4);
  --dk-space-5: var(--sp-6);
  --dk-space-6: var(--sp-8);

  --dk-radius-1: var(--r-sm);
  --dk-radius-2: var(--r-md);
  --dk-radius-3: var(--r-lg);
  --dk-radius-4: var(--r-xl);

  --dk-dur-1: var(--dur-fast);
  --dk-dur-2: var(--dur-base);
  --dk-dur-3: var(--dur-slow);
  --dk-ease-out: var(--ease-out-strong);
  --dk-ease-spring: var(--ease-out);
  --dk-press-scale: .98;
}
@media (prefers-reduced-motion: reduce) {
  :root { --dk-press-scale: 1; }
}

/* Kit control heights follow --ctl-h. The kit sets the button height on
   the element, so each size is restated here in the kit's order. */
.dk-btn { --dk-btn-h: var(--ctl-h); }
.dk-btn--sm { --dk-btn-h: var(--ctl-h-sm); }
.dk-btn--lg { --dk-btn-h: 48px; }
.dk-input, .dk-select { height: var(--ctl-h); }

/* A finger needs a bigger target than a mouse: on a coarse pointer the
   default control is 40 and the compact one 32, as before the desktop
   scale became denser. */
@media (pointer: coarse) {
  :root {
    --ctl-h: var(--ctl-h-lg);
    --ctl-h-sm: 32px;
  }
}

/* A phone: a narrower gutter and a smaller page title. */
@media (max-width: 640px) {
  :root {
    --page-gutter: var(--sp-4);
    --fs-title: 24px;
    --lh-title: 30px;
  }
}

/* Dark: the kit's secondary button is an inset fill, darker than the canvas,
   with at most a hairline edge, so it almost disappears. Buttons use the card
   fill and this edge, at least 3:1 against the canvas and a card. The button
   rules that read it are in components/ui/ui.css. */
[data-theme="dark"] {
  --ctl-edge-dark: color-mix(in srgb, var(--dk-control-edge) 70%, var(--dk-edge));
}