/* system.css — PulseChain Constellation System Contract Tokens */
/* Contract Revision: 1 | Archetype: experiential */

@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Medium.otf') format('opentype');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Palette Tokens */
  --color-void: #05040C;
  --color-surface: #0B0A1A;
  --color-surface-raised: #14122B;
  --color-surface-overlay: rgba(20, 18, 43, 0.82);
  --color-ivory: #F7F5FF;

  --color-text: #F4F2FF;
  --color-text-muted: #9A96B8;

  --color-violet: #8B5CF6;
  --color-cyan: #22D3EE;
  --color-mint: #A7F3D0;
  --color-ember: #FF7A45;

  /* Safe token aliases for CSS declarations (avoids collision with CSS named colors violet/cyan/ivory) */
  --color-vlt: #8B5CF6;
  --color-cyn: #22D3EE;
  --color-ivr: #F7F5FF;

  /* Surface & Hairlines */
  --canvas: #05040c;
  --hairline: 1px solid rgba(255, 255, 255, 0.10);
  --hairline-strong: 1px solid rgba(255, 255, 255, 0.18);
  --hairline-color: rgba(255, 255, 255, 0.10);

  /* Typography */
  --font-display: 'Fraunces', 'Instrument Serif', 'GT Super', Georgia, serif;
  --font-body: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, ui-monospace, monospace;

  --display-size: clamp(3.5rem, 10vw, 9rem);
  --display-leading: 0.94;
  --display-tracking: -0.03em;

  /* Spacing Scale (4px base) */
  --space-0: 0px;
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;
  --space-96: 96px;
  --space-120: 120px;

  /* Radius Scale */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Motion */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 180ms;
  --duration-normal: 320ms;
  --duration-slow: 600ms;

  /* Glass Ceiling */
  --glass-blur-max: 20px;
  --glass-blur-focal: 16px;
}

@theme {
  --color-void: #05040C;
  --color-surface: #0B0A1A;
  --color-surface-raised: #14122B;
  --color-ivory: #F7F5FF;
  --color-text: #F4F2FF;
  --color-text-muted: #9A96B8;
  --color-violet: #8B5CF6;
  --color-cyan: #22D3EE;
  --color-mint: #A7F3D0;
  --color-ember: #FF7A45;
  --font-display: 'Fraunces', 'Instrument Serif', 'GT Super', Georgia, serif;
  --font-body: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, ui-monospace, monospace;
}

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

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--color-void);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Tabular Numerics for all machine data */
.font-mono, code, kbd, samp, pre, .mono-data {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* 5.1 Glass Panel — The Double-Bezel */
.glass-panel-outer {
  background: rgba(255, 255, 255, 0.04);
  border: var(--hairline);
  padding: 6px;
  border-radius: 24px;
}

.glass-panel-inner {
  background: var(--color-surface);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: 24px;
}

/* 5.2 Eyebrow Tag */
.eyebrow-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-vlt);
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.30);
}

.eyebrow-tag--cyan {
  color: var(--color-cyn);
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.30);
}

.eyebrow-tag--mint {
  color: var(--color-mint);
  background: rgba(167, 243, 208, 0.12);
  border: 1px solid rgba(167, 243, 208, 0.30);
}

.eyebrow-tag--ember {
  color: var(--color-ember);
  background: rgba(255, 122, 69, 0.12);
  border: 1px solid rgba(255, 122, 69, 0.30);
}

/* 5.3 Orbital Button */
.orbital-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
  border: none;
}

.orbital-btn--primary {
  background: var(--color-vlt);
  color: var(--color-void);
}

.orbital-btn--primary:hover {
  background: var(--color-cyn);
  color: var(--color-void);
  transform: translateY(-1px);
}

.orbital-btn--ghost {
  background: transparent;
  color: var(--color-text);
  border: var(--hairline-strong);
}

.orbital-btn--ghost:hover {
  background: var(--color-surface-raised);
  border-color: rgba(255, 255, 255, 0.28);
}

.btn-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background: rgba(5, 4, 12, 0.25);
}

/* 5.4 Node / Caption Card (The Ivory Borrow) */
.caption-card-ivory {
  background: var(--color-ivr);
  color: var(--color-void);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(5, 4, 12, 0.50);
}

.caption-card-ivory h4 {
  margin: 0 0 8px 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-void);
}

.caption-card-ivory p {
  margin: 0 0 12px 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-surface-raised);
}

.caption-card-ivory .meta-row {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(5, 4, 12, 0.12);
  padding-top: 8px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-surface);
}

/* Focus Visible Contract */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-vlt);
  outline-offset: 2px;
}

/* Fixed Grain Texture Overlay */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Reduced Motion Mandatory Guard */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}