the-other-dude/frontend/src/index.css

@font-face {
  font-family: 'Manrope';
  src: url('./assets/fonts/Manrope-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('./assets/fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('./assets/fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

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

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@layer base {
  :root {
    /* ── Deep Space Light Mode ── */
    --background: 240 20% 99%;
    --surface: 0 0% 100%;
    --elevated: 240 33% 96%;
    --border: 0 0% 0% / 0.08;
    --border-bright: 240 14% 88%;

    --text-primary: 240 7% 7%;
    --text-secondary: 249 14% 37%;
    --text-muted: 249 11% 57%;

    --accent: 239 76% 62%;
    --accent-hover: 244 75% 58%;
    --accent-muted: 239 76% 62% / 0.1;
    --ring: 239 76% 62%;

    --success: 142 71% 35%;
    --warning: 32 95% 44%;
    --error: 0 72% 51%;
    --info: 217 91% 50%;

    --online: 142 71% 35%;
    --offline: 0 72% 51%;
    --unknown: 249 11% 57%;

    --chart-1: 239 76% 62%;
    --chart-2: 142 71% 35%;
    --chart-3: 32 95% 44%;
    --chart-4: 0 72% 51%;
    --chart-5: 280 68% 50%;
    --chart-6: 217 91% 50%;

    /* Sidebar */
    --sidebar: 210 40% 98%;

    /* Functional tokens mapped to Tailwind names */
    --foreground: var(--text-primary);
    --card: var(--surface);
    --card-foreground: var(--text-primary);
    --popover: var(--surface);
    --popover-foreground: var(--text-primary);
    --primary: var(--accent);
    --primary-foreground: 0 0% 100%;
    --secondary: var(--elevated);
    --secondary-foreground: var(--text-primary);
    --muted: var(--elevated);
    --muted-foreground: var(--text-secondary);
    --input: var(--border);
    --destructive: var(--error);

    /* Border radius */
    --radius: 0.5rem;
  }

  .dark {
    /* ── Deep Space Dark Mode ── */
    --background: 240 7% 7%;
    --surface: 240 22% 10%;
    --elevated: 240 28% 14%;
    --border: 0 0% 100% / 0.06;
    --border-bright: 240 24% 19%;

    --text-primary: 240 14% 91%;
    --text-secondary: 249 9% 59%;
    --text-muted: 249 13% 44%;

    --accent: 235 91% 74%;
    --accent-hover: 239 84% 67%;
    --accent-muted: 239 84% 67% / 0.15;
    --ring: 235 91% 74%;

    --success: 142 69% 58%;
    --warning: 38 92% 50%;
    --error: 0 84% 60%;
    --info: 217 91% 60%;

    --online: 142 69% 58%;
    --offline: 0 84% 60%;
    --unknown: 249 9% 59%;

    --chart-1: 235 91% 74%;
    --chart-2: 142 69% 58%;
    --chart-3: 38 92% 50%;
    --chart-4: 0 84% 60%;
    --chart-5: 280 68% 68%;
    --chart-6: 217 91% 60%;

    --foreground: var(--text-primary);
    --card: var(--surface);
    --card-foreground: var(--text-primary);
    --popover: var(--surface);
    --popover-foreground: var(--text-primary);
    --primary: var(--accent);
    --primary-foreground: 222 47% 11%;
    --secondary: var(--elevated);
    --secondary-foreground: var(--text-primary);
    --muted: 217 33% 17% / 0.5;
    --muted-foreground: var(--text-secondary);
    --input: var(--border);
    --sidebar: 222 47% 11%;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  * {
    box-sizing: border-box;
    border-color: hsl(var(--border));
  }

  html, body {
    margin: 0;
    padding: 0;
  }

  body {
    background-color: hsl(var(--background));
    color: hsl(var(--text-primary));
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  code, kbd, pre, samp, .font-mono {
    font-family: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  }

  #root {
    min-height: 100vh;
  }

  /* Scrollbar styling */
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: hsl(var(--elevated)); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: hsl(var(--border-bright)); }

  /* ── Deep Space transitions ── */
  button, a, input, select, textarea,
  [role="button"], [role="tab"], [role="menuitem"] {
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, opacity 150ms ease;
  }

  [data-sidebar] {
    transition: width 200ms ease;
  }

  [data-radix-dialog-overlay] {
    transition: opacity 150ms ease;
  }
  [data-radix-dialog-content] {
    transition: opacity 150ms ease, transform 150ms ease;
  }

  .font-mono, [class*="font-mono"] {
    font-variant-numeric: tabular-nums;
  }
}