/* ==========================================================================
   TANDEM — Design Tokens (Neon Plum × Soft Mint)
   ========================================================================== */

:root {
  /* — Palette — */
  --bg:             #120D1A;        /* page background — purple-black */
  --bg-2:           #1A1224;        /* slightly elevated */
  --bg-3:           #221730;        /* card surface on bg */

  --plum:           #241A33;        /* dark form/section surface */
  --plum-2:         #2E2240;
  --plum-3:         #3A2A52;        /* accent edge on plum */
  --plum-deep:      #19102B;

  --linen:          #FAF9F6;        /* main text — light linen */
  --linen-mute:     rgba(250, 249, 246, 0.62);
  --linen-faint:    rgba(250, 249, 246, 0.38);
  --linen-line:     rgba(250, 249, 246, 0.10);
  --linen-line-2:   rgba(250, 249, 246, 0.18);

  --mint:           #5EFFA1;        /* primary accent — soft neon mint */
  --mint-bright:    #39FF14;        /* hot mint for short bursts */
  --mint-soft:      rgba(94, 255, 161, 0.18);
  --mint-glow:      rgba(94, 255, 161, 0.55);
  --mint-deep:      #2BCC73;

  --orchid:         #B47BE6;        /* secondary purple-violet accent */

  /* Legacy color aliases (kept so existing CSS using --orange/--cream/--anthracite/--bone still resolves) */
  --bone:           var(--bg);
  --bone-2:         var(--bg-2);
  --bone-3:         var(--plum-3);
  --bone-line:      var(--linen-line);
  --cream:          var(--linen);
  --cream-deep:     var(--linen);
  --cream-soft:     var(--linen-mute);
  --orange:         var(--mint);
  --orange-2:       var(--mint-deep);
  --orange-deep:    var(--mint-deep);
  --orange-soft:    var(--mint-soft);
  --anthracite:     var(--plum);
  --anthracite-2:   var(--plum-2);
  --anthracite-3:   var(--plum-3);
  --ink:            var(--bg);

  --text:           var(--linen);
  --text-mute:      var(--linen-mute);
  --text-faint:     var(--linen-faint);
  --text-on-dark:   var(--linen);
  --text-on-dark-mute: var(--linen-mute);

  /* — Type — */
  --display:        'Quicksand', ui-rounded, system-ui, sans-serif;
  --body:           'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --accent:         'Geologica', 'Plus Jakarta Sans', sans-serif;

  /* Type scale */
  --fs-xs:    0.75rem;
  --fs-sm:    0.8125rem;
  --fs-base:  1rem;
  --fs-md:    clamp(1rem, 0.92rem + 0.4vw, 1.125rem);
  --fs-lg:    clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --fs-xl:    clamp(1.375rem, 1.15rem + 1.1vw, 2rem);
  --fs-2xl:   clamp(1.875rem, 1.4rem + 2.4vw, 3rem);
  --fs-3xl:   clamp(2.5rem, 1.8rem + 3.6vw, 4.25rem);
  --fs-4xl:   clamp(3.25rem, 2.2rem + 5.5vw, 6rem);
  --fs-5xl:   clamp(4rem, 2.4rem + 8vw, 9rem);

  /* — Spacing — */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.5rem;
  --sp-6:   2rem;
  --sp-7:   3rem;
  --sp-8:   4rem;
  --sp-9:   6rem;
  --sp-10:  8rem;
  --sp-11:  12rem;

  /* — Layout — */
  --container:   1440px;
  --gutter:      clamp(1.25rem, 4vw, 2.5rem);
  --radius-sm:   8px;
  --radius:      16px;
  --radius-lg:   28px;
  --radius-xl:   40px;

  /* — Motion — */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-quint:   cubic-bezier(0.83, 0, 0.17, 1);
  --ease-back:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:     220ms;
  --dur:          420ms;
  --dur-slow:     720ms;
  --dur-xslow:    1200ms;

  /* — Effects — */
  --glow-mint:    0 0 60px -8px rgba(94, 255, 161, 0.5);
  --glow-orchid:  0 0 80px -12px rgba(180, 123, 230, 0.4);
  --shadow-soft:  0 24px 48px -20px rgba(0, 0, 0, 0.6),
                  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-card:  0 32px 64px -24px rgba(0, 0, 0, 0.8),
                  0 0 0 1px rgba(250, 249, 246, 0.06) inset;
  --shadow-deep:  0 48px 96px -28px rgba(0, 0, 0, 0.9);
}