@import "tailwindcss";

@theme {
  /* Surface Architecture */
  --color-background: #0b0f10;
  --color-surface: #0b0f10;
  --color-surface-dim: #0b0f10;
  --color-surface-bright: #272d2f;
  --color-surface-variant: #212728;
  --color-surface-container-lowest: #000000;
  --color-surface-container-low: #101415;
  --color-surface-container: #151a1c;
  --color-surface-container-high: #1b2022;
  --color-surface-container-highest: #212728;
  --color-surface-tint: #aaffdc;

  /* Primary — Cyan */
  --color-primary: #aaffdc;
  --color-primary-dim: #00edb4;
  --color-primary-container: #00fdc1;
  --color-primary-fixed: #00fdc1;
  --color-primary-fixed-dim: #00edb4;
  --color-on-primary: #00654b;
  --color-on-primary-container: #005c44;
  --color-on-primary-fixed: #004734;
  --color-on-primary-fixed-variant: #00664c;
  --color-inverse-primary: #006c51;

  /* Secondary — Magenta */
  --color-secondary: #ff51fa;
  --color-secondary-dim: #ff51fa;
  --color-secondary-container: #a900a9;
  --color-secondary-fixed: #ffbdf3;
  --color-secondary-fixed-dim: #ffa6f3;
  --color-on-secondary: #400040;
  --color-on-secondary-container: #fff5f9;
  --color-on-secondary-fixed: #620061;
  --color-on-secondary-fixed-variant: #920091;

  /* Tertiary — Lime */
  --color-tertiary: #f3ffca;
  --color-tertiary-dim: #beee00;
  --color-tertiary-container: #cafd00;
  --color-tertiary-fixed: #cafd00;
  --color-tertiary-fixed-dim: #beee00;
  --color-on-tertiary: #516700;
  --color-on-tertiary-container: #4a5e00;
  --color-on-tertiary-fixed: #3a4a00;
  --color-on-tertiary-fixed-variant: #526900;

  /* Error */
  --color-error: #ff716c;
  --color-error-dim: #d7383b;
  --color-error-container: #9f0519;
  --color-on-error: #490006;
  --color-on-error-container: #ffa8a3;

  /* On-surface */
  --color-on-background: #fafdfe;
  --color-on-surface: #fafdfe;
  --color-on-surface-variant: #a8acad;
  --color-inverse-surface: #f7fafb;
  --color-inverse-on-surface: #525657;

  /* Outline */
  --color-outline: #727677;
  --color-outline-variant: #44494a;

  /* Typography — CSS variables set by next/font in layout.tsx */
  --font-headline: var(--font-headline), "Space Grotesk", sans-serif;
  --font-body: var(--font-body), "Inter", sans-serif;
  --font-label: var(--font-headline), "Space Grotesk", sans-serif;

  /* 0px border radius — enforced globally */
  --radius: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
}

/* Scanline CRT overlay */
.scanlines {
  background: linear-gradient(
      rgba(18, 16, 16, 0) 50%,
      rgba(0, 0, 0, 0.2) 50%
    ),
    linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.03),
      rgba(0, 255, 0, 0.01),
      rgba(0, 0, 255, 0.03)
    );
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

/* Glitch hover effect */
.glitch-hover:hover {
  text-shadow: 2px 0 #ff51fa, -2px 0 #00fdc1;
}

/* Ghost border — monolith inset shadow */
.monolith-border {
  box-shadow: inset 0 0 0 1px rgba(170, 255, 220, 0.1);
}

/* Crosshair cursor */
body {
  cursor: crosshair;
}

/* Selection colors */
::selection {
  background-color: var(--color-primary-container);
  color: var(--color-on-primary-container);
}