/* ===========================================================
   Epic Magnolia — Brand Theme
   Mystical purple-magnolia aesthetic, deep black canvas
   =========================================================== */

:root {
  /* --- Primitive palette --- */
  --magnolia-50:  #f6f0ff;
  --magnolia-100: #ead9ff;
  --magnolia-200: #d4b3ff;
  --magnolia-300: #b986ff;
  --magnolia-400: #9d5cff;
  --magnolia-500: #7b2dff;   /* core brand purple */
  --magnolia-600: #6019d6;
  --magnolia-700: #4a12a6;
  --magnolia-800: #320b73;
  --magnolia-900: #1c0644;

  --bloom-pink:   #d97cff;   /* magnolia petal accent */
  --bloom-gold:   #f5c453;   /* rare/legendary accent */
  --bloom-mint:   #6affc6;   /* shiny accent */

  --ink-0:    #050207;       /* deepest black-violet */
  --ink-50:   #0b0512;
  --ink-100:  #110820;
  --ink-200:  #1a0f30;
  --ink-300:  #251642;
  --ink-400:  #342156;
  --ink-500:  #4a3273;
  --ink-600:  #6a4f9c;
  --ink-700:  #8a73bd;
  --ink-800:  #b6a5d9;
  --ink-900:  #ece4f7;

  --white:    #ffffff;

  /* --- Semantic tokens --- */
  --bg:              var(--ink-0);
  --bg-elevated:     var(--ink-100);
  --bg-card:         linear-gradient(155deg, rgba(60,28,120,0.35) 0%, rgba(15,6,40,0.85) 100%);
  --bg-card-hover:   linear-gradient(155deg, rgba(123,45,255,0.45) 0%, rgba(30,10,60,0.9) 100%);

  --surface-glass:   rgba(20, 8, 45, 0.55);
  --surface-border:  rgba(157, 92, 255, 0.18);
  --surface-border-strong: rgba(157, 92, 255, 0.45);

  --text-primary:   #f4ecff;
  --text-secondary: #b6a5d9;
  --text-muted:     #6a4f9c;

  --brand:          var(--magnolia-500);
  --brand-hover:    var(--magnolia-400);
  --brand-glow:     rgba(123, 45, 255, 0.55);

  --success:        var(--bloom-mint);
  --warning:        var(--bloom-gold);
  --rare:           var(--bloom-gold);
  --shiny:          var(--bloom-mint);

  /* --- Type colors (Pokemon types) --- */
  --t-normal:   #a8a878;
  --t-fire:     #ff5d3d;
  --t-water:    #4a90ff;
  --t-electric: #f8d030;
  --t-grass:    #6acf52;
  --t-ice:      #a8e6f5;
  --t-fighting: #c03028;
  --t-poison:   #a040a0;
  --t-ground:   #d4a85a;
  --t-flying:   #a890f0;
  --t-psychic:  #ff5db1;
  --t-bug:      #a8b820;
  --t-rock:     #b8a038;
  --t-ghost:    #705898;
  --t-dragon:   #7038f8;
  --t-dark:     #3d2c2c;
  --t-steel:    #b8b8d0;
  --t-fairy:    #ee99ac;

  /* --- Typography --- */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* --- Spacing scale (4px base) --- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* --- Radius --- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* --- Shadows --- */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.55);
  --shadow-glow: 0 0 40px rgba(123, 45, 255, 0.45);
  --shadow-glow-strong: 0 0 80px rgba(157, 92, 255, 0.6);

  /* --- Transitions --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.15s var(--ease);
  --t-base: 0.3s var(--ease);
  --t-slow: 0.6s var(--ease);

  /* --- Layout --- */
  --container: 1280px;
  --container-narrow: 960px;
  --header-h: 76px;
}