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

@layer base {
  :root {
    /* Ink & Amber — deep neutral surfaces, one authoritative amber accent. */
    --ink: 9 9 11;
    --surface: 18 18 21;
    --surface-2: 24 24 28;
    --line: 38 38 44;
    --line-strong: 58 58 66;
    --fg: 240 240 242;
    --muted: 150 150 158;
    --faint: 104 104 112;
    --accent: 245 165 36; /* warm gold */
    --accent-fg: 12 10 6;
    --success: 52 211 153;
    --warning: 245 165 36;
    --danger: 251 113 133;
    --info: 56 189 248;
  }

  * {
    border-color: rgb(var(--line));
  }

  html {
    color-scheme: dark;
  }

  body {
    background-color: rgb(var(--ink));
    color: rgb(var(--fg));
    font-family: var(--font-sans), ui-sans-serif, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Atmosphere: a faint amber glow up top + a subtle dot grid. */
    background-image:
      radial-gradient(60rem 40rem at 78% -8%, rgb(var(--accent) / 0.08), transparent 60%),
      radial-gradient(48rem 40rem at 8% 0%, rgb(var(--info) / 0.05), transparent 55%),
      radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.022) 1px, transparent 0);
    background-size:
      100% 100%,
      100% 100%,
      22px 22px;
    background-attachment: fixed;
  }

  ::selection {
    background: rgb(var(--accent) / 0.25);
    color: rgb(var(--fg));
  }

  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-thumb {
    background: rgb(var(--line-strong));
    border-radius: 999px;
    border: 3px solid rgb(var(--ink));
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
}

@layer components {
  /* Monospace eyebrow labels — the control-room signature. */
  .eyebrow {
    @apply font-mono text-[11px] uppercase tracking-[0.18em] text-faint;
  }

  .panel {
    @apply rounded-2xl border border-line bg-surface/70 shadow-panel backdrop-blur-sm;
  }

  .hairline {
    background: linear-gradient(
      90deg,
      transparent,
      rgb(var(--line-strong)) 20%,
      rgb(var(--line-strong)) 80%,
      transparent
    );
    height: 1px;
  }

  .focus-ring {
    @apply outline-none ring-2 ring-accent/50 ring-offset-2 ring-offset-ink;
  }
}
