/*
 * VvM design tokens.
 *
 * Transcribed from the game's own token sources so the site and the app cannot
 * drift apart:
 *   shared-ui/src/commonMain/kotlin/com/villagersvsmonsters/ui/theme/VvmPalette.kt
 *   shared-ui/src/commonMain/kotlin/com/villagersvsmonsters/ui/theme/VvmColorScheme.kt
 *   shared-ui/src/commonMain/kotlin/com/villagersvsmonsters/ui/theme/VvmTokens.kt
 * The human-readable table lives in docs/design-theme.md. Treat the Kotlin as
 * authoritative if the two ever disagree, and change values here only to follow it.
 *
 * The game defaults to dark (VvmTheme(darkTheme = true)), so dark is the base
 * scheme here and light is the prefers-color-scheme override.
 */

:root {
  color-scheme: dark light;

  /* --- Surfaces (VvmDarkColorScheme) --- */
  --vvm-bg-base: #12100d;
  --vvm-bg-layer: #1b1712;
  --vvm-surface: rgba(53, 42, 33, 0.82);
  --vvm-surface-raised: #4f3e30;
  --vvm-surface-inset: rgba(20, 16, 13, 0.8);
  --vvm-surface-overlay: rgba(36, 29, 24, 0.9);
  --vvm-scrim: rgba(0, 0, 0, 0.65);

  /* --- Borders --- */
  --vvm-border: rgba(158, 131, 82, 0.8);
  --vvm-border-muted: rgba(110, 91, 60, 0.53);

  /* --- Text --- */
  --vvm-text: #f7e6c2;
  --vvm-text-secondary: #e4cfab;
  --vvm-text-muted: #bfa783;

  /* --- Actions --- */
  --vvm-action: #e6b864;
  --vvm-action-hover: #f6c65b;
  --vvm-action-secondary: #8b672e;
  --vvm-action-secondary-content: #12100d;
  --vvm-action-content: #12100d;
  --vvm-disabled: #4d453a;

  /* --- Semantic accents --- */
  --vvm-danger: #e56c3e;
  --vvm-success: #6abf69;
  --vvm-warning: #f2c94c;
  --vvm-health: #b63e2e;
  --vvm-mana: #3e79c8;
  --vvm-xp: #f6c65b;

  /* --- Secret Fire (premium currency) --- */
  --vvm-secret-fire: #c9a6ff;
  --vvm-secret-fire-violet: #3b2263;
  --vvm-secret-fire-border: #8c6bd6;

  /* --- Elements --- */
  --vvm-el-fire: #e56c3e;
  --vvm-el-water: #56ccf2;
  --vvm-el-air: #6abf69;
  --vvm-el-physical: #bfa783;

  /* --- District accents (sphere-grid region hues) --- */
  --vvm-district-miners: #f2c94c;
  --vvm-district-rangers: #27ae60;
  --vvm-district-healers: #2fd4ce;
  --vvm-district-herdsmens: #f2994a;
  --vvm-district-aetherhall: #c957d4;

  /* --- Shape (VvmTokens.shapes) --- */
  --vvm-radius-sm: 4px;
  --vvm-radius-md: 8px;
  --vvm-radius-lg: 12px;
  --vvm-radius-xl: 20px;

  /* --- Spacing (VvmTokens.spacing, dp == px here) --- */
  --vvm-space-xxs: 2px;
  --vvm-space-xs: 4px;
  --vvm-space-sm: 8px;
  --vvm-space-md: 12px;
  --vvm-space-lg: 16px;
  --vvm-space-xl: 24px;
  --vvm-space-xxl: 32px;

  /* Web-only rhythm: the game has no page-level scale, so these are additive. */
  --vvm-space-section: clamp(48px, 8vw, 96px);
  --vvm-page-max: 1180px;
  --vvm-page-gutter: clamp(16px, 4vw, 32px);

  /* --- Elevation --- */
  --vvm-elev-raised: 0 2px 6px rgba(0, 0, 0, 0.45);
  --vvm-elev-overlay: 0 8px 28px rgba(0, 0, 0, 0.55);

  /* --- Motion (VvmTokens.motion) --- */
  --vvm-motion-quick: 120ms;
  --vvm-motion-standard: 220ms;
  --vvm-motion-slow: 360ms;
  --vvm-ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* --- Borders/dimensions --- */
  --vvm-border-thin: 1px;
  --vvm-border-thick: 2px;
  --vvm-touch-target: 48px;

  /* --- Type (mirrors vvmMaterialTypography(), scaled up for the web) --- */
  --vvm-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --vvm-font-display: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --vvm-text-display: clamp(2.25rem, 6vw, 3.75rem);
  --vvm-text-title-lg: clamp(1.5rem, 3vw, 2rem);
  --vvm-text-title-md: 1.125rem;
  --vvm-text-body: 1rem;
  --vvm-text-label: 0.875rem;
  --vvm-text-meta: 0.75rem;

  /* Item and creature art is authored on a light plate, exactly as the game
     renders it in inventory and craft tiles. */
  --vvm-tile-plate: #f7f1e4;
}

/*
 * Light scheme (VvmLightColorScheme). Only the tokens that differ are restated,
 * so a new token added above is inherited by both schemes automatically.
 */
@media (prefers-color-scheme: light) {
  :root {
    --vvm-bg-base: #ffffff;
    --vvm-bg-layer: #f5f0eb;
    --vvm-surface: #fffbf4;
    --vvm-surface-raised: #fffbf4;
    --vvm-surface-inset: #e9dccb;
    --vvm-surface-overlay: rgba(255, 251, 244, 0.95);
    --vvm-scrim: rgba(0, 0, 0, 0.4);

    --vvm-border: #8a6b3e;
    --vvm-border-muted: rgba(138, 107, 62, 0.4);

    --vvm-text: #281d14;
    --vvm-text-secondary: #594433;
    --vvm-text-muted: #7f6a54;

    --vvm-action: #b87324;
    --vvm-action-hover: #8b672e;
    --vvm-action-content: #fffbf4;
    --vvm-action-secondary-content: #fffbf4;

    --vvm-elev-raised: 0 2px 6px rgba(40, 29, 20, 0.16);
    --vvm-elev-overlay: 0 8px 28px rgba(40, 29, 20, 0.22);

    --vvm-tile-plate: #ffffff;
  }
}

/* The game collapses every duration to zero under reducedMotion. Match it. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --vvm-motion-quick: 0ms;
    --vvm-motion-standard: 0ms;
    --vvm-motion-slow: 0ms;
  }
}