/* ==========================================================================
   QUIZZITCH — base.css
   Corporate, sleek, minimalist design system.
   Matching CelesteCon #26 official design architecture (celestecon.aeross.org).
   ========================================================================== */

/* --- 01 · DESIGN TOKENS --------------------------------------------------- */
:root {
  /* Canvas & Base */
  --bg:                 #100E0C;   /* Deep warm obsidian outer viewport */
  --bg-dim:             #161310;
  
  /* Warm Bone / Ivory Card Theme (The CelesteCon Paper) */
  --bone:               #E8E1CE;
  --bone-hi:            #F2EDDD;
  --bone-dim:           #DDD4BC;
  
  /* Ink Palette for Text & UI */
  --ink:                #161310;   /* Primary high-contrast text */
  --ink-2:              #33302A;   /* Secondary text */
  --ink-3:              #57534A;   /* Muted text & metadata */
  --ink-4:              #7A7467;
  --ink-5:              #A8A190;

  /* Card Surfaces */
  --surface:            var(--bone-hi);
  --surface-2:          var(--bone);
  --surface-3:          #E2D9C3;
  --surface-input:      #FCFAF4;

  /* Accent Crimson */
  --crimson:            #C23A1E;
  --crimson-deep:       #93290F;
  --crimson-dim:        rgba(194, 58, 30, 0.12);

  /* Status */
  --success:            #047857;
  --success-dim:        rgba(4, 120, 87, 0.12);
  --warning:            #B45309;
  --warning-dim:        rgba(180, 83, 9, 0.12);
  --danger:             #C23A1E;
  --danger-dim:         rgba(194, 58, 30, 0.14);

  /* Borders & Dividers */
  --border-sub:         rgba(22, 19, 16, 0.20);
  --border:             rgba(22, 19, 16, 0.35);
  --border-strong:      #161310;
  --border-hover:       var(--crimson);

  /* Typography */
  --font-display:       'Anton', 'Arial Narrow', Impact, sans-serif;
  --font-label:         'Oswald', 'Arial Narrow', Arial, sans-serif;
  --font-body:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:          'IBM Plex Mono', 'JetBrains Mono', monospace;

  --f-display:          var(--font-display);
  --f-label:            var(--font-label);
  --f-body:             var(--font-body);
  --f-mono:             var(--font-mono);

  /* Semantic aliases */
  --void:               var(--bg);
  --text:               var(--ink);
  --muted:              var(--ink-3);
  --muted-2:            var(--ink-4);
  --accent:             var(--crimson);
  --accent-line:        var(--crimson);
  --accent-dim:         var(--crimson-dim);
  --ok:                 var(--success);
  --ok-dim:             var(--success-dim);
  --warn:               var(--warning);
  --warn-dim:           var(--warning-dim);

  /* Metrics & Scale */
  --hud-h:              60px;
  --rail-w:             360px;
  --radius-xs:          3px;
  --radius-sm:          5px;
  --radius:             8px;
  --radius-pill:        999px;
  --shadow-paper:       0 30px 80px rgba(0, 0, 0, .6), 0 4px 18px rgba(0, 0, 0, .4);
  --shadow-subtle:      0 2px 8px rgba(22, 19, 16, 0.08);

  /* Transitions */
  --t-fast:             120ms cubic-bezier(.4, 0, .2, 1);
  --t-base:             180ms cubic-bezier(.4, 0, .2, 1);
}

/* --- 02 · RESET & CORE ---------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: dark light;
  background-color: var(--bg);
  scroll-behavior: smooth;
}

html, body {
  min-height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}

/* Texture overlay */
.screen-mesh {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .10;
  mix-blend-mode: screen;
  background-image: radial-gradient(var(--bone) .7px, transparent .95px);
  background-size: 6px 6px;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }

input, select, textarea, button {
  font: inherit;
  color: inherit;
}

input, textarea {
  user-select: text;
  -webkit-user-select: text;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}
button:disabled { cursor: not-allowed; }

img, video, canvas, svg {
  display: block;
  max-width: 100%;
}

table {
  border-collapse: collapse;
  width: 100%;
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:hover {
  color: var(--crimson);
}

::selection {
  background: var(--crimson);
  color: #fff;
}

/* Clean corporate scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(22, 19, 16, 0.3) transparent;
}
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(22, 19, 16, 0.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ink-2);
}

/* --- 03 · CORPORATE TYPOGRAPHY -------------------------------------------- */
.h-display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.96;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.h-label {
  font-family: var(--font-label);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
}

.label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.muted   { color: var(--ink-3); }
.muted-2 { color: var(--ink-4); }
.is-ok   { color: var(--success); }
.is-warn { color: var(--warning); }
.is-bad  { color: var(--danger); }
.is-accent { color: var(--crimson); }

.note {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-3);
}

.footnote {
  padding: 18px 2px 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--bone-dim);
  text-transform: uppercase;
  text-align: center;
}

.pre {
  margin-top: 10px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border-sub);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 180px;
  overflow: auto;
}

kbd {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface-3);
  border: 1px solid var(--border-sub);
  border-radius: 3px;
}

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--crimson);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.dot {
  width: 6px; height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}
.dot--pulse {
  animation: pulse-dot 1.6s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.85); }
}