/* Symonic site theme — single source of truth for production + prototypes */

:root {
  /* Neutrals lifted one step for a less “crushed” void; accent hexes unchanged */
  --void:    #1C1A18;
  --deep:    #151311;
  --surface: #22201E;
  --panel:   #2A2725;
  --border:  #383532;
  --ash:     #45423E;
  --muted:   #6A655E;
  --sub:     #928A82;
  --text:    #CFC8BF;
  --light:   #EDE7DF;
  /* Red-orange accent (was amber) */
  --amber:   #E04D26;
  --amber-b: #F56B45;
  --amber-g: rgba(224,77,38,0.12);
  --amber-d: #7A2E18;
  --copper:  #B84A28;
  --grid-line: rgba(224,77,38,0.055);
  --grid-size: 22px;
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;
  --focus-ring:   2px solid var(--amber-b);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--amber);
  color: var(--void);
  font-family: var(--font-mono);
  font-size: 11px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.skip-link:focus {
  left: 0;
  outline: none;
  box-shadow: 0 0 0 3px var(--void), 0 0 0 5px var(--amber-b);
}

html, body, a, button, input, textarea, select {
  cursor: crosshair;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--focus-ring);
}

[id] {
  scroll-margin-top: 88px;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  background-color: var(--void);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-attachment: fixed;
  color: var(--text);
  overflow-x: hidden;
  cursor: crosshair;
}