@import 'tailwindcss';
@import '@acid-info/logos-tokens/theme.css';

/* Scan workspace UI package so its Tailwind classes are emitted. */
@source "../../../packages/ui/src/**/*.{ts,tsx}";

/* Custom breakpoint for the 1440px desktop design canvas.
   Sits between xl (1280px) and 2xl (1536px). */
@theme {
  --breakpoint-desktop: 1440px;
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-01, currentColor);
  }

  a,
  button {
    outline-color: var(--color-brand-yellow);
  }

  a:focus-visible,
  button:focus-visible {
    outline: 2px solid;
    border-radius: var(--radius-sm);
    outline-color: var(--color-brand-yellow);
  }
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
  text-rendering: optimizelegibility;
}

body {
  background-color: var(--color-brand-off-white);
  color: var(--color-brand-dark-green);
}