/* ==========================================================================
   MB STUDIO — COLOR TOKENS
   Every value transcribed verbatim from the "MBES — Brand Kit" Figma file.
   Do not round or snap these hexes.

   Brand rule (from Combinazioni Colore): never use pure white (#FFF) or
   pure black (#000) as a surface or text color. Use the tinted neutral
   ramps below instead. Crimson and Amber are ACCENT-ONLY — never primary.
   ========================================================================== */

:root {
  /* ---- Primary — Magenta (brand primary: CTAs, accents, key elements) ---- */
  --magenta-100: #EECCE3;
  --magenta-200: #DD99C7;
  --magenta-300: #CB66AA;
  --magenta-400: #BA338E;
  --magenta-500: #A90072;
  --magenta-600: #900061;
  --magenta-700: #760050;
  --magenta-800: #550039;
  --magenta-900: #330022;

  /* ---- Deep Purple (deep backgrounds, elegant contrast) ---- */
  --deep-purple-100: #D4CCDA;
  --deep-purple-200: #AA99B6;
  --deep-purple-300: #7F6691;
  --deep-purple-400: #55336D;
  --deep-purple-500: #2A0048;
  --deep-purple-600: #24003D;
  --deep-purple-700: #1D0032;
  --deep-purple-800: #150024;
  --deep-purple-900: #0D0016;

  /* ---- Purple (mid violet, complementary to primary) ---- */
  --purple-100: #E6CCE6;
  --purple-200: #CC99CC;
  --purple-300: #B366B3;
  --purple-400: #993399;
  --purple-500: #800080;
  --purple-600: #6D006D;
  --purple-700: #5A005A;
  --purple-800: #400040;
  --purple-900: #260026;

  /* ---- Crimson — ACCENT ONLY (alerts, emphasis, vibrant detail) ---- */
  --crimson-100: #F7CCDA;
  --crimson-200: #EE99B6;
  --crimson-300: #E66691;
  --crimson-400: #DD336D;
  --crimson-500: #D50048;
  --crimson-600: #B5003D;
  --crimson-700: #950032;
  --crimson-800: #6B0024;
  --crimson-900: #400016;

  /* ---- Amber — ACCENT ONLY (highlights, badges, warm detail) ---- */
  --amber-100: #FFF2DD;
  --amber-200: #FFE5BC;
  --amber-300: #FFD79A;
  --amber-400: #FFCA79;
  --amber-500: #FFBD57;
  --amber-600: #D9A14A;
  --amber-700: #B3843D;
  --amber-800: #805F2C;
  --amber-900: #4D391A;

  /* ==== TINTED NEUTRALS =================================================== */
  /* Five neutral ramps, each with a color dominant. Pick the one whose
     dominant matches the surrounding brand color. Use in place of pure
     grey. Each ramp runs 50 → Black. */

  /* Neutri Magenta */
  --neutral-mg-50:   #F5EBF2;
  --neutral-mg-100:  #F0E6ED;
  --neutral-mg-200:  #E1D7DE;
  --neutral-mg-300:  #D1C7CE;
  --neutral-mg-400:  #A399A0;
  --neutral-mg-500:  #766C73;
  --neutral-mg-600:  #574D54;
  --neutral-mg-700:  #463C43;
  --neutral-mg-800:  #2E242B;
  --neutral-mg-900:  #20161C;
  --neutral-mg-black:#0A0007;

  /* Neutri Deep Purple */
  --neutral-dp-50:   #EBE8EE;
  --neutral-dp-100:  #E7E4E9;
  --neutral-dp-200:  #D8D5DA;
  --neutral-dp-300:  #C8C5CA;
  --neutral-dp-400:  #9B989D;
  --neutral-dp-500:  #6E6B70;
  --neutral-dp-600:  #4F4C51;
  --neutral-dp-700:  #3E3C41;
  --neutral-dp-800:  #262328;
  --neutral-dp-900:  #18151A;
  --neutral-dp-black:#030005;

  /* Neutri Purple */
  --neutral-pu-50:   #F3EBF3;
  --neutral-pu-100:  #EEE6EE;
  --neutral-pu-200:  #DFD7DF;
  --neutral-pu-300:  #CFC7CF;
  --neutral-pu-400:  #A199A1;
  --neutral-pu-500:  #746C74;
  --neutral-pu-600:  #554D55;
  --neutral-pu-700:  #443C44;
  --neutral-pu-800:  #2B242B;
  --neutral-pu-900:  #1D161D;
  --neutral-pu-black:#080008;

  /* Neutri Crimson */
  --neutral-cr-50:   #F8EDF1;
  --neutral-cr-100:  #F3E9EC;
  --neutral-cr-200:  #E4DADD;
  --neutral-cr-300:  #D4C9CD;
  --neutral-cr-400:  #A59B9E;
  --neutral-cr-500:  #786D71;
  --neutral-cr-600:  #594E52;
  --neutral-cr-700:  #473D40;
  --neutral-cr-800:  #2F2428;
  --neutral-cr-900:  #211619;
  --neutral-cr-black:#0B0004;

  /* Neutri Amber */
  --neutral-am-50:   #FAF6F0;
  --neutral-am-100:  #F6F2EC;
  --neutral-am-200:  #E7E3DC;
  --neutral-am-300:  #D7D3CD;
  --neutral-am-400:  #A9A59E;
  --neutral-am-500:  #7B7771;
  --neutral-am-600:  #5C5852;
  --neutral-am-700:  #4B4741;
  --neutral-am-800:  #332F29;
  --neutral-am-900:  #25211B;
  --neutral-am-black:#0F0B05;

  /* ==== SEMANTIC ALIASES ================================================= */
  /* Default surface family is Magenta-tinted neutrals (matches primary). */

  --color-primary:          var(--magenta-500);
  --color-primary-hover:    var(--magenta-600);
  --color-primary-active:   var(--magenta-700);
  --color-primary-subtle:   var(--magenta-100);

  --color-secondary:        var(--purple-500);
  --color-secondary-hover:  var(--purple-600);

  --color-accent-crimson:   var(--crimson-500);
  --color-accent-amber:     var(--amber-500);

  /* Surfaces */
  --surface-page:      var(--neutral-mg-50);
  --surface-card:      var(--neutral-mg-100);
  --surface-raised:    #FFFFFF; /* used sparingly; brand prefers tinted 50 */
  --surface-sunken:    var(--neutral-mg-200);
  --surface-inverse:   var(--deep-purple-500);

  /* Text — layered opacities of the darkest tinted neutral */
  --text-strong:    rgba(10, 0, 7, 0.92);   /* ~neutral-mg-black */
  --text-body:      rgba(10, 0, 7, 0.72);
  --text-muted:     rgba(10, 0, 7, 0.55);
  --text-subtle:    rgba(10, 0, 7, 0.35);
  --text-on-dark:         var(--neutral-mg-50);
  --text-on-dark-muted:   rgba(245, 235, 242, 0.72);
  --text-on-primary:      var(--neutral-mg-50);

  /* Borders & dividers */
  --border-subtle:  rgba(10, 0, 7, 0.06);
  --border-default: rgba(10, 0, 7, 0.12);
  --border-strong:  rgba(10, 0, 7, 0.24);
  --border-on-dark: rgba(245, 235, 242, 0.16);

  /* Focus ring */
  --focus-ring: rgba(169, 0, 114, 0.40);
}