/* NYCU GDC Showcase — Design Tokens */
:root {
  /* Stage / theatre dark */
  --bg-stage: oklch(0.16 0.012 260);
  --bg-deeper: oklch(0.10 0.010 260);
  --bg-rise: oklch(0.21 0.014 260);
  --bg-card: oklch(0.24 0.014 260);

  /* Warm whites & paper */
  --paper: oklch(0.96 0.012 80);
  --paper-dim: oklch(0.86 0.012 80);
  --paper-faint: oklch(0.62 0.012 80);
  --paper-line: oklch(0.36 0.012 260);

  /* GDC accents */
  --gdc-orange: #FF8A3D;
  --gdc-blue: #3DB5FF;
  --gdc-orange-soft: oklch(0.78 0.16 55);
  --gdc-blue-soft: oklch(0.78 0.13 235);
  --signal-red: oklch(0.67 0.21 25);

  /* Type scale */
  --f-mono: "JetBrains Mono", ui-monospace, "Courier New", monospace;
  --f-sans: "Noto Sans TC", "Inter", system-ui, sans-serif;
  --f-serif: "Noto Serif TC", "EB Garamond", serif;
  --f-hand: "Caveat", "Noto Serif TC", cursive;

  /* Spacing */
  --pad-edge: clamp(20px, 4vw, 64px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--f-sans);
  background: var(--bg-stage);
  color: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Common atoms */
.mono { font-family: var(--f-mono); letter-spacing: 0.02em; }
.serif { font-family: var(--f-serif); }
.hand { font-family: var(--f-hand); }
.muted { color: var(--paper-faint); }
.dim { color: var(--paper-dim); }

.tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  color: var(--paper-dim);
}

a { color: inherit; text-decoration: none; }

/* Grain overlay — adds the "projection" feel */
.grain::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(rgba(255,255,255,0.6) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
}

/* Scrollbar polish */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-deeper); }
::-webkit-scrollbar-thumb { background: var(--paper-line); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--paper-faint); }

/* Reusable corner crosshair (registration marks) */
.corner-marks { position: relative; }
.corner-marks::before, .corner-marks::after,
.corner-marks > .cm-tr, .corner-marks > .cm-bl, .corner-marks > .cm-br {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--paper-faint);
  opacity: 0.6;
}
.corner-marks::before { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.corner-marks::after { top: 12px; right: 12px; border-left: none; border-bottom: none; }
.corner-marks > .cm-bl { bottom: 12px; left: 12px; border-right: none; border-top: none; }
.corner-marks > .cm-br { bottom: 12px; right: 12px; border-left: none; border-top: none; }

/* Selection */
::selection { background: var(--gdc-orange); color: var(--bg-deeper); }

/* Reusable button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border: 1px solid var(--paper);
  background: transparent;
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
}
.btn:hover { background: var(--paper); color: var(--bg-deeper); }
.btn-primary { background: var(--gdc-orange); border-color: var(--gdc-orange); color: var(--bg-deeper); }
.btn-primary:hover { background: var(--paper); border-color: var(--paper); }