frontend/src/index.css

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

/* ─────────────────────────────────────────────────────────────────────── */
/*  Theme tokens via CSS variables (rgb triples, used by Tailwind config) */
/* ─────────────────────────────────────────────────────────────────────── */

:root {
  /* Default: dark theme */
  color-scheme: dark;
  --bg: 10 13 20;             /* near-black w/ blue undertone */
  --surface: 17 24 39;
  --surface-alt: 26 32 53;
  --line: 31 41 55;
  --ink: 226 232 240;
  --ink-dim: 100 116 139;
  --ink-mute: 71 85 105;
  --cyber: 0 212 255;
  --cyber-dim: 0 153 187;
  --danger: 255 61 90;
  --danger-dim: 170 41 64;
  --warn: 245 158 11;
  --warn-dim: 168 107 0;
  --grid-lines: 255 255 255 / 0.025;
  --hero-glow-cyber: 0 212 255 / 0.10;
  --hero-glow-danger: 255 61 90 / 0.06;
}

.theme-light {
  color-scheme: light;
  --bg: 248 250 252;          /* slate-50 */
  --surface: 255 255 255;
  --surface-alt: 241 245 249; /* slate-100 */
  --line: 226 232 240;        /* slate-200 */
  --ink: 15 23 42;            /* slate-900 */
  --ink-dim: 71 85 105;       /* slate-600 */
  --ink-mute: 148 163 184;    /* slate-400 */
  --cyber: 6 144 191;         /* darker cyan for AA contrast on light */
  --cyber-dim: 14 116 144;
  --danger: 220 38 56;        /* darker red */
  --danger-dim: 159 18 41;
  --warn: 217 119 6;          /* darker amber */
  --warn-dim: 146 64 14;
  --grid-lines: 0 0 0 / 0.04;
  --hero-glow-cyber: 6 144 191 / 0.08;
  --hero-glow-danger: 220 38 56 / 0.05;
}

html, body, #root {
  height: 100%;
}

body {
  @apply bg-bg text-ink font-sans antialiased;
  background-image:
    radial-gradient(circle at 25% -10%, rgb(var(--hero-glow-cyber)), transparent 45%),
    radial-gradient(circle at 80% 110%, rgb(var(--hero-glow-danger)), transparent 45%);
  background-attachment: fixed;
}

::selection {
  background: rgb(var(--cyber) / 0.25);
  color: rgb(var(--ink));
}

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgb(var(--bg)); }
::-webkit-scrollbar-thumb { background: rgb(var(--line)); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--ink-mute)); }

@layer components {
  .panel {
    @apply rounded-xl border border-line bg-surface/85 backdrop-blur-sm shadow-ridge transition-colors;
  }
  .panel-alt {
    @apply rounded-xl border border-line bg-surface-alt/75 backdrop-blur-sm shadow-ridge transition-colors;
  }
  .panel-hover {
    @apply hover:border-cyber/40 hover:bg-surface/95;
  }
  .pill {
    @apply inline-flex items-center gap-1 rounded-full border border-line bg-surface-alt/60 px-2.5 py-0.5 text-xs font-mono text-ink-dim;
  }
  .pill-cyber {
    @apply pill border-cyber/40 bg-cyber/10 text-cyber;
  }
  .pill-danger {
    @apply pill border-danger/40 bg-danger/10 text-danger;
  }
  .pill-warn {
    @apply pill border-warn/40 bg-warn/10 text-warn;
  }
  .heading {
    @apply font-display tracking-tight text-ink;
  }
  .mono {
    @apply font-mono;
  }
  .grid-bg {
    background-image:
      linear-gradient(rgb(var(--grid-lines)) 1px, transparent 1px),
      linear-gradient(90deg, rgb(var(--grid-lines)) 1px, transparent 1px);
    background-size: 32px 32px;
  }
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-lg border border-line bg-surface-alt px-4 py-2 text-sm font-medium text-ink transition-all duration-150 hover:border-cyber/60 hover:text-cyber active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50;
  }
  .btn-primary {
    @apply btn border-cyber/60 bg-cyber/10 text-cyber hover:shadow-cyber hover:bg-cyber/15;
  }
  .btn-danger {
    @apply btn border-danger/60 bg-danger/10 text-danger hover:shadow-danger hover:text-danger hover:bg-danger/15;
  }
  .input {
    @apply w-full rounded-lg border border-line bg-surface-alt px-3 py-2 text-sm text-ink placeholder:text-ink-dim focus:border-cyber/60 focus:outline-none focus:ring-1 focus:ring-cyber/30 transition;
  }
  .label {
    @apply text-xs font-mono uppercase tracking-wider text-ink-dim;
  }
  .divider {
    @apply h-px bg-line;
  }
  .glow-on-hover {
    @apply transition-shadow hover:shadow-cyber;
  }
}

@layer utilities {
  .text-balance { text-wrap: balance; }
}