/* ═══════════════════════════════════════════════════════════════════════════
   hiphop.world — Member Kit Design System
   Maps HHW dual-theme tokens (--hh-*) to --mk-* contract.
   Theme-aware: works with both black_gold_green and white_blue_red themes.
   Spec: member-kit/docs/design-system.md
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Backgrounds — Premium Luxe defaults (dark theme) */
  --mk-bg:          #0f172a;
  --mk-surface:     #1e293b;
  --mk-surface-alt: #334155;
  --mk-border:      #334155;

  /* Text */
  --mk-text:           #f1f5f9;
  --mk-text-muted:     #94a3b8;
  --mk-text-on-accent: #000000;

  /* Accent — HHW gold */
  --mk-accent:       var(--hh-brand-pink, #FF2E63);
  --mk-accent-hover: #e01f54;

  /* Status — use HHW static status tokens */
  --mk-error:      var(--hh-status-error, #F04747);
  --mk-success:    var(--hh-status-success, #43B581);
  --mk-warning:    var(--hh-status-warning, #FFB800);
  --mk-info:       var(--hh-status-info, #4ECDC4);
  --mk-error-bg:   rgba(240,71,71,0.12);
  --mk-success-bg: rgba(67,181,129,0.12);
  --mk-warning-bg: rgba(255,184,0,0.12);
  --mk-info-bg:    rgba(78,205,196,0.12);

  /* Typography */
  --mk-font:      var(--hh-font-body, 'Inter', -apple-system, sans-serif);
  --mk-font-mono: ui-monospace, 'Courier New', monospace;
  --mk-text-sm:   var(--hh-text-sm, 0.875rem);
  --mk-text-base: var(--hh-text-base, 1rem);
  --mk-text-lg:   var(--hh-text-lg, 1.125rem);

  /* Shape & Motion */
  --mk-radius-sm:  0.375rem;
  --mk-radius:     0.5rem;
  --mk-radius-lg:  1rem;
  --mk-transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --mk-max-width: 480px;
  --mk-spacing:   1rem;
}

/* Classic Sticker theme override */
:root[data-theme="white_blue_red"] {
  --mk-bg:          #f8fafc;
  --mk-surface:     #ffffff;
  --mk-surface-alt: #f1f5f9;
  --mk-border:      #e2e8f0;
  --mk-text:        #0f172a;
  --mk-text-muted:  #64748b;
  --mk-text-on-accent: #ffffff;
  --mk-accent:      #1d4ed8;
  --mk-accent-hover: #1e40af;
}

/* ── Core Components ──────────────────────────────────────────────────────── */

.mk-btn--primary {
  background: var(--mk-accent);
  color: var(--mk-text-on-accent);
  border: none;
  border-radius: var(--mk-radius);
  padding: 0.625rem 1.5rem;
  font-size: var(--mk-text-base);
  font-family: var(--mk-font);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--mk-transition), transform var(--mk-transition);
}
.mk-btn--primary:hover { background: var(--mk-accent-hover); transform: translateY(-1px); }

.mk-btn--ghost {
  background: transparent;
  color: var(--mk-accent);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius);
  padding: 0.625rem 1.5rem;
  font-size: var(--mk-text-base);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--mk-transition);
}
.mk-btn--ghost:hover { background: var(--mk-surface-alt); }

.mk-btn--danger { background: var(--mk-error); color: #fff; border: none; border-radius: var(--mk-radius); padding: 0.625rem 1.5rem; font-size: var(--mk-text-base); font-weight: 600; cursor: pointer; }

.mk-input {
  background: var(--mk-surface);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-sm);
  color: var(--mk-text);
  padding: 0.5rem 0.75rem;
  font-size: var(--mk-text-base);
  font-family: var(--mk-font);
  width: 100%;
  transition: border-color var(--mk-transition);
}
.mk-input:focus { outline: 2px solid var(--mk-accent); outline-offset: -1px; border-color: var(--mk-accent); }

.mk-status { padding: 0.75rem 1rem; border-radius: var(--mk-radius); font-size: var(--mk-text-sm); }
.mk-status[data-type="error"]   { background: var(--mk-error-bg);   color: var(--mk-error); }
.mk-status[data-type="success"] { background: var(--mk-success-bg); color: var(--mk-success); }
.mk-status[data-type="warning"] { background: var(--mk-warning-bg); color: var(--mk-warning); }
.mk-status[data-type="info"]    { background: var(--mk-info-bg);    color: var(--mk-info); }