@import "tailwindcss";
@import "./theme/index.css";
@import "./styles/components.css";

/* === Global base styles using theme tokens === */

html, body {
  background: transparent;
  color: var(--hh-color-text);
  font-family: var(--hh-font-mono);
}

/* Dark scrollbar matching cyberpunk theme */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--hh-raw-gray-950, #0a0a0f);
}

/* Push scrollbar track below the TR window notch (58px) */
.hh-window-chrome-content::-webkit-scrollbar-track {
  margin-top: 58px;
}

::-webkit-scrollbar-thumb {
  background: var(--hh-color-border, #333);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--hh-color-secondary, #fe00b3);
}

/* GPU-composited animation keyframes */

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes fade-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

@keyframes slide {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(200px); }
}

/* Animation utility classes */

.animate-rotate {
  animation: rotate 3s linear infinite;
}

.animate-fade-pulse {
  animation: fade-pulse 2s ease-in-out infinite;
}

.animate-slide {
  animation: slide 2.5s ease-in-out infinite;
}

/* Theme demo utilities */

/* ============================================================
   Cyberpunk angular geometry system
   All UI elements use 45-degree notched corners via clip-path.
   Panels use pseudo-element border technique for visible borders
   along the angular edges. filter: drop-shadow provides glow.
   ============================================================ */

/* --- Panel: notched card with angular border + fill --- */
.hh-panel {
  --notch: var(--hh-notch-lg);
  --bw: 2px;
  position: relative;
  padding: 1rem;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--hh-color-primary) 15%, transparent));
}

.hh-panel::before,
.hh-panel::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

/* Border layer */
.hh-panel::before {
  inset: 0;
  background: color-mix(in srgb, var(--hh-color-primary) 85%, transparent);
  clip-path: polygon(
    var(--notch) 0, 100% 0,
    100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%,
    0 100%, 0 var(--notch)
  );
  z-index: -2;
}

/* Fill layer (inset from border to reveal it)
   Diagonal correction: bw * 0.59 ≈ bw * (2 - √2) keeps the diagonal
   border the same apparent thickness as the straight edges.
   Background: faint horizontal scanline bars with radial vignette fade. */
.hh-panel::after {
  --fill: color-mix(in srgb, var(--hh-color-surface) 25%, color-mix(in srgb, var(--hh-raw-void-start, #030712) 85%, transparent));
  inset: var(--bw);
  background:
    /* Vignette: soft long-throw fade hides scanlines toward edges */
    radial-gradient(ellipse at center, transparent 20%, var(--fill) 80%),
    /* Horizontal scanline bars — 4px bar, 4px gap */
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 5px,
      color-mix(in srgb, var(--hh-color-text) 4%, transparent) 5px,
      color-mix(in srgb, var(--hh-color-text) 4%, transparent) 8px
    ),
    /* Base fill */
    var(--fill);
  clip-path: polygon(
    calc(var(--notch) - var(--bw) * 0.59) 0,
    100% 0,
    100% calc(100% - var(--notch) + var(--bw) * 0.59),
    calc(100% - var(--notch) + var(--bw) * 0.59) 100%,
    0 100%,
    0 calc(var(--notch) - var(--bw) * 0.59)
  );
  z-index: -1;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* --- Glowing divider line --- */
.hh-divider-glow {
  position: relative;
  border-bottom: 2px solid var(--hh-color-secondary);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.hh-divider-glow::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 0;
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--hh-color-secondary) 50%, transparent);
  pointer-events: none;
}

/* --- Button: angular outlined with glow on interact --- */
.hh-btn {
  --notch: var(--hh-notch-sm);
  --bw: 1px;
  --btn-bg: var(--hh-raw-void-start, #030712);
  position: relative;
  isolation: isolate;
  font-family: var(--hh-font-mono);
  font-size: var(--hh-text-sm);
  font-weight: var(--hh-weight-medium);
  padding: 0.375rem 1rem;
  background: transparent;
  border: none;
  color: var(--hh-color-secondary);
  cursor: pointer;
  transition: filter var(--hh-transition-fast);
}

.hh-btn::before,
.hh-btn::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

/* Border frame */
.hh-btn::before {
  inset: 0;
  background: currentColor;
  clip-path: polygon(
    var(--notch) 0, 100% 0,
    100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%,
    0 100%, 0 var(--notch)
  );
  z-index: -2;
}

/* Inner fill — same diagonal correction as panels */
.hh-btn::after {
  inset: var(--bw);
  background: var(--btn-bg);
  clip-path: polygon(
    calc(var(--notch) - var(--bw) * 0.59) 0,
    100% 0,
    100% calc(100% - var(--notch) + var(--bw) * 0.59),
    calc(100% - var(--notch) + var(--bw) * 0.59) 100%,
    0 100%,
    0 calc(var(--notch) - var(--bw) * 0.59)
  );
  z-index: -1;
  transition: background var(--hh-transition-fast);
}

.hh-btn:hover {
  filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 30%, transparent));
}

.hh-btn:hover::after {
  background: color-mix(in srgb, currentColor 15%, var(--btn-bg));
}

.hh-btn:active::after {
  background: color-mix(in srgb, currentColor 25%, var(--btn-bg));
}

.hh-btn--primary {
  color: var(--hh-color-primary);
}

/* --- Input: angular field with border glow on focus --- */
.hh-input {
  font-family: var(--hh-font-mono);
  font-size: var(--hh-text-sm);
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--hh-color-border);
  background: color-mix(in srgb, var(--hh-color-surface) 50%, transparent);
  color: var(--hh-color-text);
  outline: none;
  transition: border-color var(--hh-transition-fast), box-shadow var(--hh-transition-fast);
}

.hh-input::placeholder {
  color: var(--hh-color-text-dim);
}

.hh-input:focus {
  border-color: var(--hh-color-primary);
  box-shadow: 0 0 6px 0 color-mix(in srgb, var(--hh-color-primary) 25%, transparent);
}

/* Striped pattern background for surface transparency demo */
.hh-pattern-bg {
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 8px,
      color-mix(in srgb, var(--hh-color-primary) 15%, transparent) 8px,
      color-mix(in srgb, var(--hh-color-primary) 15%, transparent) 9px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 8px,
      color-mix(in srgb, var(--hh-color-secondary) 10%, transparent) 8px,
      color-mix(in srgb, var(--hh-color-secondary) 10%, transparent) 9px
    );
}