/**
 * Base Styles
 * Foundation styles that apply to the entire application
 * Compatible with Tailwind CSS v4
 */

/* Radius scale — theme-independent, shared by light and dark */
:root {
  --radius: 0.625rem;
  --radius-sm: 0.375rem;
  /* Control corner — shared by interactive controls (nav items, inputs,
   * search, value chips) so they round consistently. ~10px reads like
   * Claude/macOS. Override per preset for a tighter/softer feel. */
  --radius-control: 0.625rem;
  --radius-popover: 0.75rem;
  /* Dialog corner — tightened from 1.5rem to read like Claude/macOS panels
   * (round, but not pill-soft). Default preset only; preset themes that set
   * their own `radius` are unaffected. */
  --radius-dialog: 1rem;
  --radius-tooltip: 0.375rem;

  /* Typography tokens — overridable per preset */
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-size-base: 0.875rem;
  --font-size-sm: 0.8125rem;
  --font-size-xs: 0.75rem;
  --font-size-lg: 1rem;
  --font-size-xl: 1.125rem;
  --line-height-base: 1.5;
  --letter-spacing-base: 0em;
}

/* Base element styles */
* {
  border-color: var(--border);
}

/* Suppress the native (often white/auto) focus outline app-wide — every
 * interactive ui-core component provides its own `focus-visible:ring-*` in the
 * blue `--ring` token. Without this, clicking certain inputs (where the browser
 * applies `:focus` but not `:focus-visible`) shows an ugly white outline ON TOP
 * of our ring. Keyboard accessibility is preserved via the ring utilities.
 */
:where(input, textarea, select, button, a, [tabindex], [role="button"], [contenteditable]):focus {
  outline: none;
}

/* Pointer cursor on every interactive control.
 *
 * Tailwind v4 preflight sets `cursor: default` on <button>; a browser adds
 * the implicit pointer back, but a native webview (Wails/Electron WKWebView)
 * does NOT — buttons then feel "dead" (arrow cursor on hover). Restore it
 * here, in the design system, so every consumer gets it without sprinkling
 * `cursor-pointer` on each control. `:where()` keeps specificity at zero, so
 * a component's explicit `cursor-*` (text inputs, drag handles, the
 * `disabled:` states below) always wins. Disabled controls get `not-allowed`.
 */
:where(
  button,
  a[href],
  [role="button"],
  [role="tab"],
  [role="menuitem"],
  [role="option"],
  [role="switch"],
  [role="checkbox"],
  [role="radio"],
  summary,
  label[for],
  select
):not(:disabled):not([aria-disabled="true"]) {
  cursor: pointer;
}

:where(button, a, [role="button"]):disabled,
:where(button, a, [role="button"])[aria-disabled="true"] {
  cursor: not-allowed;
}

html {
  font-weight: 400;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  font-feature-settings: "rlig" 1, "calt" 1;
}