frontend/src/index.css

/* ── Google Font: IBM Plex Mono (must precede @tailwind) ───────────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

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

/* ══════════════════════════════════════════════════════════════════════
   IIIF Studio — Retro Design System (global styles)
   Inspired by Xerox Star, Smalltalk-80, GEOS, classic Mac
   ══════════════════════════════════════════════════════════════════════ */

/* ── Base reset for retro look ─────────────────────────────────────── */
@layer base {
  html {
    font-family: 'IBM Plex Mono', 'Courier New', Courier, monospace;
    font-size: 13px;
    line-height: 1.5;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    background-color: #c0c0c0;
    color: #000000;
  }

  body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
  }

  /* Disable subpixel antialiasing for that crisp pixel look */
  * {
    text-rendering: optimizeSpeed;
  }

  /* Focus ring: dotted black outline (classic retro) */
  *:focus-visible {
    outline: 1px dotted #000000;
    outline-offset: 1px;
  }

  /* Selection: classic inverted */
  ::selection {
    background-color: #000080;
    color: #ffffff;
  }
}

/* ── Retro scrollbar (Windows 3.1 style) ───────────────────────────── */
@layer components {
  /* Webkit-based browsers */
  .retro-scroll::-webkit-scrollbar {
    width: 16px;
    height: 16px;
  }

  .retro-scroll::-webkit-scrollbar-track {
    background:
      repeating-conic-gradient(
        #c0c0c0 0% 25%, #dfdfdf 0% 50%
      ) 50% / 2px 2px;
  }

  .retro-scroll::-webkit-scrollbar-thumb {
    background-color: #c0c0c0;
    border: 1px solid #000000;
    box-shadow:
      inset -1px -1px 0 #808080,
      inset 1px 1px 0 #ffffff;
  }

  .retro-scroll::-webkit-scrollbar-button {
    background-color: #c0c0c0;
    border: 1px solid #000000;
    box-shadow:
      inset -1px -1px 0 #808080,
      inset 1px 1px 0 #ffffff;
    display: block;
    height: 16px;
    width: 16px;
  }

  .retro-scroll::-webkit-scrollbar-corner {
    background-color: #c0c0c0;
  }

  /* Firefox */
  .retro-scroll {
    scrollbar-width: auto;
    scrollbar-color: #c0c0c0 #dfdfdf;
  }
}

/* ── Desktop dithered background ───────────────────────────────────── */
@layer utilities {
  .bg-retro-dither {
    background-color: #c0c0c0;
    background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23a0a0a0'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23a0a0a0'/%3E%3C/svg%3E");
    background-repeat: repeat;
  }

  .bg-retro-dither-dark {
    background-color: #808080;
    background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23606060'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23606060'/%3E%3C/svg%3E");
    background-repeat: repeat;
  }

  .bg-retro-dither-light {
    background-color: #dfdfdf;
    background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23c8c8c8'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23c8c8c8'/%3E%3C/svg%3E");
    background-repeat: repeat;
  }

  /* Horizontal lines pattern */
  .bg-retro-lines {
    background-color: #c0c0c0;
    background-image: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 1px,
      #a0a0a0 1px,
      #a0a0a0 2px
    );
    background-size: 100% 4px;
  }
}