/* =============================================
   TOKENS — Variables globales de diseño
   ============================================= */

:root {
  /* Paleta principal */
  --primary:        #534AB7;
  --primary-dk:     #26215C;
  --primary-100:    #CECBF6;
  --primary-50:     #EEEDFE;

  /* Superficies */
  --bg:       #F4F4F8;
  --surface:  #FFFFFF;
  --surface2: #F8F8FC;
  --border:   #E4E4E8;

  /* Texto */
  --text:  #1A1A2E;
  --text2: #666680;
  --text3: #AAAAC0;

  /* Semánticos */
  --success:    #16a34a;
  --warning:    #d97706;
  --danger:     #dc2626;
  --bg-success: #DCFCE7;
  --bg-warning: #FEF3C7;
  --bg-danger:  #FEE2E2;

  /* Spacing */
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 12px;
  --gap-lg: 16px;
  --gap-xl: 20px;

  /* Radios */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  22px;
  --radius-full: 9999px;

  /* Safe areas (notch / home indicator) */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  /* Nav */
  --nav-h: 60px;
}