@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@600;700;800;900&display=swap');

/*
 * Dumpling Sorpresa — sistema visual compartido
 * Solo expone tokens de marca. Cada superficie conserva su propio layout y
 * puede mapear estos valores sin depender de la lógica de comercio.
 */
:root {
  color-scheme: light;

  --ds-font-title: 'Fredoka', 'Arial Rounded MT Bold', sans-serif;
  --ds-font-body: 'Nunito', 'Trebuchet MS', sans-serif;

  --ds-ink: #4b1d66;
  --ds-ink-strong: #351142;
  --ds-soft: #80638b;
  --ds-soft-2: #a08ba5;
  --ds-pink: #f52d8d;
  --ds-pink-bright: #ff63aa;
  --ds-pink-deep: #c51b67;
  --ds-purple: #7b3bb2;
  --ds-purple-deep: #5d2788;
  --ds-lilac: #c48cf0;
  --ds-blue: #66bce5;
  --ds-mint: #8bd9bd;
  --ds-coral: #ff777c;
  --ds-peach: #ffc18d;
  --ds-gold: #f4bf53;
  --ds-cream: #fff8ef;
  --ds-cream-deep: #f9ecdf;
  --ds-card: #fffdfb;
  --ds-white: #ffffff;

  --ds-line: rgba(103, 51, 119, 0.14);
  --ds-line-strong: rgba(103, 51, 119, 0.25);
  --ds-success: #287560;
  --ds-success-soft: #e8f7f1;
  --ds-warning: #9a6a24;
  --ds-warning-soft: #fff3d8;
  --ds-danger: #b53b62;
  --ds-danger-soft: #fff0f4;
  --ds-info: #397ead;
  --ds-info-soft: #eaf6fc;

  --ds-radius-xs: 10px;
  --ds-radius-sm: 14px;
  --ds-radius-md: 18px;
  --ds-radius-lg: 24px;
  --ds-radius-xl: 30px;
  --ds-radius-pill: 999px;

  --ds-shadow-soft: 0 10px 28px rgba(75, 29, 102, 0.10);
  --ds-shadow-card: 0 20px 50px rgba(75, 29, 102, 0.14);
  --ds-shadow-float: 0 28px 70px rgba(75, 29, 102, 0.18);
  --ds-focus: 0 0 0 4px rgba(238, 82, 154, 0.16);
  --ds-action: linear-gradient(180deg, var(--ds-pink-bright), var(--ds-pink));
  --ds-action-shadow: 0 6px 0 var(--ds-pink-deep), 0 14px 28px rgba(232, 37, 128, 0.24);
  --ds-purple-action: linear-gradient(145deg, #9861ce, var(--ds-purple));
  --ds-magic-surface:
    radial-gradient(circle at 8% 4%, rgba(255, 190, 222, 0.56), transparent 28rem),
    radial-gradient(circle at 96% 20%, rgba(199, 164, 241, 0.34), transparent 31rem),
    radial-gradient(circle at 50% 110%, rgba(255, 213, 174, 0.40), transparent 34rem),
    var(--ds-cream);

  /* Alias usados por la landing y por las experiencias React existentes. */
  --pink: var(--ds-pink);
  --pink2: #e92479;
  --coral: var(--ds-coral);
  --peach: var(--ds-peach);
  --cream: var(--ds-cream);
  --lilac: var(--ds-lilac);
  --purple: var(--ds-purple);
  --ink: var(--ds-ink);
  --soft: var(--ds-soft);
  --white: var(--ds-white);
  --font-title: var(--ds-font-title);
  --font: var(--ds-font-body);
  --shadow: var(--ds-shadow-card);
}

::selection {
  background: rgba(245, 45, 141, 0.22);
  color: var(--ds-ink-strong);
}