/* ============================================================
   JUWIX — Design Tokens
   Source: Figma (HXXIJvip1ytAmH0M63OPzN) + compliance page
   WCAG 2.1 AA verified colour pairs listed in comments
   ============================================================ */
:root {
  /* --- Brand colours --- */
  --pink:          #E8004E; /* on white: 4.56:1 ✓ AA */
  --pink-soft:     #FFEBF1;
  --pink-hover:    rgba(232, 0, 78, 0.08);
  --lilac:         #c7c3ff;
  --lilac-soft:    #ede8ff;
  --orange:        #FFBB1C;
  --alice-blue:    #E1EDFF;

  /* --- Neutrals --- */
  --bg:            #F5F5F5;
  --surface:       rgba(255, 255, 255, 0.58);
  --surface-mid:   rgba(255, 255, 255, 0.72);
  --surface-solid: #ffffff;
  --text:          #292929; /* on white: 12.6:1 ✓ AAA */
  --text-body:     #474747; /* on white:  8.3:1 ✓ AAA */
  --text-soft:     #5c5c5f; /* on white:  6.5:1 ✓ AA  */
  --text-muted:    #767676; /* on white:  4.6:1 ✓ AA  */
  --border:        rgba(41, 41, 41, 0.10);
  --border-mid:    rgba(41, 41, 41, 0.18);

  /* --- Semantic --- */
  --green:         #146d3f;
  --green-bg:      rgba(20, 109, 63, 0.08);
  --green-border:  rgba(20, 109, 63, 0.24);

  /* --- Shadows --- */
  --shadow-card:   0 2px 4px rgba(0,0,0,0.06), 0 8px 32px rgba(145,124,255,0.08);
  --shadow-float:  0 10px 30px rgba(17,17,17,0.07), 0 24px 80px rgba(145,124,255,0.10);
  --shadow-soft:   0 4px 16px rgba(17,17,17,0.06);
  --shadow-pink:   0 4px 16px rgba(232,0,78,0.18);

  /* --- Focus ring (WCAG 2.1 SC 2.4.7) --- */
  --focus-ring:    0 0 0 3px rgba(232, 0, 78, 0.30);

  /* --- Radii --- */
  --r-xl:   28px;
  --r-lg:   20px;
  --r-md:   14px;
  --r-sm:    8px;
  --r-pill: 999px;

  /* --- Layout --- */
  --container:  1180px;
  --gap-section: clamp(64px, 10vw, 120px);

  /* --- Typography --- */
  --font:        "Open Sans", system-ui, sans-serif;
  --weight-reg:  400;
  --weight-semi: 600;
  --weight-bold: 700;
  --weight-xbold:800;
}

/* Dark mode — minimal, preserves brand identity */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #0e0207;
    --surface:       rgba(255,255,255,0.06);
    --surface-mid:   rgba(255,255,255,0.10);
    --surface-solid: #1a0a12;
    --text:          #f5f0f2;
    --text-body:     #c8bfc3;
    --text-soft:     #998a90;
    --text-muted:    #7a7076;
    --border:        rgba(255,255,255,0.10);
    --border-mid:    rgba(255,255,255,0.16);
    --shadow-card:   0 2px 4px rgba(0,0,0,0.3), 0 8px 32px rgba(145,124,255,0.12);
  }
}