/* Self-hosted webfonts — no runtime CDN (cf. spec §7). */
@import '@fontsource/jetbrains-mono/300.css';
@import '@fontsource/jetbrains-mono/400.css';
@import '@fontsource/jetbrains-mono/500.css';
@import '@fontsource/jetbrains-mono/600.css';
@import '@fontsource/jetbrains-mono/700.css';
@import '@fontsource/ibm-plex-sans/300.css';
@import '@fontsource/ibm-plex-sans/400.css';
@import '@fontsource/ibm-plex-sans/500.css';
@import '@fontsource/ibm-plex-sans/600.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html,
  body,
  #root {
    @apply min-h-screen;
  }
  body {
    @apply bg-bg text-text font-sans;
    line-height: 1.6;
  }
  /* No transitions / hovers / animations baseline (cf. design.md §7). */
  *:focus-visible {
    outline: 1px solid theme('colors.cyan');
    outline-offset: 2px;
  }
  ::selection {
    background: rgb(6 182 212 / 0.25);
    color: theme('colors.text-bright');
  }
}

@layer utilities {
  /* Tinted accent fill — see design.md §2 "tinted fills". */
  .accent-fill-red    { background: rgb(239 68 68 / 0.15);   color: theme('colors.red'); }
  .accent-fill-orange { background: rgb(245 158 11 / 0.15);  color: theme('colors.orange'); }
  .accent-fill-yellow { background: rgb(234 179 8 / 0.15);   color: theme('colors.yellow'); }
  .accent-fill-green  { background: rgb(16 185 129 / 0.15);  color: theme('colors.green'); }
  .accent-fill-cyan   { background: rgb(6 182 212 / 0.15);   color: theme('colors.cyan'); }
  .accent-fill-blue   { background: rgb(59 130 246 / 0.15);  color: theme('colors.blue'); }
  .accent-fill-purple { background: rgb(139 92 246 / 0.15);  color: theme('colors.purple'); }
  .accent-fill-pink   { background: rgb(236 72 153 / 0.15);  color: theme('colors.pink'); }
  .accent-fill-rose   { background: rgb(244 63 94 / 0.15);   color: theme('colors.rose'); }
  .accent-fill-teal   { background: rgb(20 184 166 / 0.15);  color: theme('colors.teal'); }
}