/* =====================
   Midight — palette mapped into Lumos `--swatch--*` namespace.

   Loaded AFTER `styleguide.css` so these definitions win the cascade and
   override the HD baseline swatches. As a result, every Lumos utility
   class (e.g. `.u-bg-brand-500`, `.u-text-color-dark`, `.u-border-light-200`)
   paints Midight colors automatically — no rewriting Lumos required.

   Source of truth: Figma node 4249:26498 (Midight styleguide).
===================== */

:root {
  /* ============================================
     Lumos swatches — REWIRED for Midight
     ============================================ */

  /* Brand (Midight Main Green). brand-100..400/600..900 are derived from
     brand-500 via color-mix() inside styleguide.css and pick up automatically. */
  --swatch--brand-500: #90F99C;
  --swatch--brand-text: #01000C;  /* dark text on light-green brand */

  /* Dark scale — backgrounds */
  --swatch--dark-900: #131313;  /* Main Background */
  --swatch--dark-800: #242424;  /* Cards BG */
  --swatch--dark-400: #B8B8B8;  /* Lightest Grey (mid-tone, used for muted text on dark) */

  /* Light scale */
  --swatch--light-100: #FFFFFF;
  --swatch--light-200: #EBEAE9;  /* off-white page background in light theme */
  --swatch--light-300: #CCCAC9;

  /* Accent (Midight Accent Orange) — kept under HD's `accent-*` var so
     `u-bg-accent-orange` etc. paint Midight orange. */
  --swatch--accent-orange: #F6A272;

  /* ============================================
     Midight secondary palette — new vars
     (no HD counterparts, used for chips/badges/decorative)
     ============================================ */
  --swatch--secondary-purple: #9590F9;
  --swatch--secondary-pink:   #F990BF;
  --swatch--secondary-blue:   #90E4F9;
  --swatch--secondary-yellow: #F8F990;
  --swatch--secondary-lilac:  #C390F9;
  --swatch--secondary-red:    #FF7C7E;

  /* ============================================
     Semantic aliases — convenience for `m_*` components.
     Read like Figma: `var(--color--main-green)`, `var(--color--bg-cards)`.
     All point at the same Lumos swatches above.
     ============================================ */
  --color--main-green:        var(--swatch--brand-500);
  --color--main-green-hover:  #A9FFB3;       /* Figma hover, no Lumos slot */
  --color--accent-orange:     var(--swatch--accent-orange);
  --color--bg-main:           var(--swatch--dark-900);
  --color--bg-cards:          var(--swatch--dark-800);
  --color--lightest-grey:     var(--swatch--dark-400);
  --color--white:             var(--swatch--light-100);

  --color--purple: var(--swatch--secondary-purple);
  --color--pink:   var(--swatch--secondary-pink);
  --color--blue:   var(--swatch--secondary-blue);
  --color--yellow: var(--swatch--secondary-yellow);
  --color--lilac:  var(--swatch--secondary-lilac);
  --color--red:    var(--swatch--secondary-red);

  --color--text-primary: var(--swatch--brand-text);    /* black-ish on light/brand */
  --color--text-on-dark: var(--swatch--light-200);     /* off-white on dark */

  --color--button-bg:           var(--color--main-green);
  --color--button-bg-hover:     var(--color--main-green-hover);
  --color--button-text:         #000000;
  --color--button-border-frame: rgba(255, 255, 255, 0.12);

  /* ============================================
     Layout — REWIRED for Midight
     - .u-container max width = 1440px (Lumos default)
     - Side margin: fluid clamp 16px (mobile) → 140px (desktop @1440)
       Linear interpolation between 320px and 1440px viewport.
     - .u-grid-custom gutter = 12px flat (project standard).
     ============================================ */
  --site--margin: clamp(1rem, calc(-1.214rem + 11.071vw), 8.75rem);
  --site--gutter: 0.75rem;
}