@import "tailwindcss";

@variant dark (&:where(.dark, .dark *));

@theme {
  /* Terminal-Noir palette */
  --color-bg:             #0a0a0a;
  --color-surface:        #111111;
  --color-surface-raised: #1a1a1a;
  --color-border:         #2a2a2a;
  --color-border-bright:  #444444;
  --color-text:           #e8e8e8;
  --color-text-label:     #666666;
  --color-text-dim:       #444444;
  --color-accent-green:   #00cc44;
  --color-accent-red:     #cc2200;

  /* Typography */
  --font-mono: "Source Code Pro", ui-monospace, monospace;
  --font-sans: ui-sans-serif, system-ui, sans-serif;

  /* Breakpoints */
  --breakpoint-xs: 576px;

  /* Animations */
  --animate-fade-in: fadeIn 120ms linear forwards;

  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* Base */
html {
  scroll-behavior: smooth;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-mono);
}

@layer base {
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
}

/* Default transitions — linear, fast */
a,
button {
  transition: color 120ms linear, border-color 120ms linear,
    background-color 120ms linear, opacity 120ms linear;
}

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