/* public/css/tokens.css
   Design system for Eyes of Ogradhad.
   Aesthetic: ancient scrying glass meets observatory HUD.
   Deep void palette with a single luminous amber accent — the "eye" that watches.
*/

:root {
  /* --- Palette ------------------------------------------------------- */
  --void:        #07080c;   /* deepest background */
  --void-2:      #0c0e14;   /* elevated panel */
  --void-3:      #131620;   /* interactive surface */
  --rim:         #1c2030;   /* subtle borders */
  --rim-bright:  #2a3047;   /* focused border */

  --bone:        #e8e2d0;   /* primary text */
  --bone-dim:    #a59f8e;   /* secondary text */
  --ash:         #55524a;   /* tertiary / disabled */

  --eye:         #d4a952;   /* primary accent — amber/gold */
  --eye-glow:    #f0c373;   /* hover / emphasis */
  --eye-dim:     #8a6d34;   /* muted variant */

  --blood:       #c04848;   /* danger, destruction, enemy */
  --verdant:     #6aa77c;   /* positive, vitality */
  --arcane:      #8a7fc7;   /* mystical highlight */

  /* --- Type --------------------------------------------------------- */
  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-body:    'Fraunces', 'Iowan Old Style', 'Palatino', serif;
  --font-mono:    'JetBrains Mono', 'Consolas', ui-monospace, monospace;

  /* --- Scale -------------------------------------------------------- */
  --r-sm:  4px;
  --r:     8px;
  --r-lg:  14px;

  --shadow-deep:  0 24px 60px -20px rgba(0, 0, 0, 0.9);
  --shadow-rim:   0 0 0 1px var(--rim), 0 20px 40px -16px rgba(0, 0, 0, 0.6);
  --shadow-eye:   0 0 24px -6px rgba(212, 169, 82, 0.35);

  --t-fast:   140ms cubic-bezier(.4, 0, .2, 1);
  --t:        240ms cubic-bezier(.4, 0, .2, 1);
  --t-slow:   480ms cubic-bezier(.4, 0, .2, 1);
}

/* --- Base --------------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--void);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0;
}

a {
  color: var(--eye);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--eye-glow); }

button {
  font-family: inherit;
  cursor: pointer;
}

input, textarea, select {
  font-family: inherit;
  color: inherit;
}

/* Focus — visible but restrained */
:focus-visible {
  outline: 2px solid var(--eye);
  outline-offset: 2px;
}

/* Reusable helpers */
.mono { font-family: var(--font-mono); }
.muted { color: var(--bone-dim); }
.eye { color: var(--eye); }

/* --- Atmosphere --------------------------------------------------------
   A single radial gradient under everything creates the sense of a distant
   luminous presence, as if something is watching back. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(
      ellipse 80% 60% at 50% 30%,
      rgba(212, 169, 82, 0.06) 0%,
      rgba(212, 169, 82, 0.02) 35%,
      transparent 70%
    );
  pointer-events: none;
  z-index: 0;
}

/* Subtle grain overlay for texture (SVG data URI, no external request). */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.6;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}