/**
 * Moontheme Design Tokens
 * Neutral system fonts, light/dark mode, structural spacing and type scale.
 *
 * Variable namespace: --mv-*
 * Light mode default, dark mode via prefers-color-scheme or data-theme attribute.
 */

:root {
  color-scheme: light dark;

  /* ===================================================================
     FONTS -- system font stacks, no custom fonts
     =================================================================== */

  --mv-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mv-font-serif: Georgia, 'Times New Roman', Times, serif;
  --mv-font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Menlo, Monaco, monospace;

  /* ===================================================================
     DESKTOP TYPE SCALE -- identical metrics to existing system
     Each style: font-family / weight / size / line-height / letter-spacing
     =================================================================== */

  /* H1: 72px / 1.0 / -0.04em */
  --mv-h1-font: var(--mv-font-serif);
  --mv-h1-weight: 400;
  --mv-h1-size: 72px;
  --mv-h1-leading: 1;
  --mv-h1-tracking: -0.04em;

  /* H2: 56px / 1.1 / -0.03em */
  --mv-h2-font: var(--mv-font-sans);
  --mv-h2-weight: 600;
  --mv-h2-size: 56px;
  --mv-h2-leading: 1.1;
  --mv-h2-tracking: -0.03em;

  /* H3: 32px / 1.2 / -0.02em */
  --mv-h3-font: var(--mv-font-sans);
  --mv-h3-weight: 500;
  --mv-h3-size: 32px;
  --mv-h3-leading: 1.2;
  --mv-h3-tracking: -0.02em;

  /* Callout: 48px / 1.1 / -0.03em */
  --mv-callout-font: var(--mv-font-serif);
  --mv-callout-weight: 400;
  --mv-callout-size: 48px;
  --mv-callout-leading: 1.1;
  --mv-callout-tracking: -0.03em;

  /* Body: 16px / 1.6 / 0 */
  --mv-body-font: var(--mv-font-sans);
  --mv-body-weight: 400;
  --mv-body-size: 16px;
  --mv-body-leading: 1.6;
  --mv-body-tracking: 0;

  /* Body Small: 14px / 1.5 / 0 */
  --mv-body-sm-size: 14px;
  --mv-body-sm-leading: 1.5;

  /* Caption / Label: 12px / 1.4 / 0.04em */
  --mv-caption-font: var(--mv-font-sans);
  --mv-caption-weight: 500;
  --mv-caption-size: 12px;
  --mv-caption-leading: 1.4;
  --mv-caption-tracking: 0.04em;

  /* Nav: 14px / 1 / 0.02em */
  --mv-nav-size: 14px;
  --mv-nav-weight: 400;
  --mv-nav-tracking: 0.02em;

  /* ===================================================================
     SPACING -- 4px base grid
     =================================================================== */

  --mv-space-1: 4px;
  --mv-space-2: 8px;
  --mv-space-3: 12px;
  --mv-space-4: 16px;
  --mv-space-5: 20px;
  --mv-space-6: 24px;
  --mv-space-8: 32px;
  --mv-space-10: 40px;
  --mv-space-12: 48px;
  --mv-space-16: 64px;
  --mv-space-20: 80px;
  --mv-space-24: 96px;
  --mv-space-32: 128px;

  /* ===================================================================
     BORDER RADIUS
     =================================================================== */

  --mv-radius-sm: 8px;
  --mv-radius-md: 16px;
  --mv-radius-lg: 24px;
  --mv-radius-pill: 100px;
  --mv-radius-round: 400px;

  /* ===================================================================
     LIGHT MODE COLORS (default)
     =================================================================== */

  --mv-bg: #ffffff;
  --mv-bg-elevated: #f5f5f5;
  --mv-bg-surface: #fafafa;
  --mv-bg-badge: #e5e5e5;

  --mv-text: #171717;
  --mv-text-accent: #2563eb;

  --mv-text-75: rgba(23, 23, 23, 0.75);
  --mv-text-60: rgba(23, 23, 23, 0.60);
  --mv-text-50: rgba(23, 23, 23, 0.50);
  --mv-text-40: rgba(23, 23, 23, 0.40);
  --mv-text-20: rgba(23, 23, 23, 0.20);

  --mv-border: rgba(0, 0, 0, 0.10);
  --mv-border-strong: rgba(0, 0, 0, 0.20);
}

/* ===================================================================
   DARK MODE -- system preference (respects manual light override)
   =================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mv-bg: #0a0a0a;
    --mv-bg-elevated: #171717;
    --mv-bg-surface: #1a1a1a;
    --mv-bg-badge: #2a2a2a;

    --mv-text: #ededed;
    --mv-text-accent: #3b82f6;

    --mv-text-75: rgba(237, 237, 237, 0.75);
    --mv-text-60: rgba(237, 237, 237, 0.60);
    --mv-text-50: rgba(237, 237, 237, 0.50);
    --mv-text-40: rgba(237, 237, 237, 0.40);
    --mv-text-20: rgba(237, 237, 237, 0.20);

    --mv-border: rgba(255, 255, 255, 0.10);
    --mv-border-strong: rgba(255, 255, 255, 0.20);
  }
}

/* ===================================================================
   DARK MODE -- manual toggle via data attribute
   =================================================================== */

