/* ═══════════════════════════════════════════════
   WORDS MATRIX — base.css
   Design tokens · grain overlay · theme vars
   Dark mode default; light via [data-theme="light"]
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── DARK THEME (default) ── */
:root {
  --bg:       #09080b;
  --bg2:      #110f17;
  --bg3:      #1a1726;
  --bg4:      #221f30;
  --bg5:      #2c2842;

  --gold:     #c9a84c;
  --gold-dim: #b8952c;
  --gold-lit: #e8c96a;
  --gold-glow: rgba(201,168,76,0.10);
  --gold-rim:  rgba(201,168,76,0.22);
  --gold-rim2: rgba(201,168,76,0.38);

  --text:     #f0ebe0;
  --text2:    #c8c0d8;
  --text3:    #9a8aaa;
  --text4:    #6a5e7a;

  --border:   rgba(201,168,76,0.14);
  --border2:  rgba(201,168,76,0.30);
  --border3:  rgba(201,168,76,0.50);

  /* Part-of-speech accent colours */
  --pos-noun-bg:  rgba(124,95,192,0.18);
  --pos-noun-fg:  #b09ee8;
  --pos-noun-rim: rgba(124,95,192,0.32);

  --pos-verb-bg:  rgba(44,140,110,0.18);
  --pos-verb-fg:  #6ecfb0;
  --pos-verb-rim: rgba(44,140,110,0.32);

  --pos-adj-bg:   rgba(201,168,76,0.14);
  --pos-adj-fg:   #e8c96a;
  --pos-adj-rim:  rgba(201,168,76,0.28);

  --pos-adv-bg:   rgba(200,80,60,0.18);
  --pos-adv-fg:   #f0907a;
  --pos-adv-rim:  rgba(200,80,60,0.30);

  --pos-other-bg:  rgba(100,100,120,0.18);
  --pos-other-fg:  #9a8aaa;
  --pos-other-rim: rgba(100,100,120,0.28);

  /* Relation-type accent colours */
  --rel-syn:    #b09ee8;
  --rel-ant:    #f0907a;
  --rel-hyper:  var(--gold);
  --rel-hypo:   #6ecfb0;
  --rel-mero:   #85b7eb;
  --rel-holo:   #9ac759;
  --rel-sim:    var(--text2);
  --rel-other:  var(--text3);

  /* Grain opacity */
  --grain-opacity: 0.045;

  /* Radii */
  --r-sm:  8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
}

/* ── LIGHT THEME ── */
[data-theme="light"] {
  --bg:       #f4f0e8;
  --bg2:      #fefcf8;
  --bg3:      #ede8dc;
  --bg4:      #e2dcd0;
  --bg5:      #d5cec0;

  --gold:     #8a6a18;
  --gold-dim: #7a5a10;
  --gold-lit: #aa8828;
  --gold-glow: rgba(138,106,24,0.08);
  --gold-rim:  rgba(138,106,24,0.22);
  --gold-rim2: rgba(138,106,24,0.40);

  --text:     #1a1520;
  --text2:    #3a3050;
  --text3:    #6a608a;
  --text4:    #9a90aa;

  --border:   rgba(100,80,30,0.14);
  --border2:  rgba(100,80,30,0.28);
  --border3:  rgba(100,80,30,0.50);

  --pos-noun-bg:  rgba(100,75,165,0.12);
  --pos-noun-fg:  #5040a0;
  --pos-noun-rim: rgba(100,75,165,0.28);

  --pos-verb-bg:  rgba(20,110,80,0.12);
  --pos-verb-fg:  #0e6e50;
  --pos-verb-rim: rgba(20,110,80,0.28);

  --pos-adj-bg:   rgba(138,106,24,0.12);
  --pos-adj-fg:   #7a5a10;
  --pos-adj-rim:  rgba(138,106,24,0.28);

  --pos-adv-bg:   rgba(170,60,40,0.12);
  --pos-adv-fg:   #aa3c28;
  --pos-adv-rim:  rgba(170,60,40,0.26);

  --pos-other-bg:  rgba(80,80,90,0.10);
  --pos-other-fg:  #6a608a;
  --pos-other-rim: rgba(80,80,90,0.22);

  --rel-syn:    #5040a0;
  --rel-ant:    #aa3c28;
  --rel-hyper:  var(--gold);
  --rel-hypo:   #0e6e50;
  --rel-mero:   #1860a0;
  --rel-holo:   #3a6010;
  --rel-sim:    var(--text2);
  --rel-other:  var(--text3);

  --grain-opacity: 0.028;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  transition: background 0.3s ease, color 0.3s ease;
}

/* ── GRAIN OVERLAY ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 192px 192px;
}

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4 { font-family: 'Cinzel', serif; font-weight: 600; color: var(--text); }

.mono { font-family: 'JetBrains Mono', 'Courier New', monospace; }
.serif { font-family: 'Cormorant Garamond', Georgia, serif; }
.cinzel { font-family: 'Cinzel', serif; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bg5); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }

/* ── FOCUS ── */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── TRANSITIONS ── */
a, button { transition: color 0.15s, background 0.15s, border-color 0.15s, opacity 0.15s; }

/* ── UTILITIES ── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}