/* ============================================================
   Wooden Design System — Colors & Type Tokens
   Lifted from the design system's colors_and_type.css. These are
   the single source of truth for colour, type, spacing, radii and
   shadows across Gunzi. Never hardcode a brown/caramel/gold that
   exists here as a token.
   ============================================================ */

:root {
  /* ── Brand palette ─────────────────────────────────────── */
  --color-gold: #D4AF37;
  --color-brown-strong: #654321;
  --color-brown-muted:  #6C4B2B;
  --color-brown-warm:   #5B3D24;
  --color-brown-dark:   #3D2817;
  --color-brown-deep:   #3B220F;
  --color-parchment:    #f6e7c3;
  --color-parchment-card: #fffdf6;

  /* ── Semantic feedback ─────────────────────────────────── */
  --color-success: #4CAF50;
  --color-error:   #F44336;
  --color-alert:   #D9534F;
  --hex-highlight:       #2e8b57;
  --color-hex-highlight: var(--hex-highlight);

  /* ── Accent gradients ──────────────────────────────────── */
  --gradient-button-primary:  linear-gradient(135deg, #583286 0%, #7a4ba8 100%);

  /* ── Translucent surfaces ──────────────────────────────── */
  --surface-panel-card:  rgba(255, 253, 246, 0.95);
  --border-subtle:       1px solid rgba(0, 0, 0, 0.08);

  /* ── Warm menu-highlight family (caramel overlays) ─────── */
  --menu-panel-highlight: rgba(198, 155, 90, 0.14);
  --menu-button-hover:    rgba(198, 155, 90, 0.24);
  --menu-button-active:   rgba(198, 155, 90, 0.36);

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-card:   0 4px 20px rgba(0, 0, 0, 0.15);
  --shadow-button: 0 2px 8px  rgba(0, 0, 0, 0.30);
  --shadow-modal:  0 10px 30px rgba(0, 0, 0, 0.80);

  /* ── Radii ─────────────────────────────────────────────── */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 15px;
  --radius-round: 50%;

  /* ── Spacing ───────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  6px;
  --space-3:  8px;
  --space-4:  10px;
  --space-5:  12px;
  --space-6:  16px;
  --space-7:  20px;
  --space-8:  24px;
  --space-9:  30px;

  /* ── Typography ────────────────────────────────────────── */
  --font-family-ui: "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --font-size-xs:  0.75rem;
  --font-size-sm:  0.85rem;
  --font-size-md:  0.9rem;
  --font-size-base:1rem;
  --font-size-lg:  1.1rem;
  --font-size-xl:  1.25rem;

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;
  --font-weight-heavy:   800;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-heavy:   800;

  --letter-spacing-caps:    0.05em;
  --letter-spacing-display: 0.02em;
  --letter-caps: 0.05em;

  --line-height-tight: 1.2;
  --line-height-body:  1.45;
  --line-height-loose: 1.5;
}

/* ============================================================
   Base body — parchment surface with a subtle vignette.
   ============================================================ */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-family-ui);
  color: var(--color-brown-strong);
  background:
    radial-gradient(120% 80% at 50% 0%, #fbf2d6 0%, var(--color-parchment) 55%, #ecd7a8 100%);
  overflow: hidden;
}

/* ── Loading overlay (SW reloads) ──────────────────────────── */
.loading-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  background: rgba(246, 231, 195, 0.92);
  color: var(--color-brown-strong);
  z-index: 100;
}

.loading-overlay--hidden {
  display: none;
}

.loading-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(101, 67, 33, 0.2);
  border-top-color: var(--color-brown-warm);
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}