/*
 * IdeA design system — global theme (LD).
 *
 * Tailwind v4, CSS-first: semantic tokens declared under `@theme` become
 * utilities (e.g. `--color-surface` → `bg-surface text-surface border-surface`).
 * The palette is a **dark IDE** theme by default — IdeA is an IDE, not a website.
 * Features should consume these tokens + the `shared/ui` components rather than
 * hard-coding colours.
 */

@import "tailwindcss";

@theme {
  /* Surfaces (back-to-front) */
  --color-canvas: #0e1116; /* app background */
  --color-surface: #161b22; /* panels, cards */
  --color-raised: #1c2430; /* inputs, hovered rows */
  --color-overlay: #222c3a; /* popovers, menus */

  /* Lines & text */
  --color-border: #2b3440;
  --color-border-strong: #3b4757;
  --color-content: #e6edf3; /* primary text */
  --color-muted: #9aa7b4; /* secondary text */
  --color-faint: #6b7785; /* disabled / placeholder */

  /* Accent & status */
  --color-primary: #4c8dff;
  --color-primary-hover: #3b7bf0;
  --color-on-primary: #ffffff;
  --color-danger: #f85149;
  --color-success: #3fb950;
  --color-warning: #d29922;

  /* Typography */
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --font-mono:
    "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo,
    Consolas, monospace;

  /* Radii */
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
}

@layer base {
  /* Tell the engine (incl. the Tauri WebKitGTK webview) to render native form
     controls — <select> popups, <option>, checkboxes, scrollbars — in dark mode.
     Without this, WebKitGTK paints them with the light system GTK theme, which is
     why dropdowns looked white in the packaged app but not in a dark browser. */
  :root {
    color-scheme: dark;
  }

  html,
  body,
  #root {
    height: 100%;
  }

  /* #69 — phone viewports. `height: 100%` resolves against the *large* viewport,
     so a mobile browser's collapsing URL bar leaves the last ~60px of the app
     under the toolbar and makes xterm's fit() overshoot. `100dvh` tracks the
     *dynamic* viewport instead. Desktop is unaffected: there the dynamic and
     large viewports are identical, so this resolves to the same height. */
  @supports (height: 100dvh) {
    html,
    body,
    #root {
      height: 100dvh;
    }
  }

  body {
    margin: 0;
    background-color: var(--color-canvas);
    color: var(--color-content);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    /* Phones: never rubber-band the whole document — the app owns its own
       scroll containers, and an overscrolling body detaches the fixed shell. */
    overscroll-behavior-y: none;
  }

  /* A consistent focus ring across the kit (keyboard accessibility). */
  :focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
  }
}

/* Indeterminate progress sliver (ticket #54 F2): a model download whose total
   size is unknown slides a sliver back and forth instead of showing a fake %. */
@keyframes model-server-indeterminate {
  0% {
    left: -40%;
  }
  100% {
    left: 100%;
  }
}