/* ============================================================================
   MM-TOKENS.CSS - MelodyMap Design Tokens
   ============================================================================
   Centralized design tokens for the entire project.
   SCSS-ready: mirrors a _variables.scss partial — when migrating to SCSS,
   move these into $-variables and compile; no other file changes needed.

   Usage: import this file first in every CSS file
   ============================================================================ */

:root {
  /* ──────────────────────────────────────────────────────────────────────────
     BRAND PALETTE
     ────────────────────────────────────────────────────────────────────────── */
  --mm-brand-blue:    #113cfc;
  --mm-brand-ink:     #0b2545;
  --mm-brand-orange:  #ff8a65;
  --mm-brand-accent:  #e8eefc;
  --mm-brand-white:   #ffffff;

  /* Navy scale (dashboard) */
  --mm-navy:          #203A59;
  --mm-navy-dark:     #1a2f47;
  --mm-navy-light:    #2d4a6a;

  /* Orange scale (dashboard) */
  --mm-orange:        #FF8862;
  --mm-orange-dark:   #e67550;
  --mm-orange-light:  #ffa080;

  /* Tier colors */
  --mm-tier-free:     #6c757d;
  --mm-tier-basic:    #17a2b8;
  --mm-tier-pro:      #FF8862;
  --mm-tier-plus:     #d4a700;
  --mm-tier-admin:    #dc2626;

  /* ──────────────────────────────────────────────────────────────────────────
     NEUTRAL PALETTE
     ────────────────────────────────────────────────────────────────────────── */
  --mm-gray-50:   #f9fafb;
  --mm-gray-100:  #f3f4f6;
  --mm-gray-200:  #e5e7eb;
  --mm-gray-300:  #d1d5db;
  --mm-gray-400:  #9ca3af;
  --mm-gray-500:  #6b7280;
  --mm-gray-600:  #4b5563;
  --mm-gray-700:  #374151;
  --mm-gray-800:  #1f2937;
  --mm-gray-900:  #111827;

  /* ──────────────────────────────────────────────────────────────────────────
     TYPOGRAPHY
     ────────────────────────────────────────────────────────────────────────── */
  --mm-font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --mm-font-xs:   0.75rem;   /* 12px — use sparingly, never for body text */
  --mm-font-sm:   0.875rem;  /* 14px — minimum readable body text */
  --mm-font-base: 1rem;      /* 16px */
  --mm-font-md:   1.125rem;  /* 18px */
  --mm-font-lg:   1.25rem;   /* 20px */
  --mm-font-xl:   1.5rem;    /* 24px */
  --mm-font-2xl:  2rem;      /* 32px */

  --mm-line-height:       1.5;
  --mm-line-height-tight: 1.2;

  /* ──────────────────────────────────────────────────────────────────────────
     SPACING  (4px base grid)
     ────────────────────────────────────────────────────────────────────────── */
  --mm-space-1:  0.25rem;  /*  4px */
  --mm-space-2:  0.5rem;   /*  8px */
  --mm-space-3:  0.75rem;  /* 12px */
  --mm-space-4:  1rem;     /* 16px */
  --mm-space-5:  1.25rem;  /* 20px */
  --mm-space-6:  1.5rem;   /* 24px */
  --mm-space-8:  2rem;     /* 32px */
  --mm-space-10: 2.5rem;   /* 40px */
  --mm-space-12: 3rem;     /* 48px */

  /* ──────────────────────────────────────────────────────────────────────────
     BORDER RADIUS
     ────────────────────────────────────────────────────────────────────────── */
  --mm-radius-sm:   6px;
  --mm-radius-md:   8px;
  --mm-radius-lg:  12px;
  --mm-radius-xl:  16px;
  --mm-radius-full: 9999px;

  /* ──────────────────────────────────────────────────────────────────────────
     SHADOWS
     ────────────────────────────────────────────────────────────────────────── */
  --mm-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
  --mm-shadow-md:  0 4px 6px rgba(0, 0, 0, 0.07);
  --mm-shadow-lg:  0 8px 24px rgba(11, 37, 69, 0.08);
  --mm-shadow-xl:  0 24px 80px rgba(0, 0, 0, 0.12);
  --mm-ring:       0 0 0 3px rgba(17, 60, 252, 0.15);

  /* ──────────────────────────────────────────────────────────────────────────
     TRANSITIONS
     ────────────────────────────────────────────────────────────────────────── */
  --mm-transition-fast: 0.15s ease;
  --mm-transition:      0.2s ease;
  --mm-transition-slow: 0.3s ease;

  /* ──────────────────────────────────────────────────────────────────────────
     TOUCH TARGETS (WCAG 2.5.8 — 44px minimum)
     ────────────────────────────────────────────────────────────────────────── */
  --mm-touch-min:   44px;   /* Absolute minimum (WCAG AA) */
  --mm-touch-comfy: 48px;   /* Comfortable tap target */

  /* ──────────────────────────────────────────────────────────────────────────
     Z-INDEX SCALE
     ────────────────────────────────────────────────────────────────────────── */
  --mm-z-dropdown:  100;
  --mm-z-sticky:    200;
  --mm-z-overlay:   900;
  --mm-z-modal:     1000;
  --mm-z-popover:   1100;
  --mm-z-tooltip:   1200;

  /* ──────────────────────────────────────────────────────────────────────────
     BREAKPOINTS  (reference only — CSS can't use vars in @media)
     When migrating to SCSS, these become:
       $bp-phone:  480px;
       $bp-tablet: 768px;
     ────────────────────────────────────────────────────────────────────────── */
  /* 480px  — phones       */
  /* 768px  — tablets      */

  /* ──────────────────────────────────────────────────────────────────────────
     LAYOUT
     ────────────────────────────────────────────────────────────────────────── */
  --mm-sidebar-width: 260px;
  --mm-topbar-height: 56px;
}