/* ============================================
   COSMICDRIP DESIGN TOKENS & BASE STYLES
   ============================================ */

:root {
  --color-bg: #050510;
  --color-text: #f0f0f0;
  --color-star: #c8d8ff;
  --color-purple: #7B2FBE;
  --color-green: #39FF14;
  --color-active: #00FF7F;
  --color-away: #FFA500;
  --color-glass-bg: rgba(10, 10, 30, 0.65);
  --color-glass-border: rgba(123, 47, 190, 0.4);

  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius: 1rem;
  --spacing: 1rem;
}

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

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: 0.05em;
}

button, input, select, textarea {
  font-family: inherit;
}

.glass-panel {
  background: var(--color-glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--color-glass-border);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.text-center { text-align: center; }
.mt-1 { margin-top: var(--spacing); }
.mt-2 { margin-top: calc(var(--spacing) * 2); }

/* Content layers above canvas */
.main-container,
.threshold-container,
.dashboard-container,
.modal-overlay,
.status-screen {
  position: relative;
  z-index: 1;
}

/* Watermark */
.watermark {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  opacity: 0.35;
  letter-spacing: 0.08em;
  font-family: var(--font-body);
  color: var(--color-text);
  z-index: 2;
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
}

/* Mobile tweaks */
@media (max-width: 480px) {
  .glass-panel {
    padding: 1rem;
  }
}