:root {
  /* ─── Surface / Background ───────────────────────────── */
  --color-bg:                    #f7f6fe;
  --color-surface:               #ffffff;
  --color-surface-low:           #f0f0f9;
  --color-surface-container:     #e8e7f1;

  /* ─── Text ────────────────────────────────────────────── */
  --color-text:                  #2d2e34;
  --color-text-secondary:        #5a5b62;
  --color-text-muted:            #76767d;

  /* ─── Primary — rose/pink ─────────────────────────────── */
  --color-primary:               #a02d70;
  --color-primary-dim:           #912063;
  --color-primary-container:     #f673b7;
  --color-on-primary:            #ffeff3;

  /* ─── Secondary — orange ─────────────────────────────── */
  --color-secondary:             #904800;
  --color-secondary-container:   #ffc69f;
  --color-on-secondary:          #fff0e8;

  /* ─── Tertiary — indigo ───────────────────────────────── */
  --color-tertiary:              #4650b9;
  --color-tertiary-container:    #a2aaff;
  --color-on-tertiary:           #f3f1ff;

  /* ─── Semantic ────────────────────────────────────────── */
  --color-success:               #10b981;
  --color-error:                 #b41340;
  --color-outline:               #76767d;
  --color-outline-variant:       #acacb4;

  /* ─── Gradient ────────────────────────────────────────── */
  --gradient-primary:  linear-gradient(135deg, #a02d70 0%, #4650b9 100%);
  --gradient-cta:      linear-gradient(140deg, #3730a3 0%, #5b21b6 60%, #a02d70 100%);

  /* ─── Glass ───────────────────────────────────────────── */
  --glass-bg:          rgba(255, 255, 255, 0.45);
  --glass-bg-hover:    rgba(255, 255, 255, 0.65);
  --glass-blur:        blur(20px);
  --glass-border:      rgba(255, 255, 255, 0.30);

  /* ─── Font ────────────────────────────────────────────── */
  --font-display: 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* ─── Fluid type ──────────────────────────────────────── */
  --text-xs:   clamp(0.70rem, 0.8vw,  0.80rem);
  --text-sm:   clamp(0.85rem, 1.0vw,  0.95rem);
  --text-base: clamp(1.00rem, 1.2vw,  1.05rem);
  --text-lg:   clamp(1.10rem, 1.4vw,  1.20rem);
  --text-xl:   clamp(1.20rem, 1.8vw,  1.40rem);
  --text-2xl:  clamp(1.40rem, 2.2vw,  1.80rem);
  --text-3xl:  clamp(1.80rem, 3.0vw,  2.50rem);
  --text-4xl:  clamp(2.20rem, 4.5vw,  3.75rem);
  --text-hero: clamp(2.80rem, 7.0vw,  6.00rem);

  /* ─── Spacing ─────────────────────────────────────────── */
  --sp-1:  0.25rem;  --sp-2:  0.50rem;  --sp-3:  0.75rem;
  --sp-4:  1.00rem;  --sp-5:  1.25rem;  --sp-6:  1.50rem;
  --sp-8:  2.00rem;  --sp-10: 2.50rem;  --sp-12: 3.00rem;
  --sp-16: 4.00rem;  --sp-20: 5.00rem;  --sp-24: 6.00rem;

  /* ─── Layout ──────────────────────────────────────────── */
  --container-width: 1280px;
  --container-pad:   clamp(1.25rem, 5vw, 4rem);
  --section-pad:     clamp(4rem, 8vw, 8rem);
  --nav-height:      64px;  /* floating pill height */
  --nav-offset:      16px;  /* distance from top */

  /* ─── Radii ───────────────────────────────────────────── */
  --r-sm:   6px;   --r-md:  12px;  --r-lg:  16px;
  --r-xl:   24px;  --r-2xl: 32px;  --r-full: 999px;

  /* ─── Shadows ─────────────────────────────────────────── */
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:    0 4px 20px rgba(160,45,112,0.12);
  --shadow-lg:    0 12px 40px rgba(160,45,112,0.18);
  --shadow-glass: 0 8px 32px rgba(31,38,135,0.07);
  --shadow-btn:   0 4px 16px rgba(160,45,112,0.35);

  /* ─── Transitions ─────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 150ms var(--ease-out);
  --t-base: 300ms var(--ease-out);
  --t-slow: 500ms var(--ease-out);
}