/* ==========================================================================
   xDoctorApp v2 — Design Tokens
   Implements the visual design system from Chapter 13.5 of the master brief.
   This file is the single source of truth for colors, typography, spacing.
   Component CSS references these tokens, never raw values.
   ========================================================================== */

:root {
  /* ---------- Foundation: off-black with ambient depth ---------- */
  --bg-base:        #08090d;
  --bg-elevated:    #0e1014;
  --bg-recessed:    #06070a;
  --bg-gradient-warm: #0c0d12;

  --border-subtle:     #1a1d24;
  --border-emphasized: #2a2f3a;

  /* ---------- Locked semantic accent colors ---------- */
  /* Each hue maps to ONE concept. Reuse across contexts is forbidden. */
  --accent-content-quality:  #5ee5d1;  /* cyan: lexicon, drafts */
  --accent-graph-strength:   #ff9456;  /* orange: graph, reciprocity */
  --accent-reputation:       #d77af0;  /* magenta: reputation, enforcement */
  --accent-efficiency:       #f5d76b;  /* yellow: cadence, timing */
  --accent-velocity:         #7ce895;  /* green: velocity, momentum */
  --accent-spaces:           #ffa2cf;  /* pink: spaces, real-time */
  --accent-lists-risk:       #ff7a85;  /* red: lists, association risk */

  /* System role aliases */
  --accent-success: var(--accent-velocity);
  --accent-warning: var(--accent-efficiency);
  --accent-danger:  var(--accent-lists-risk);

  /* ---------- Text scale on dark ground ---------- */
  --text-primary:   #e8eaed;
  --text-secondary: #a8acb5;
  --text-tertiary:  #6c7080;
  --text-disabled:  #3d4148;

  /* ---------- Typography ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --font-display: "Inter", "Söhne Breit", -apple-system, sans-serif;

  /* ---------- Spacing scale (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- Glow tiers (Chapter 13.5) ---------- */
  /* Soft: ambient state. Medium: active state. Strong: headline numbers. */
  /* Use semantic color in the rgba(). Examples below assume content-quality cyan. */
  --glow-soft-cq:    0 0 8px rgba(94, 229, 209, 0.40);
  --glow-medium-cq:  0 0 12px rgba(94, 229, 209, 0.65), 0 0 4px rgba(94, 229, 209, 0.40);
  --glow-strong-cq:  0 0 20px rgba(94, 229, 209, 0.55), 0 0 8px rgba(94, 229, 209, 0.40);

  --glow-soft-rep:    0 0 8px rgba(215, 122, 240, 0.40);
  --glow-medium-rep:  0 0 12px rgba(215, 122, 240, 0.65), 0 0 4px rgba(215, 122, 240, 0.40);

  --glow-soft-vel:    0 0 8px rgba(124, 232, 149, 0.40);
  --glow-medium-vel:  0 0 12px rgba(124, 232, 149, 0.65), 0 0 4px rgba(124, 232, 149, 0.40);

  --glow-soft-graph:  0 0 8px rgba(255, 148, 86, 0.40);
  --glow-medium-graph: 0 0 12px rgba(255, 148, 86, 0.65), 0 0 4px rgba(255, 148, 86, 0.40);

  /* ---------- Animation timing ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-image:
    radial-gradient(circle at 80% 90%, var(--bg-gradient-warm) 0%, var(--bg-base) 60%);
  background-attachment: fixed;
  min-height: 100vh;
}

a {
  color: var(--accent-content-quality);
  text-decoration: none;
  transition: text-shadow var(--duration-fast) var(--ease-out);
}
a:hover {
  text-shadow: var(--glow-soft-cq);
}

::selection {
  background: rgba(94, 229, 209, 0.28);
  color: #ffffff;
}

/* ==========================================================================
   Utility classes used across pages
   ========================================================================== */

.mono { font-family: var(--font-mono); letter-spacing: 0.02em; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-tertiary);
}
.eyebrow::before { content: "// "; color: var(--text-disabled); }

.glow-cq    { text-shadow: var(--glow-medium-cq); color: var(--accent-content-quality); }
.glow-rep   { text-shadow: var(--glow-medium-rep); color: var(--accent-reputation); }
.glow-vel   { text-shadow: var(--glow-medium-vel); color: var(--accent-velocity); }
.glow-graph { text-shadow: var(--glow-medium-graph); color: var(--accent-graph-strength); }

.divider-h {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-subtle) 20%, var(--border-subtle) 80%, transparent);
  border: 0;
  margin: var(--space-7) 0;
}