/* ==========================================================================
   DANDI STUDIO — Global Design System
   Commodore 64 / 8-bit Retro Aesthetic
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323:wght@400&family=Share+Tech+Mono&display=swap');

/* --------------------------------------------------------------------------
   CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
  /* Colour palette */
  --bg:          #000000;
  --green:       #33FF33;
  --green-dim:   #1a661a;
  --green-faint: #0a3a0a;
  --red:         #FF0000;
  --purple:      #6C5EB5;
  --cyan:        #00FFFF;
  --yellow:      #FFD700;
  --white:       #FFFFFF;

  /* Typography */
  --font-pixel: 'Press Start 2P', 'Courier New', monospace;
  --font-body:  'VT323', 'Courier New', monospace;
  --font-mono:  'Share Tech Mono', 'Courier New', monospace;

  /* Spacing */
  --gap-sm: 6px;
  --gap-md: 12px;
  --gap-lg: 24px;
}

/* --------------------------------------------------------------------------
   Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background:  var(--bg);
  color:       var(--green);
  font-family: var(--font-mono);
  line-height: 1.6;
  /* Disable font smoothing for crisp pixel rendering */
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
}

img, canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */
a {
  color: var(--green);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--cyan);
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Utility Classes
   -------------------------------------------------------------------------- */

/* Pixel-art border using box-shadow (no images) */
.pixel-border {
  box-shadow:
    2px  0   0 0 var(--green),
    -2px 0   0 0 var(--green),
    0    2px 0 0 var(--green),
    0   -2px 0 0 var(--green);
}

.pixel-border--cyan {
  box-shadow:
    2px  0   0 0 var(--cyan),
    -2px 0   0 0 var(--cyan),
    0    2px 0 0 var(--cyan),
    0   -2px 0 0 var(--cyan);
}

/* Visibility helpers */
.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Green glow text */
.glow {
  text-shadow:
    0 0 6px  var(--green),
    0 0 14px var(--green-dim);
}

/* Pixel-art button */
.btn-pixel {
  display: inline-block;
  font-family:     var(--font-pixel);
  font-size:       8px;
  color:           var(--green);
  background:      transparent;
  border:          1px solid var(--green);
  padding:         8px 14px;
  cursor:          pointer;
  letter-spacing:  1px;
  text-transform:  uppercase;
  transition:      color 0.1s, background 0.1s;
  white-space:     nowrap;
}

.btn-pixel:hover,
.btn-pixel:focus {
  color:       var(--bg);
  background:  var(--green);
  outline:     none;
}

/* Horizontal rule in retro style */
hr.pixel-rule {
  border: none;
  border-top: 1px solid var(--green-dim);
  margin: var(--gap-lg) 0;
}