/* DRFT Design Tokens · Hi-Fi */
:root {
  /* Ground */
  --obsidian: #0B0B0D;
  --graphite: #141418;
  --carbon:   #1D1D22;
  --slate:    #26262C;
  --edge:     rgba(255,255,255,0.08);
  --edge-2:   rgba(255,255,255,0.14);

  /* Type */
  --bone:     #F4F1EA;
  --bone-70:  rgba(244,241,234,0.70);
  --bone-50:  rgba(244,241,234,0.50);
  --ash:      #6B6B73;
  --ash-2:    #8E8E9A;

  /* Signal — shifted slightly toward green for premium */
  --signal:   oklch(0.92 0.21 125);
  --signal-dim: oklch(0.72 0.18 125);
  --signal-glow: oklch(0.92 0.21 125 / 0.35);

  /* Domains */
  --d-fin:    oklch(0.86 0.22 150);  /* financial */
  --d-phy:    oklch(0.92 0.21 125);  /* physical */
  --d-rec:    oklch(0.80 0.17 60);   /* recovery */
  --d-soc:    oklch(0.85 0.14 210);  /* social */
  --d-men:    oklch(0.72 0.22 310);  /* mental */
  --d-pur:    oklch(0.70 0.22 30);   /* purpose */

  /* Status gradients */
  --g-peak:   linear-gradient(135deg, oklch(0.92 0.21 125) 0%, oklch(0.86 0.22 150) 100%);
  --g-rising: linear-gradient(135deg, oklch(0.70 0.22 30) 0%, oklch(0.80 0.17 60) 100%);
  --g-drift:  linear-gradient(135deg, oklch(0.65 0.25 20) 0%, oklch(0.60 0.26 340) 100%);
  --g-flow:   linear-gradient(135deg, oklch(0.85 0.14 210) 0%, oklch(0.60 0.20 260) 100%);

  /* Scale */
  --r-sharp:  0;
  --r-soft:   14px;
  --r-round:  999px;

  /* Type stack */
  --f-display: 'Space Grotesk', 'Inter Tight', -apple-system, system-ui, sans-serif;
  --f-body:    'Inter', -apple-system, system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --f-num:     'Inter Tight', -apple-system, system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  background: var(--obsidian);
  color: var(--bone);
  font-family: var(--f-body);
  font-feature-settings: 'ss01', 'cv11';
}

/* === UTILITY === */
.mono { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-70); }
.mono-xs { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash-2); }
.num { font-family: var(--f-num); font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.display { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.03em; }
.editorial { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.92; }

/* Grain overlay */
.grain::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Aurora field */
.aurora {
  position: absolute; inset: -30%;
  background:
    radial-gradient(ellipse 50% 40% at 20% 30%, var(--signal-glow), transparent 60%),
    radial-gradient(ellipse 40% 50% at 80% 70%, oklch(0.70 0.22 310 / 0.25), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, oklch(0.80 0.17 60 / 0.25), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

/* Signal glow */
.signal-glow {
  box-shadow: 0 0 0 1px var(--signal), 0 0 24px var(--signal-glow);
}

/* Scrollbars */
.scroll::-webkit-scrollbar { width: 4px; height: 4px; }
.scroll::-webkit-scrollbar-thumb { background: var(--edge-2); border-radius: 0; }
.scroll::-webkit-scrollbar-track { background: transparent; }

/* Hover + tap */
.tap { cursor: pointer; transition: transform 0.15s cubic-bezier(0.2,0,0,1), opacity 0.15s; }
.tap:active { transform: scale(0.98); }
.tap:hover { opacity: 0.92; }

/* Pill / chip */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bone-70); border: 0.5px solid var(--edge-2);
  border-radius: 0;
}
.chip.signal { color: var(--signal); border-color: var(--signal); }
.chip.filled { background: var(--bone); color: var(--obsidian); border: none; }

/* Card — carbon surface */
.card {
  background: var(--carbon);
  border-left: 2px solid var(--edge);
  padding: 18px;
  position: relative;
}
.card.no-rule { border-left: none; }
.card.rule-signal { border-left-color: var(--signal); }
.card.rule-phy { border-left-color: var(--d-phy); }
.card.rule-fin { border-left-color: var(--d-fin); }
.card.rule-rec { border-left-color: var(--d-rec); }
.card.rule-men { border-left-color: var(--d-men); }
.card.rule-soc { border-left-color: var(--d-soc); }
.card.rule-pur { border-left-color: var(--d-pur); }

/* Button */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 18px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  border: none; cursor: pointer;
  transition: transform 0.12s cubic-bezier(0.2,0,0,1);
}
.btn:active { transform: scale(0.98); }
.btn.primary { background: var(--signal); color: var(--obsidian); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.secondary { background: var(--carbon); color: var(--bone); border: 0.5px solid var(--edge-2); }
.btn.ghost { background: transparent; color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }

/* Progress */
.progress {
  height: 3px; background: rgba(255,255,255,0.06);
  overflow: hidden; position: relative;
}
.progress > i {
  display: block; height: 100%;
  background: var(--signal);
}

/* Divider */
.rule {
  height: 0.5px; background: var(--edge);
  border: none;
}

/* Domain color backgrounds (at low opacity) */
.bg-fin { background: color-mix(in oklab, var(--d-fin) 14%, transparent); }
.bg-phy { background: color-mix(in oklab, var(--d-phy) 14%, transparent); }
.bg-rec { background: color-mix(in oklab, var(--d-rec) 14%, transparent); }
.bg-soc { background: color-mix(in oklab, var(--d-soc) 14%, transparent); }
.bg-men { background: color-mix(in oklab, var(--d-men) 14%, transparent); }
.bg-pur { background: color-mix(in oklab, var(--d-pur) 14%, transparent); }

.text-signal { color: var(--signal); }
.text-ash { color: var(--ash-2); }
.text-bone-50 { color: var(--bone-50); }
.text-bone-70 { color: var(--bone-70); }

/* Tick scale labels */
.tick {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ash);
}

/* Dora glyph */
.dora-glyph {
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--signal), transparent 70%);
  position: relative;
}
.dora-glyph::before, .dora-glyph::after {
  content: ''; position: absolute; inset: -4px;
  border: 1px solid var(--signal);
  border-radius: 50%; opacity: 0.5;
  animation: dora-pulse 2.2s ease-in-out infinite;
}
.dora-glyph::after { animation-delay: 1.1s; inset: -8px; }
@keyframes dora-pulse {
  0% { transform: scale(0.7); opacity: 0.7; }
  100% { transform: scale(1.2); opacity: 0; }
}

/* Counter animation */
@keyframes count-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.count-up { animation: count-up 0.6s cubic-bezier(0.2,0,0,1); }

/* Sliding entry */
@keyframes slide-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.slide-up { animation: slide-up 0.5s cubic-bezier(0.2,0,0,1) both; }