style.css

@import "tailwindcss";

@theme {
  --color-brand-50: #f0fdfa;
  --color-brand-100: #ccfbf1;
  --color-brand-200: #99f6e4;
  --color-brand-300: #5eead4;
  --color-brand-400: #2dd4bf;
  --color-brand-500: #14b8a6;
  --color-brand-600: #0d9488;
  --color-brand-700: #0f766e;
  --color-brand-800: #115e59;
  --color-brand-900: #134e4a;
  --color-brand-950: #042f2e;
}

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

/*
 * Design-system foundation (UI-CORE). Before this layer existed the app never
 * declared its own background, text color, or color-scheme, so the webview fell
 * back to the OS-dark native defaults - which made dropdowns and text unreadable
 * on a dark-theme OS. Declaring all three here is the single most important
 * contrast fix: the app now owns its light/dark surfaces and tells the browser
 * how to render native controls (selects, checkboxes, scrollbars). Teal is the
 * app accent, so native checkboxes/radios get the teal accent-color too.
 */
@layer base {
  :root {
    color-scheme: light dark;
  }
  html,
  body,
  #app {
    @apply bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-zinc-100;
  }
  input[type="checkbox"],
  input[type="radio"] {
    @apply accent-teal-600;
  }

  /*
   * Tailwind v3+ dropped the old preflight `cursor: pointer` reset for
   * buttons, so every <button> in the app (every button/link-button, tab
   * header, and icon button here is a native <button>) fell back to the
   * browser's default arrow cursor on hover. One global rule fixes all of
   * them; :not(:disabled) keeps disabled buttons on their existing
   * `disabled:cursor-not-allowed` utility instead of fighting it.
   */
  button:not(:disabled) {
    cursor: pointer;
  }
}