/* ============================================================
   MKG (Mierakigai) — DESIGN TOKENS (consolidated)
   Colors · Typography · Spacing · Effects · Fonts
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800;900&display=swap');

@font-face {
  font-family: "Moderat";
  src: url("../fonts/moderat-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand: Purple ---- */
  --mkg-purple-deep: #3D1A8E;
  --mkg-purple: #6B21E8;
  --mkg-purple-bright: #7C3AED;
  --mkg-purple-soft: #A78BFA;

  /* ---- Brand: Orange / Red ---- */
  --mkg-orange-electric: #E84C0E;
  --mkg-orange-bright: #F97316;
  --mkg-orange-warm: #C2410C;
  --mkg-maroon: #7F1D1D;

  /* ---- Neutrals ---- */
  --mkg-white: #FFFFFF;
  --mkg-black: #0A0A0A;
  --mkg-ink: #141414;
  --mkg-ink-2: #1F1B2E;
  --mkg-gray-300: #D4D4D8;
  --mkg-gray-400: #A1A1AA;
  --mkg-gray-500: #71717A;

  /* ---- Highlight ---- */
  --mkg-yellow: #F5C518;

  /* ---- Gradients ---- */
  --mkg-grad-brand: linear-gradient(135deg, #6B21E8 0%, #E84C0E 100%);
  --mkg-grad-purple: linear-gradient(135deg, #3D1A8E 0%, #6B21E8 100%);
  --mkg-grad-sunset: linear-gradient(135deg, #6B21E8 0%, #C2410C 55%, #F97316 100%);
  --mkg-grad-ember: linear-gradient(135deg, #7F1D1D 0%, #E84C0E 100%);

  /* ---- Semantic ---- */
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255,255,255,0.72);
  --text-muted: rgba(255,255,255,0.52);
  --text-emphasis: var(--mkg-orange-bright);
  --border-subtle: rgba(255,255,255,0.12);
  --border-strong: rgba(255,255,255,0.28);
  --glass-fill: rgba(20,16,30,0.55);
  --glass-border: rgba(255,255,255,0.14);
  --blur-glass: blur(18px);
  --action-outline: rgba(255,255,255,0.85);

  /* ---- Fonts ---- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Moderat", "Inter", system-ui, sans-serif;

  /* ---- Effects ---- */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.40);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.55);
  --glow-purple: 0 12px 40px rgba(107,33,232,0.45);
  --glow-orange: 0 12px 40px rgba(232,76,14,0.45);

  /* ---- Radii ---- */
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;
}