/* ─────────────────────────────────────────────────────────────
   mePal design tokens. Brand colours are overridden at runtime
   from Admin > Branding (see applyBranding() in app.js).
   ───────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --mp-primary: #6A2BE0;
  --mp-primary-2: #9B5CFF;
  --mp-primary-soft: rgba(106, 43, 224, 0.10);
  --mp-like: #FF3D71;
  --mp-pass: #8A8FA3;
  --mp-online: #22C55E;
  --mp-gold: #F5B301;
  --mp-danger: #E5484D;

  /* Surfaces & text (light) */
  --mp-bg: #F6F5FA;
  --mp-surface: #FFFFFF;
  --mp-surface-2: #EFEDF6;
  --mp-border: #E6E3EF;
  --mp-text: #1B1530;
  --mp-muted: #6B6880;
  --mp-faint: #A5A2B8;
  --mp-overlay: rgba(14, 10, 28, 0.55);
  --mp-skeleton: #ECEAF3;
  --mp-skeleton-shine: #F7F6FB;

  /* Gradients */
  --mp-grad: linear-gradient(135deg, var(--mp-primary) 0%, var(--mp-primary-2) 100%);
  --mp-grad-like: linear-gradient(135deg, #FF3D71 0%, #FF7A59 100%);
  --mp-photo-fade: linear-gradient(180deg, rgba(10, 6, 24, 0) 45%, rgba(10, 6, 24, 0.78) 100%);

  /* Shape */
  --mp-radius-card: 20px;
  --mp-radius-tile: 16px;
  --mp-radius-pill: 999px;
  --mp-shadow-1: 0 1px 2px rgba(27, 21, 48, 0.06), 0 2px 8px rgba(27, 21, 48, 0.05);
  --mp-shadow-2: 0 10px 30px rgba(27, 21, 48, 0.14);

  /* Type */
  --mp-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Layout */
  --mp-topbar-h: 56px;
  --mp-tabbar-h: 64px;
  --mp-safe-top: env(safe-area-inset-top, 0px);
  --mp-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mp-max-w: 1080px;

  color-scheme: light;
}

/* Dark theme: follows the phone unless the user picked Light/Dark in Me > Appearance */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mp-bg: #0F0C1A;
    --mp-surface: #1A1628;
    --mp-surface-2: #241F36;
    --mp-border: #2E2843;
    --mp-text: #F2F0FA;
    --mp-muted: #A9A4C0;
    --mp-faint: #6F6A88;
    --mp-primary-soft: rgba(155, 92, 255, 0.16);
    --mp-skeleton: #231E33;
    --mp-skeleton-shine: #2C2640;
    --mp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --mp-shadow-2: 0 10px 30px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --mp-bg: #0F0C1A;
  --mp-surface: #1A1628;
  --mp-surface-2: #241F36;
  --mp-border: #2E2843;
  --mp-text: #F2F0FA;
  --mp-muted: #A9A4C0;
  --mp-faint: #6F6A88;
  --mp-primary-soft: rgba(155, 92, 255, 0.16);
  --mp-skeleton: #231E33;
  --mp-skeleton-shine: #2C2640;
  --mp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --mp-shadow-2: 0 10px 30px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}