/* ============================================================================
   MODERN MOOD — BRIDGE LAYER for Pricing Manager
   Maps legacy CSS variables → --mm-* design tokens
   This file MUST load AFTER mm-tokens.css and BEFORE any app CSS
   ============================================================================ */

:root {
  /* ── Brand Colors → MM Tokens ─────────────────────────────────────────── */
  --brand-orange:     var(--mm-action-primary);
  --brand-orange-50:  #FFF4ED;
  --brand-orange-100: #FFE5D6;
  --brand-orange-200: #FFC7A3;
  --brand-orange-300: #FFA970;
  --brand-orange-400: #FF8C3A;
  --brand-orange-500: var(--mm-action-primary);
  --brand-orange-600: var(--mm-accent-hover);
  --brand-orange-700: #B35210;
  --brand-orange-800: #8C3F0D;
  --brand-orange-900: #662D0A;

  --brand-pink:     var(--mm-brand-affection);
  --brand-pink-50:  #FFF5F7;
  --brand-pink-100: #FFE9EE;
  --brand-pink-200: #FFD6E0;
  --brand-pink-300: var(--mm-brand-affection);
  --brand-pink-400: #E999AC;
  --brand-pink-500: #E17F96;
  --brand-pink-600: #D96680;
  --brand-pink-700: #C24D6A;
  --brand-pink-800: #993D54;
  --brand-pink-900: #6B2B3B;

  --brand-lime:     var(--mm-mood-green);
  --brand-lime-50:  #FDFFF0;
  --brand-lime-100: #F9FFD1;
  --brand-lime-200: #F3FFA3;
  --brand-lime-300: #EDFF75;
  --brand-lime-400: #E7FF47;
  --brand-lime-500: var(--mm-mood-green);
  --brand-lime-600: #C8DC1E;
  --brand-lime-700: #A8B818;
  --brand-lime-800: #889413;
  --brand-lime-900: #68700E;

  --brand-off-white: var(--mm-surface-base);
  --brand-black:     var(--mm-text-primary);

  /* ── Primary Colors (styles.css legacy) ───────────────────────────────── */
  --primary-color: var(--mm-accent);
  --primary-dark:  var(--mm-accent-hover);
  --primary-light: #FF8C3A;
  --accent-pink:   var(--mm-brand-affection);
  --accent-lime:   var(--mm-mood-green);

  /* ── Gradients → MM base ──────────────────────────────────────────────── */
  --gradient-primary:   linear-gradient(135deg, var(--mm-accent) 0%, #FF8C3A 100%);
  --gradient-secondary: linear-gradient(135deg, var(--mm-brand-affection) 0%, #FFD6E0 100%);
  --gradient-accent:    linear-gradient(135deg, var(--mm-mood-green) 0%, #F3FFA3 100%);
  --gradient-dark:      linear-gradient(135deg, var(--mm-black) 0%, #2D2D2D 100%);
  --gradient-premium:   linear-gradient(135deg, var(--mm-accent) 0%, var(--mm-brand-affection) 50%, var(--mm-mood-green) 100%);
  --gradient-hero:      linear-gradient(135deg, rgba(236,112,20,0.1) 0%, rgba(241,179,194,0.1) 50%, rgba(224,244,49,0.1) 100%);

  /* ── Neutrals ─────────────────────────────────────────────────────────── */
  --neutral-50:  #FAFAFA;
  --neutral-100: #F5F5F5;
  --neutral-200: #E5E5E5;
  --neutral-300: #D4D4D4;
  --neutral-400: #A3A3A3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;

  /* ── Semantic → MM status ─────────────────────────────────────────────── */
  --success-50:  var(--mm-success-bg);
  --success-500: var(--mm-success);
  --success-600: #16A34A;
  --success-700: #15803D;

  --warning-50:  var(--mm-warning-bg);
  --warning-500: var(--mm-warning);
  --warning-600: #D97706;
  --warning-700: #B45309;

  --error-50:  var(--mm-error-bg);
  --error-500: var(--mm-error);
  --error-600: #DC2626;
  --error-700: #B91C1C;

  --info-50:  var(--mm-info-bg);
  --info-500: var(--mm-info);
  --info-600: #2563EB;
  --info-700: #1D4ED8;

  /* ── Backgrounds → MM surface ─────────────────────────────────────────── */
  --bg-primary:   var(--mm-surface);
  --bg-secondary: var(--mm-bg);
  --bg-tertiary:  var(--mm-surface-subtle);
  --bg-card:      var(--mm-surface);
  --bg-elevated:  var(--mm-surface);
  --bg-hover:     var(--mm-state-hover);
  --bg-active:    var(--mm-state-active);
  --bg-disabled:  var(--mm-state-disabled);

  /* ── Glass (kept for compat, not neo-brutalist) ───────────────────────── */
  --glass-bg:     rgba(248, 243, 235, 0.85);
  --glass-border: rgba(248, 243, 235, 0.3);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);

  /* ── Text → MM text ───────────────────────────────────────────────────── */
  --text-primary:   var(--mm-text);
  --text-secondary: var(--mm-text-secondary);
  --text-tertiary:  var(--mm-text-muted);
  --text-disabled:  var(--mm-state-disabled);
  --text-inverse:   var(--mm-text-inverse);
  --text-on-brand:  var(--mm-text-on-accent);
  --text-muted:     var(--mm-text-muted);

  /* ── Borders → MM borders ─────────────────────────────────────────────── */
  --border-color:        var(--mm-border-subtle);
  --border-color-subtle: var(--mm-surface-subtle);
  --border-color-strong: var(--mm-border-subtle);

  /* ── Shadows → MM shadows (soft fallbacks for non-brutal contexts) ──── */
  --shadow-xs:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm:  0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-primary:   0 10px 30px -5px rgba(236, 112, 20, 0.3);
  --shadow-secondary: 0 10px 30px -5px rgba(241, 179, 194, 0.3);
  --shadow-accent:    0 10px 30px -5px rgba(224, 244, 49, 0.3);

  /* ── Radius → MM radius ───────────────────────────────────────────────── */
  --radius-none: var(--mm-radius-none);
  --radius-xs:   var(--mm-radius-sm);
  --radius-sm:   var(--mm-radius-sm);
  --radius-md:   var(--mm-radius-md);
  --radius-lg:   12px;
  --radius-xl:   var(--mm-radius-lg);
  --radius-2xl:  var(--mm-radius-xl);
  --radius-full: var(--mm-radius-full);
  --border-radius: var(--mm-radius-md);

  /* ── Spacing → MM spacing ─────────────────────────────────────────────── */
  --space-0:  var(--mm-space-0);
  --space-1:  var(--mm-space-1);
  --space-2:  var(--mm-space-2);
  --space-3:  var(--mm-space-3);
  --space-4:  var(--mm-space-4);
  --space-5:  var(--mm-space-5);
  --space-6:  var(--mm-space-6);
  --space-8:  var(--mm-space-8);
  --space-10: var(--mm-space-10);
  --space-12: var(--mm-space-12);
  --space-16: var(--mm-space-16);
  --space-20: var(--mm-space-20);
  --space-24: var(--mm-space-24);
  --spacing-xs: var(--mm-space-1);
  --spacing-sm: var(--mm-space-2);
  --spacing-md: var(--mm-space-4);
  --spacing-lg: var(--mm-space-6);
  --spacing-xl: var(--mm-space-8);

  /* ── Typography → MM fonts ────────────────────────────────────────────── */
  --font-sans:    var(--mm-font-body);
  --font-mono:    var(--mm-font-mono);
  --font-display: var(--mm-font-display);
  --font-family:  var(--mm-font-body);

  /* Font sizes */
  --text-xs:   var(--mm-text-xs);
  --text-sm:   var(--mm-text-sm);
  --text-base: var(--mm-text-md);
  --text-lg:   var(--mm-text-lg);
  --text-xl:   var(--mm-text-xl);
  --text-2xl:  var(--mm-text-2xl);
  --text-3xl:  var(--mm-text-3xl);
  --text-4xl:  var(--mm-text-4xl);
  --text-5xl:  var(--mm-text-5xl);
  --text-6xl:  var(--mm-text-6xl);
  --text-7xl:  var(--mm-text-7xl);
  --font-size-sm:   var(--mm-text-sm);
  --font-size-base: var(--mm-text-md);
  --font-size-lg:   var(--mm-text-lg);
  --font-size-xl:   var(--mm-text-2xl);

  /* Line heights */
  --leading-none:    var(--mm-lh-none);
  --leading-tight:   var(--mm-lh-tight);
  --leading-snug:    var(--mm-lh-snug);
  --leading-normal:  var(--mm-lh-normal);
  --leading-relaxed: var(--mm-lh-relaxed);
  --leading-loose:   var(--mm-lh-loose);

  /* Font weights */
  --font-thin:      100;
  --font-light:     300;
  --font-normal:    var(--mm-weight-regular);
  --font-medium:    var(--mm-weight-medium);
  --font-semibold:  var(--mm-weight-semibold);
  --font-bold:      var(--mm-weight-bold);
  --font-extrabold: 800;
  --font-black:     var(--mm-weight-black);

  /* ── Z-Index → MM z-index ─────────────────────────────────────────────── */
  --z-dropdown:       var(--mm-z-dropdown);
  --z-sticky:         var(--mm-z-sticky);
  --z-fixed:          var(--mm-z-sticky);
  --z-modal-backdrop: var(--mm-z-overlay);
  --z-modal:          var(--mm-z-modal);
  --z-popover:        var(--mm-z-modal);
  --z-tooltip:        var(--mm-z-toast);

  /* ── Transitions → MM motion ──────────────────────────────────────────── */
  --transition-fast:   var(--mm-duration-fast) var(--mm-ease-default);
  --transition-base:   var(--mm-duration-base) var(--mm-ease-default);
  --transition-slow:   var(--mm-duration-slow) var(--mm-ease-default);
  --transition-slower: var(--mm-duration-slower) var(--mm-ease-default);
  --transition:        all var(--mm-duration-base) var(--mm-ease-default);

  --ease-in:     var(--mm-ease-in);
  --ease-out:    var(--mm-ease-out);
  --ease-in-out: var(--mm-ease-default);
  --ease-bounce: var(--mm-ease-bounce);

  /* ── Blur ──────────────────────────────────────────────────────────────── */
  --blur-sm:  4px;
  --blur-md:  8px;
  --blur-lg:  16px;
  --blur-xl:  24px;
  --blur-2xl: 40px;

  /* ── styles.css legacy aliases ─────────────────────────────────────────── */
  --success: var(--mm-success);
  --warning: var(--mm-warning);
  --danger:  var(--mm-error);
  --info:    var(--mm-info);

  /* ── Premium-UI legacy ────────────────────────────────────────────────── */
  --premium-gradient: var(--gradient-premium);
  --glass-premium: var(--glass-bg);
  --glass-dark:    rgba(20, 20, 20, 0.85);
  --shadow-soft:   var(--shadow-sm);
  --motion-swift:  var(--mm-duration-fast) var(--mm-ease-default);
  --motion-smooth: var(--mm-duration-base) var(--mm-ease-default);
  --motion-bouncy: var(--mm-duration-slow) var(--mm-ease-bounce);
  --motion-spring: var(--mm-duration-slow) var(--mm-ease-spring);
  --focus-ring:    0 0 0 3px var(--mm-state-focus);
}

/* ── Dark Mode Bridge ───────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-primary:   var(--mm-surface);
  --bg-secondary: var(--mm-bg);
  --bg-tertiary:  var(--mm-surface-subtle);
  --bg-card:      var(--mm-surface);
  --bg-elevated:  var(--mm-surface-strong);
  --bg-hover:     var(--mm-state-hover);
  --bg-active:    var(--mm-state-active);
  --bg-disabled:  rgba(255, 255, 255, 0.05);

  --glass-bg:     rgba(20, 20, 20, 0.85);
  --glass-border: rgba(248, 243, 235, 0.1);

  --text-primary:   var(--mm-text);
  --text-secondary: var(--mm-text-secondary);
  --text-tertiary:  var(--mm-text-muted);
  --text-disabled:  #737373;
  --text-inverse:   var(--mm-text-inverse);
  --text-muted:     var(--mm-text-muted);

  --border-color:        var(--mm-border-subtle);
  --border-color-subtle: #262626;
  --border-color-strong: var(--mm-border-subtle);
}