/* ============================================================
   MuseFlow Shared Design System — Brand Tokens & Utilities
   Version 1.0
   Use for: Landing pages, app studios, marketing sites
   How to reuse: Copy this file, change the --mf-* variables,
   and both pages inherit the new brand instantly.
   ============================================================ */

/* ── Core Brand Palette ── */
:root {
  /* == Primary Brand Colors == */
  --mf-primary:        #D946EF;   /* Vibrant Romance Fuchsia/Magenta */
  --mf-primary-light:  #F0ABFC;   /* Soft fuchsia glow */
  --mf-primary-dark:   #A21CAF;   /* Deep fuchsia for hover states */
  --mf-deep:           #701A75;   /* Rich Amethyst Deep Core */
  --mf-deep-light:     #A21CAF;   /* Lighter amethyst */
  --mf-light:          #FDF4FF;   /* Soft Rose Petal Blush */
  --mf-dark:           #0F172A;   /* Midnight Slate */

  /* == Extended Palette == */
  --mf-accent-purple:  #7C3AED;   /* Accent violet for AI/tech features */
  --mf-accent-gold:    #F59E0B;   /* Warm amber for highlights/CTAs */
  --mf-accent-teal:    #0D9488;   /* Teal for success states */

  /* == Neutral / UI Surface Colors == */
  --mf-bg:             #FAF7F9;   /* Page background — warm off-white */
  --mf-bg-card:        #FFFFFF;   /* Card & container background */
  --mf-bg-input:       #F8FAFC;   /* Input field background */
  --mf-bg-badge:       #F1F0F9;   /* Badge / tag background */
  --mf-bg-dark:        #090D16;   /* Dark footer / section background */
  --mf-bg-dark-card:   #1E293B;   /* Dark card background */

  /* == Text Colors == */
  --mf-text:           #1E293B;   /* Primary body text */
  --mf-text-muted:     #64748B;   /* Secondary / muted text */
  --mf-text-light:     #94A3B8;   /* Light text on dark backgrounds */
  --mf-text-dark:      #0F172A;   /* Heading text */
  --mf-text-on-primary:#FFFFFF;   /* Text on primary brand backgrounds */

  /* == Border Colors == */
  --mf-border:         #F1E4F0;   /* Subtle border (light purple tint) */
  --mf-border-strong:  #E2D5E8;   /* Stronger border */
  --mf-border-dark:    #334155;   /* Border on dark backgrounds */

  /* == Status / Feedback Colors == */
  --mf-success:        #10B981;
  --mf-warning:        #F59E0B;
  --mf-error:          #EF4444;
  --mf-info:           #3B82F6;

  /* == Typography == */
  --mf-font-sans:      'Inter', system-ui, -apple-system, sans-serif;
  --mf-font-mono:      'SF Mono', 'JetBrains Mono', monospace;
  --mf-font-serif:     Georgia, 'Times New Roman', serif;

  /* == Font Sizes (Tailwind-compatible scale) == */
  --mf-text-xs:        0.75rem;
  --mf-text-sm:        0.875rem;
  --mf-text-base:      1rem;
  --mf-text-lg:        1.125rem;
  --mf-text-xl:        1.25rem;
  --mf-text-2xl:       1.5rem;
  --mf-text-3xl:       1.875rem;
  --mf-text-4xl:       2.25rem;
  --mf-text-5xl:       3rem;
  --mf-text-6xl:       3.75rem;

  /* == Font Weights == */
  --mf-font-normal:    400;
  --mf-font-medium:    500;
  --mf-font-semibold:  600;
  --mf-font-bold:      700;
  --mf-font-black:     900;

  /* == Border Radius == */
  --mf-radius-sm:      6px;
  --mf-radius-md:      12px;
  --mf-radius-lg:      16px;
  --mf-radius-xl:      24px;
  --mf-radius-2xl:     32px;
  --mf-radius-full:    9999px;

  /* == Shadows == */
  --mf-shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.05);
  --mf-shadow-md:      0 4px 12px rgba(0, 0, 0, 0.08);
  --mf-shadow-lg:      0 12px 30px -10px rgba(0, 0, 0, 0.1);
  --mf-shadow-xl:      0 20px 40px -12px rgba(0, 0, 0, 0.15);
  --mf-shadow-inner:   inset 0 2px 4px rgba(0, 0, 0, 0.06);
  --mf-shadow-dark:    0 4px 12px rgba(0, 0, 0, 0.3);

  /* == Transitions == */
  --mf-transition:     0.2s ease;
  --mf-transition-slow:0.4s ease;

  /* == Gradients == */
  --mf-gradient-primary:  linear-gradient(135deg, var(--mf-deep), var(--mf-primary));
  --mf-gradient-hero:     linear-gradient(135deg, var(--mf-light), #FFFFFF);
  --mf-gradient-dark:     linear-gradient(135deg, var(--mf-dark), #1E293B);
  --mf-gradient-success:  linear-gradient(135deg, var(--mf-deep), var(--mf-primary));

  /* == Spacing (applied via Tailwind or utility classes) == */
  --mf-space-1:       0.25rem;
  --mf-space-2:       0.5rem;
  --mf-space-3:       0.75rem;
  --mf-space-4:       1rem;
  --mf-space-5:       1.25rem;
  --mf-space-6:       1.5rem;
  --mf-space-8:       2rem;
  --mf-space-10:      2.5rem;
  --mf-space-12:      3rem;
  --mf-space-16:      4rem;
  --mf-space-20:      5rem;
  --mf-space-24:      6rem;

  /* == Layout == */
  --mf-max-width:     1280px;
  --mf-nav-height:    80px;
}

/* ── Prebuilt Utility Classes (framework-agnostic) ── */

.mf-bg-gradient {
  background: var(--mf-gradient-primary);
}

.mf-text-gradient {
  background: var(--mf-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mf-card {
  background: var(--mf-bg-card);
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius-lg);
  box-shadow: var(--mf-shadow-sm);
  transition: box-shadow var(--mf-transition), transform var(--mf-transition);
}

.mf-card:hover {
  box-shadow: var(--mf-shadow-md);
}

.mf-btn-primary {
  display: inline-block;
  background: var(--mf-gradient-primary);
  color: var(--mf-text-on-primary);
  font-weight: var(--mf-font-bold);
  padding: var(--mf-space-3) var(--mf-space-6);
  border-radius: var(--mf-radius-md);
  box-shadow: var(--mf-shadow-sm);
  transition: opacity var(--mf-transition), transform var(--mf-transition);
  text-decoration: none;
  cursor: pointer;
  border: none;
  font-size: var(--mf-text-sm);
}

.mf-btn-primary:hover {
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: var(--mf-shadow-md);
}

.mf-btn-secondary {
  display: inline-block;
  background: var(--mf-bg-badge);
  color: var(--mf-text);
  font-weight: var(--mf-font-semibold);
  padding: var(--mf-space-3) var(--mf-space-6);
  border-radius: var(--mf-radius-md);
  border: 1px solid var(--mf-border-strong);
  transition: all var(--mf-transition);
  text-decoration: none;
  cursor: pointer;
  font-size: var(--mf-text-sm);
}

.mf-btn-secondary:hover {
  background: var(--mf-light);
  border-color: var(--mf-primary);
}

.mf-badge {
  display: inline-block;
  background: var(--mf-bg-badge);
  color: var(--mf-deep);
  font-size: var(--mf-text-xs);
  font-weight: var(--mf-font-bold);
  padding: var(--mf-space-1) var(--mf-space-3);
  border-radius: var(--mf-radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mf-section-title {
  font-size: var(--mf-text-3xl);
  font-weight: var(--mf-font-black);
  color: var(--mf-text-dark);
  margin-bottom: var(--mf-space-4);
}

.mf-section-subtitle {
  color: var(--mf-text-muted);
  font-size: var(--mf-text-base);
  line-height: 1.6;
  max-width: 36rem;
}

/* ── Dark / Inverted Context Overrides ── */
.mf-dark .mf-card {
  background: var(--mf-bg-dark-card);
  border-color: var(--mf-border-dark);
}

.mf-dark .mf-text-muted {
  color: var(--mf-text-light);
}

/* ── Responsive Breakpoints (reference only; apply via media queries) ──
   sm:  640px
   md:  768px
   lg:  1024px
   xl:  1280px
   2xl: 1536px
   ── */