zroc/zroc-ui/src/styles/index.css

/* src/styles/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* ── Theme tokens (space-separated RGB for Tailwind opacity support) ── */
:root,
[data-theme="dark"] {
  --color-canvas:         8 13 26;
  --color-surface:        13 21 38;
  --color-raised:         19 31 53;
  --color-border:         30 45 71;
  --color-border-bright:  42 64 102;
  --color-text-primary:   226 232 240;
  --color-text-secondary: 124 147 181;
  --color-text-muted:     74 96 128;
}

[data-theme="light"] {
  --color-canvas:         240 244 248;
  --color-surface:        255 255 255;
  --color-raised:         248 250 252;
  --color-border:         226 232 240;
  --color-border-bright:  203 213 225;
  --color-text-primary:   15 23 42;
  --color-text-secondary: 71 85 105;
  --color-text-muted:     148 163 184;
}

@layer base {
  html { @apply scroll-smooth; }

  body {
    @apply bg-canvas text-text-primary font-sans;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  }

  ::-webkit-scrollbar       { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { @apply bg-surface; }
  ::-webkit-scrollbar-thumb { @apply bg-border-bright rounded-full; }
  ::-webkit-scrollbar-thumb:hover { @apply bg-accent; }

  *:focus-visible {
    @apply outline-none ring-1 ring-accent ring-offset-2 ring-offset-canvas;
  }
}

@layer components {
  .data-value {
    @apply font-data tabular-nums;
  }

  .status-dot {
    @apply inline-block w-2 h-2 rounded-full flex-shrink-0;
  }
  .status-dot-ok   { @apply bg-ok   shadow-glow-ok   animate-pulse-led; }
  .status-dot-warn { @apply bg-warn; }
  .status-dot-crit { @apply bg-crit shadow-glow-crit animate-pulse-led; }
  .status-dot-idle { @apply bg-text-muted; }

  .card {
    @apply bg-surface border border-border rounded-lg;
  }
  .card-raised {
    @apply bg-raised border border-border rounded-lg shadow-panel;
  }

  .table-row-hover {
    @apply hover:bg-raised transition-colors duration-100 cursor-pointer;
  }

  .field {
    @apply w-full bg-canvas border border-border rounded-md px-3 py-2
           text-sm text-text-primary placeholder-text-muted
           focus:border-accent focus:ring-0
           transition-colors duration-150;
  }
  .field-label {
    @apply block text-xs font-mono uppercase tracking-widest text-text-muted mb-1.5;
  }

  .btn-primary {
    @apply inline-flex items-center gap-2 px-4 py-2 rounded-md
           bg-accent hover:bg-accent-bright text-white text-sm font-medium
           shadow-glow-sm hover:shadow-glow
           transition-all duration-150 disabled:opacity-40 disabled:cursor-not-allowed;
  }

  .btn-ghost {
    @apply inline-flex items-center gap-2 px-4 py-2 rounded-md
           bg-transparent hover:bg-raised text-text-secondary hover:text-text-primary
           border border-border hover:border-border-bright text-sm font-medium
           transition-all duration-150;
  }

  .btn-danger {
    @apply inline-flex items-center gap-2 px-4 py-2 rounded-md
           bg-crit/10 hover:bg-crit/20 text-crit border border-crit/30 text-sm font-medium
           transition-all duration-150;
  }

  .badge {
    @apply inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-mono font-medium;
  }
  .badge-ok   { @apply bg-ok/10   text-ok   border border-ok/20; }
  .badge-warn { @apply bg-warn/10 text-warn border border-warn/20; }
  .badge-crit { @apply bg-crit/10 text-crit border border-crit/20; }
  .badge-info { @apply bg-info/10 text-info border border-info/20; }
  .badge-muted { @apply bg-raised text-text-muted border border-border; }

  .section-title {
    @apply font-mono text-xs uppercase tracking-widest text-text-muted;
  }

  .drawer-overlay {
    @apply fixed inset-0 bg-canvas/60 backdrop-blur-sm z-40;
  }
  .drawer-panel {
    @apply fixed top-0 right-0 h-full w-full max-w-lg bg-surface
           border-l border-border shadow-panel z-50
           animate-slide-in-right flex flex-col;
  }
}