/* ============================================================
   css/variables.css — Design Tokens & Custom Properties
   MaOBe Digital
   ============================================================ */

:root {
  /* ── Color Palette ─────────────────────────────────────── */
  --blue:         #0057FF;
  --blue-light:   #2979FF;
  --cyan:         #00F0FF;
  --cyan-dim:     rgba(0, 240, 255, 0.15);
  --purple:       #1A0050;
  --purple-mid:   #2D0070;

  /* ── Dark Surfaces ──────────────────────────────────────── */
  --dark:         #070714;
  --dark-card:    #0D0D2B;
  --dark-card2:   #110E2E;
  --border:       rgba(255, 255, 255, 0.07);

  /* ── Text ───────────────────────────────────────────────── */
  --text:         #E8E8F0;
  --text-muted:   rgba(232, 232, 240, 0.55);
  --white:        #ffffff;

  /* ── Typography ─────────────────────────────────────────── */
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* ── Spacing & Shape ────────────────────────────────────── */
  --radius:       16px;
  --radius-sm:    10px;

  /* ── Motion ─────────────────────────────────────────────── */
  --transition:   0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Shadows / Glows ────────────────────────────────────── */
  --shadow-blue:  0 0 40px rgba(0, 87, 255, 0.25);
  --shadow-cyan:  0 0 30px rgba(0, 240, 255, 0.20);
}