/* =========================================================================
   tokens.css — Gimme MWAH design tokens
   -------------------------------------------------------------------------
   Diverged from the MWAH Lip Gloss Pen palette on purpose: this brand runs a
   grape/orchid family with a coral accent rather than the parent's hot pink,
   picked to sit with the fruit range (Glow Up Grape, Pearanormal Activity,
   Berry Baddie) instead of against it.

   Every brand colour below carries BLACK text, the same as the parent, and
   every pairing was contrast-checked rather than eyeballed:

     #9B5DE5 on black   5.09:1   AA  normal text
     #AD73F0 on black   6.49:1   AA  normal text
     #C77DFF on black   7.81:1   AAA normal text
     #FF8FA3 on black   9.71:1   AAA normal text
     #666666 on #F4ECFF 5.00:1   AA  normal text

   Appearance > Customize > Brand colours overrides --brand, --brand-hover,
   --brand-soft, --accent and --wash at runtime, so these are the defaults
   rather than the last word.
   ========================================================================= */

:root {
  /* Brand */
  --brand: #9B5DE5;          /* grape — primary actions, active states */
  --brand-hover: #AD73F0;    /* lighter on hover, so black text still passes */
  --brand-soft: #C77DFF;     /* orchid — secondary accent, decorative */
  --accent: #FF8FA3;         /* coral — highlights, badges */
  --accent-soft: #FFB3A7;    /* peach — soft fills */
  --wash: #F4ECFF;           /* lilac — tinted section backgrounds */
  --wash-warm: #FFF0F5;      /* blush — alternate tinted band */

  /* Aliases so the stylesheets ported from the parent brand still resolve.
     Anything that asked for hot pink now asks for grape. */
  --hot-pink: var(--brand);
  --hot-pink-hover: var(--brand-hover);
  --soft-pink: var(--brand-soft);
  --pink-wash: var(--wash);
  --launch-green: #C2E83C;   /* seasonal limited-edition accent, unchanged */

  /* Neutrals */
  --ink: #000000;
  --ink-hover: #222222;
  --white: #FFFFFF;
  --paper-grey: #F5F3F8;     /* a hair cooler than the parent's, to sit with lilac */
  --map-grey: #ECEAF0;
  --border: #E6E2EC;
  --line: #E0DCE8;
  --text-mid: #555555;
  --text-soft: #666666;      /* AA on white and on --wash */

  /* Spacing scale (power-of-two, 4px base) */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;
  --sp-64: 64px;

  /* Radii — softer than the parent's, to suit the lilac palette */
  --radius-btn: 14px;
  --radius-card: 18px;
  --radius-map: 22px;
  --radius-pill: 999px;

  /* Shadow (one elevation, keep it flat) */
  --shadow-card: 0 2px 14px rgba(85, 40, 140, 0.10);

  /* Typography */
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --content-max: 1200px;
  --content-pad: var(--sp-48);
  --content-pad-mobile: var(--sp-16);

  /* Motion */
  --transition-fast: 0.15s;
  --transition-mid: 0.25s;
}