/* ============================================================================
   MusicTree Design Tokens — CANONICAL SOURCE OF TRUTH
   ----------------------------------------------------------------------------
   This file is the ONLY place where brand colors, semantic status colors,
   typography tokens, spacing scale, and border tokens should be defined.

   Do NOT redefine --color-malva, --color-grigio-blu, --malva, --grigio-blu,
   --font-body, etc. in page templates or other CSS files. Page-specific
   CSS should consume these tokens, not redeclare them.

   Categorical palettes intentionally live OUTSIDE this file:
     - Teacher tile colors:  static/css/color_tokens.css (teacher tiles)
     - Calendar event cats:  static/css/calendar.css / admin_calendar.css
   Those are categorical color systems (one-of-N identity), not brand tokens,
   and must not be folded into the semantic set.
   ============================================================================ */

:root {
  /* ------------------------------------------------------------------------
     Brand palette — strict core
     ------------------------------------------------------------------------ */
  --color-malva:        #C3497E;   /* pink/magenta — accent/highlight */
  --color-grigio-blu:   #636882;   /* darker blue-grey — primary ink */
  --color-zucchero:     #ABAEBB;   /* light blue-grey — muted */
  --color-crema:        #E3C68C;   /* cream/yellow — info accent */

  /* Neutrals */
  --color-whisper-grey: #F5F5F5;   /* page background */
  --color-white:        #FFFFFF;
  --color-text-black:   #111827;
  --color-grey-overlay: rgba(171, 174, 187, 0.4);

  /* Extended accents (used by admin shell to match v3 design language) */
  --color-malva-dark:     #A33B68;   /* malva on hover/active */
  --color-soft-lavender:  #E6E0F4;   /* admin table header background */
  --color-cream-tint:     #FAF7F2;   /* admin table row hover */
  --color-dark-ink:       #3D4257;   /* dropdown-item ink */

  /* Convenience short aliases (legacy-compatible; same values as --color-*) */
  --malva:        var(--color-malva);
  --grigio-blu:   var(--color-grigio-blu);
  --zucchero:     var(--color-zucchero);
  --crema:        var(--color-crema);

  /* Legacy --musictree-* prefixed aliases (used by older admin templates).
     Prefer --malva / --grigio-blu / ... in new code. */
  --musictree-malva:      var(--color-malva);
  --musictree-grigio-blu: var(--color-grigio-blu);
  --musictree-zucchero:   var(--color-zucchero);
  --musictree-crema:      var(--color-crema);

  /* ------------------------------------------------------------------------
     Semantic status palette
     Enrollment statuses (active/trial/waiting/lead/inactive) draw from here.
     ------------------------------------------------------------------------ */
  --semantic-success: #10B981;     /* active, paid, confirmed */
  --semantic-warning: #F59E0B;     /* trial, pending */
  --semantic-danger:  #EF4444;     /* error, overdue */
  --semantic-info:    #3B82F6;     /* waiting, informational */
  --semantic-neutral: #9CA3AF;     /* inactive, archived */

  /* Enrollment status aliases — mapped onto the semantic palette.
     Locked decision: statuses are NOT their own palette; they are
     semantic colors with a stable name. */
  --status-active:   var(--semantic-success);
  --status-trial:    var(--semantic-warning);
  --status-waiting:  var(--semantic-info);
  --status-lead:     var(--color-malva);           /* brand magenta */
  --status-inactive: var(--semantic-neutral);

  /* ------------------------------------------------------------------------
     Typography
     ------------------------------------------------------------------------ */
  --font-personal:       'Caveat Brush', cursive;
  --font-admin-heading:  'Montserrat', sans-serif;
  --font-body:           'Montserrat', sans-serif;

  /* Type scale */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-md:   1rem;      /* 16 */
  --fs-lg:   1.125rem;  /* 18 */
  --fs-xl:   1.25rem;   /* 20 */
  --fs-2xl:  1.5rem;    /* 24 */
  --fs-3xl:  1.875rem;  /* 30 */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* ------------------------------------------------------------------------
     Spacing scale
     ------------------------------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* ------------------------------------------------------------------------
     Borders / radii / shadows
     ------------------------------------------------------------------------ */
  --border-grey:         var(--color-grigio-blu);
  --border-light-grey:   rgba(99, 104, 130, 0.30);
  --border-subtle-grey:  rgba(99, 104, 130, 0.15);

  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* ------------------------------------------------------------------------
     Z-index scale — canonical, single source of truth
     Flatpickr (pickers) must float above modals.
     ------------------------------------------------------------------------ */
  --z-dropdown:   1000;
  --z-rail:       1040;
  --z-drawer:     1200;
  --z-modal:      1055;   /* Bootstrap default */
  --z-flatpickr:  10000;  /* above modals */
}