[data-theme="dark"] {
  --mv-bg: #0a0a0a;
  --mv-bg-elevated: #171717;
  --mv-bg-surface: #1a1a1a;
  --mv-bg-badge: #2a2a2a;

  --mv-text: #ededed;
  --mv-text-accent: #3b82f6;

  --mv-text-75: rgba(237, 237, 237, 0.75);
  --mv-text-60: rgba(237, 237, 237, 0.60);
  --mv-text-50: rgba(237, 237, 237, 0.50);
  --mv-text-40: rgba(237, 237, 237, 0.40);
  --mv-text-20: rgba(237, 237, 237, 0.20);

  --mv-border: rgba(255, 255, 255, 0.10);
  --mv-border-strong: rgba(255, 255, 255, 0.20);
}

/* ===================================================================
   TYPOGRAPHY UTILITY CLASSES
   Apply directly in templates: <h1 class="mv-h1">
   =================================================================== */

.mv-h1 {
  font-family: var(--mv-h1-font);
  font-weight: var(--mv-h1-weight);
  font-size: var(--mv-h1-size);
  line-height: var(--mv-h1-leading);
  letter-spacing: var(--mv-h1-tracking);
  color: var(--mv-text);
}

.mv-h2 {
  font-family: var(--mv-h2-font);
  font-weight: var(--mv-h2-weight);
  font-size: var(--mv-h2-size);
  line-height: var(--mv-h2-leading);
  letter-spacing: var(--mv-h2-tracking);
  color: var(--mv-text);
}

.mv-h3 {
  font-family: var(--mv-h3-font);
  font-weight: var(--mv-h3-weight);
  font-size: var(--mv-h3-size);
  line-height: var(--mv-h3-leading);
  letter-spacing: var(--mv-h3-tracking);
  color: var(--mv-text);
}

.mv-callout {
  font-family: var(--mv-callout-font);
  font-weight: var(--mv-callout-weight);
  font-size: var(--mv-callout-size);
  line-height: var(--mv-callout-leading);
  letter-spacing: var(--mv-callout-tracking);
  color: var(--mv-text);
}

.mv-body {
  font-family: var(--mv-body-font);
  font-weight: var(--mv-body-weight);
  font-size: var(--mv-body-size);
  line-height: var(--mv-body-leading);
  letter-spacing: var(--mv-body-tracking);
  color: var(--mv-text);
}

.mv-body-sm {
  font-family: var(--mv-body-font);
  font-weight: var(--mv-body-weight);
  font-size: var(--mv-body-sm-size);
  line-height: var(--mv-body-sm-leading);
  color: var(--mv-text-75);
}

.mv-caption {
  font-family: var(--mv-caption-font);
  font-weight: var(--mv-caption-weight);
  font-size: var(--mv-caption-size);
  line-height: var(--mv-caption-leading);
  letter-spacing: var(--mv-caption-tracking);
  text-transform: uppercase;
  color: var(--mv-text-50);
}

/* ===================================================================
   COMPONENT PATTERNS
   =================================================================== */

/* Primary button: pill shape */
.mv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--mv-radius-pill);
  font-family: var(--mv-font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: opacity 0.2s, background-color 0.2s;
  cursor: pointer;
  border: 2px solid var(--mv-text);
  background: var(--mv-text);
  color: var(--mv-bg);
}

.mv-btn:hover {
  opacity: 0.85;
}

/* Outline variant */
.mv-btn--outline {
  background: transparent;
  color: var(--mv-text);
  border-color: var(--mv-text-40);
}

.mv-btn--outline:hover {
  border-color: var(--mv-text);
}

/* Badge / tag */
.mv-badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: var(--mv-radius-pill);
  background: var(--mv-bg-badge);
  font-family: var(--mv-font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mv-text-60);
}

/* Card surface */
.mv-card {
  background: var(--mv-bg-elevated);
  border-radius: var(--mv-radius-md);
  border: 1px solid var(--mv-border);
  padding: var(--mv-space-8);
}

/* Horizontal divider */
.mv-divider {
  border: none;
  border-top: 1px solid var(--mv-border);
  margin: var(--mv-space-8) 0;
}

/* ===================================================================
   MOBILE TYPE SCALE -- 768px breakpoint
   =================================================================== */

@media (max-width: 768px) {
  .mv-h1 {
    font-size: 44px;
    line-height: 1.05;
  }

  .mv-h2 {
    font-size: 32px;
    line-height: 1.15;
  }

  .mv-h3 {
    font-size: 24px;
  }

  .mv-callout {
    font-size: 32px;
  }
}