/* =========================================================
   global.css — Design tokens, typography, base body styles
   ========================================================= */

/* ---------------------------------------------------------
   Design Tokens (CSS Custom Properties)
   --------------------------------------------------------- */
:root {
  /* Colours */
  --color-bg:          #0d0d12;
  --color-purple:      #ac5ef6;
  --color-cyan:        #00e5ff;
  --color-text:        #e8e8e0;     /* warm white — primary text */
  --color-text-dim:    #9090aa;     /* muted — secondary / inactive */
  --color-amber:       #ffb347;     /* warm accent — secondary highlights */
  --color-surface:     #13131a;     /* slightly lighter bg for cards/panels */
  --color-border:      #2e2e46;     /* subtle structural borders */

  /* Typography */
  --font-heading:  'Audiowide', sans-serif;
  --font-mono:     'Share Tech Mono', monospace;

  /* Type scale */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-body: 1rem;       /* 16px — body paragraph copy */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.5rem;     /* 24px */
  --text-xl:   2rem;       /* 32px */
  --text-2xl:  3rem;       /* 48px */
  --text-3xl:  4rem;       /* 64px */

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Layout */
  --nav-height:    4rem;
  --max-width:     1200px;
  --content-gutter: var(--space-8);

  /* Transitions */
  --transition-fast:   120ms ease;
  --transition-base:   240ms ease;
  --transition-slow:   480ms ease;
}

/* ---------------------------------------------------------
   Base
   --------------------------------------------------------- */
html {
  background-color: var(--color-bg);
  color: var(--color-text);
}

body {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  background-color: var(--color-bg);
  color: var(--color-text);
  padding-top: var(--nav-height); /* offset for fixed nav */
  padding-bottom: var(--footer-height); /* offset for fixed footer */
  overflow-x: hidden; /* prevent accidental horizontal scroll outside intentional galleries */
}

/* ---------------------------------------------------------
   Headings
   --------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-heading);
  line-height: 1.1;
  letter-spacing: 0.02em;
}

h4, h5, h6 {
  font-family: var(--font-mono);
  line-height: 1.3;
  letter-spacing: 0.05em;
}

/* ---------------------------------------------------------
   Layout helpers
   --------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--content-gutter);
}

/* ---------------------------------------------------------
   Focus visible — accessible keyboard outline
   --------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 3px;
}

/* ---------------------------------------------------------
   Selection
   --------------------------------------------------------- */
::selection {
  background-color: var(--color-purple);
  color: var(--color-bg);
}

/* ---------------------------------------------------------
   ASCII character field — fixed full-viewport backdrop
   --------------------------------------------------------- */
#ascii-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;           /* behind all page content */
  pointer-events: none; /* clicks pass through */
  display: block;
}

/* Main content sits above the canvas (nav handles its own stacking) */
main {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------
   Scanline overlay — CRT horizontal-line texture
   Sits above everything; pointer-events disabled.
   --------------------------------------------------------- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent        0px,
    transparent        2px,
    rgba(0, 0, 0, 0.06) 2px,
    rgba(0, 0, 0, 0.06) 3px
  );
}

/* ---------------------------------------------------------
   Scrollbar (Webkit)
   --------------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-dim);
}

/* ---------------------------------------------------------
   Responsive: tighten gutters on small screens
   --------------------------------------------------------- */
@media (max-width: 600px) {
  :root {
    --content-gutter: var(--space-4);
    --text-2xl: 2.25rem;
    --text-3xl: 2.75rem;
  }
}

/* ---------------------------------------------------------
   Reduced motion — honour user OS preference.
   Collapses all transition and animation durations to near-
   zero so the page is fully usable without movement.
   JS files check this same media query and skip their own
   animation loops (glitch transition, ASCII canvas).
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    transition-delay:          0ms    !important;
  }
}