/* ==========================================================================
   Mama Bear Law — Color Tokens
   Base palette from the official brand color sheet, plus derived tints/shades
   and semantic aliases used across the site and product surfaces.
   ========================================================================== */

:root {
  /* --- Brand base palette (from Mama Bear Law color sheet) --- */
  --mbl-teal: #30DDD2;      /* Mama's fur — bright cyan-teal */
  --mbl-blue: #3272EA;      /* Secondary gradient stop, links, accents */
  --mbl-ink: #17052B;       /* Deep aubergine/near-black — primary dark ground */
  --mbl-purple: #7600BD;    /* Primary brand purple — CTAs, headlines */
  --mbl-lilac: #CB92FD;     /* Light purple — highlights, accents on dark */

  /* --- Purple ramp (derived around --mbl-purple) --- */
  --purple-50:  #F6EDFC;
  --purple-100: #ECD9FA;
  --purple-200: #DCBAF6;
  --purple-300: #CB92FD;  /* = lilac */
  --purple-400: #A64BE0;
  --purple-500: #7600BD;  /* = brand purple */
  --purple-600: #63009F;
  --purple-700: #4E0080;
  --purple-800: #380560;
  --purple-900: #17052B;  /* = ink */

  /* --- Teal ramp (derived around --mbl-teal) --- */
  --teal-100: #D2FAF7;
  --teal-200: #9DF1EA;
  --teal-300: #5FE6DB;
  --teal-400: #30DDD2;  /* = brand teal */
  --teal-500: #17B7AD;
  --teal-600: #0E8F87;

  /* --- Blue ramp (derived around --mbl-blue) --- */
  --blue-100: #DCE7FC;
  --blue-200: #ABC5F7;
  --blue-300: #6A9AF1;
  --blue-400: #3272EA;  /* = brand blue */
  --blue-500: #1D57C4;
  --blue-600: #123F94;

  /* --- Neutrals (warm-cool grays tuned to the aubergine ink) --- */
  --white:      #FFFFFF;
  --gray-50:    #F7F5FA;
  --gray-100:   #EFEBF3;
  --gray-200:   #E1DBE8;
  --gray-300:   #C9C1D3;
  --gray-400:   #9E93AD;
  --gray-500:   #6F6580;
  --gray-600:   #4E4560;
  --gray-700:   #362C48;
  --gray-800:   #241736;
  --gray-900:   #17052B;  /* = ink */
  --black:      #0B0116;

  /* --- Signature gradients --- */
  --gradient-fur: linear-gradient(180deg, var(--mbl-teal) 0%, var(--mbl-blue) 100%);
  --gradient-cub: linear-gradient(180deg, var(--mbl-lilac) 0%, var(--mbl-purple) 100%);
  --gradient-brand: linear-gradient(180deg, var(--mbl-teal) 0%, var(--mbl-blue) 45%, var(--mbl-purple) 100%);
  --gradient-ink: linear-gradient(180deg, #1E0838 0%, var(--mbl-ink) 100%);
  --gradient-bloom: linear-gradient(180deg, #FFFFFF 0%, rgba(203, 146, 253, 0.25) 100%); /* white → light purple @ 25% */

  /* ======================================================================
     Semantic aliases
     ====================================================================== */

  /* Surfaces — the only four allowed page/section backgrounds:
     white, ink, a neutral-50 wash, and the bloom gradient (white → lilac). */
  --surface-page:     var(--white);
  --surface-muted:    var(--gray-50);        /* neutral-50 section wash */
  --surface-card:     var(--white);
  --surface-dark:     var(--mbl-ink);        /* hero / footer ground */
  --surface-bloom:    var(--gradient-bloom); /* white → lilac gradient band */

  /* Text */
  --text-strong:   var(--mbl-ink);        /* headlines on light */
  --text-body:     var(--gray-700);       /* body copy on light */
  --text-muted:    var(--gray-500);       /* captions, meta */
  --text-on-dark:  var(--white);          /* copy on ink/purple */
  --text-on-dark-muted: rgba(255,255,255,0.72);
  --text-accent:   var(--mbl-purple);     /* purple emphasis */
  --text-link:     var(--mbl-purple);
  --text-link-hover: var(--purple-600);

  /* Interactive */
  --action-primary:        var(--mbl-purple);
  --action-primary-hover:  var(--purple-600);
  --action-primary-active: var(--purple-700);
  --action-on-primary:     var(--white);

  /* Borders & lines */
  --border-subtle:  var(--gray-200);
  --border-strong:  var(--gray-300);
  --border-on-dark: rgba(255,255,255,0.14);

  /* Focus ring */
  --focus-ring: var(--mbl-blue);

  /* Semantic status (kept minimal — brand-tuned) */
  --success: #17B7AD;
  --warning: #E0A020;   /* gavel gold, used sparingly */
  --danger:  #D8305F;
  --gold:    #E0A020;   /* the gavel accent from the mark */
}