@import "tailwindcss";

@theme {
  --color-primary: #e63946;
  --color-accent: #ffc300;
  --color-neutral: #0b1d3a;
  --color-surface: #0f1014;
  --color-ink: #eaf2ff;
  --font-sans: "Vazirmatn", system-ui, sans-serif;
  --font-display: "Lalezar", "Vazirmatn", system-ui, sans-serif;
}

:root {
  /* ---- brand-book contract (read by the extractor) ---- */
  --primary: #e63946;
  --accent: #ffc300;
  --surface: #0f1014;
  --ink: #eaf2ff;

  /* ---- derived / semantic aliases used across components ---- */
  --secondary: #2bd64f;
  --neutral: #0b1d3a;
  --ink-muted: color-mix(in oklch, var(--ink) 62%, transparent);
  --muted: color-mix(in oklch, var(--ink) 38%, transparent);
  --border: color-mix(in oklch, var(--ink) 12%, transparent);
  --surface-2: #11151c;
  --surface-elevated: #171b24;
  --shadow-hard: 4px 4px 0 0 #000000;
  --shadow-hard-lg: 8px 8px 0 0 #000000;

  /* ---- token names referenced by App/section files ---- */
  --color-text: var(--ink);
  --color-surface: var(--surface);
  --color-surface-elevated: var(--surface-elevated);
  --color-primary-500: var(--primary);
  --color-primary-700: #8f0f18;
  --color-accent-500: var(--accent);
  --color-accent-700: #8c6b00;
  --color-neutral-500: var(--neutral);
  --color-neutral-700: #051021;
  --color-neutral-900: #030912;

  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-steps: steps(8, end);
}

html,
body {
  background: var(--surface);
  color: var(--ink);
}

body {
  font-family: "Vazirmatn", system-ui, sans-serif;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: "Lalezar", "Vazirmatn", system-ui, sans-serif;
  line-height: 1.4;
  letter-spacing: 0;
}

.num-fa {
  font-feature-settings: "ss01";
}

.pixelated {
  image-rendering: pixelated;
}

.scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 2px,
    color-mix(in oklch, var(--ink) 6%, transparent) 2px 4px
  );
}

@keyframes blink-hard {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

.blink {
  animation: blink-hard 1.06s steps(1, end) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .blink {
    animation: none;
  }
}