/* ============================================================
   MSSP Agency — Color tokens
   Source of truth: Figma "Color Palette" frame + brand variables.
   Values are exact transcriptions — do not round.
   ============================================================ */

:root {
  /* ---- Brand core (the 5-swatch palette) ---- */
  --mssp-dark: #120C28;        /* Main Dark  · rgb(18,12,40)   · page background */
  --mssp-bright: #901EF4;      /* Main Bright · rgb(144,30,244) · primary accent */
  --mssp-light: #FAFAFF;       /* Main Light · rgb(250,250,255) · light surface / text */
  --mssp-alt-light: #AFD2E9;   /* Alt Light  · rgb(175,210,233) · cool pale blue */
  --mssp-alt-bright: #5F35FF;  /* Alt Bright · rgb(95,53,255)   · electric violet */

  /* ---- Purple scale (brand-colors) ---- */
  --purple-400: #C17DFF;       /* rgb(193,125,255) */
  --purple-500: #A94CFF;       /* rgb(169,76,255)  */
  --purple-600: #7F56D9;       /* rgb(127,86,217)  · workhorse purple, gradients */
  --purple-700: #8118D8;       /* rgb(129,24,216)  · corner-accent markers */
  --purple-800: #6D19B0;       /* rgb(109,25,176)  */
  --purple-900: #53389E;       /* rgb(83,56,158)   · gradient start */
  --purple-950: #3D0269;       /* rgb(61,2,105)    */
  --purple-deep: #42307D;      /* rgb(66,48,125)   · hover gradient tail */

  /* ---- Neutral / greyscale (for text & UI on dark) ---- */
  --white: #FFFFFF;
  --black: #000000;
  --grey-50: #F8F8F8;
  --grey-100: #F2F2F2;
  --grey-200: #DCDCDC;
  --grey-300: #BDBDBD;
  --grey-400: #989898;
  --grey-800: #464646;
  --grey-900: #3D3D3D;
  --grey-950: #292929;

  /* ---- Semantic ---- */
  --success: #00C73F;          /* spring green */
  --error: #FF0000;

  /* ---- Alpha overlays (glass / borders / shadows) ---- */
  --alpha-white-03: rgba(255,255,255,0.03);
  --alpha-white-05: rgba(255,255,255,0.05);
  --alpha-white-15: rgba(255,255,255,0.15);
  --alpha-white-20: rgba(255,255,255,0.2);
  --alpha-white-30: rgba(255,255,255,0.3);
  --alpha-black-03: rgba(0,0,0,0.03);

  /* ============================================================
     Semantic aliases — dark theme is the brand's primary context
     ============================================================ */
  --bg: var(--mssp-dark);
  --bg-elevated: #1B1436;                  /* slightly lifted dark panel */
  --surface-glass: var(--alpha-white-03);  /* frosted glass fill */
  --surface-strong: var(--alpha-white-30);

  --text-primary: var(--white);
  --text-secondary: var(--grey-300);
  --text-muted: var(--grey-400);
  --text-inverse: var(--mssp-dark);

  --accent: var(--mssp-bright);
  --accent-alt: var(--mssp-alt-bright);
  --corner-accent: var(--purple-700);      /* the signature corner-bracket squares */

  --border-hairline: var(--alpha-white-20);
  --border-strong: var(--white);

  --link: var(--purple-400);
  --link-hover: var(--mssp-bright);
}

/* Light surface scope — for collateral on white (posters, print, footer card) */
.mssp-on-light {
  --bg: var(--mssp-light);
  --text-primary: var(--mssp-dark);
  --text-secondary: var(--grey-800);
  --text-muted: var(--grey-400);
  --border-hairline: rgba(18,12,40,0.15);
  --link: var(--mssp-bright);
  --link-hover: var(--purple-700);
}