/* =========================================================
   Yoube — Design System Tokens
   Modern confident SaaS · Femininity · Simplicity
   ========================================================= */

:root {
  /* ---- Brand purple scale ---- */
  --y-purple-50:  #F4F1FF;
  --y-purple-100: #EBE6FF;
  --y-purple-200: #D7CEFF;
  --y-purple-300: #B8A7FF;
  --y-purple-400: #9C85FF;
  --y-purple-500: #7F6CFF; /* PRIMARY — brand */
  --y-purple-600: #6952E8;
  --y-purple-700: #553EC4;
  --y-purple-800: #422F9A;
  --y-purple-900: #2A1F6E;

  /* ---- Secondary (softer lilac from manual) ---- */
  --y-lilac-300: #B5ADFF;
  --y-lilac-400: #A097FF;
  --y-lilac-500: #8C83FF; /* secondary */
  --y-lilac-600: #7269F0;

  /* ---- Neutrals (cool, paired with purple) ---- */
  --y-neutral-0:   #FFFFFF;
  --y-neutral-50:  #FAFAFC;
  --y-neutral-100: #F4F4F8;
  --y-neutral-150: #ECECF2;
  --y-neutral-200: #E2E2EC;
  --y-neutral-300: #CACAD8;
  --y-neutral-400: #9D9DB1;
  --y-neutral-500: #6D6D82;
  --y-neutral-600: #4F4F62;
  --y-neutral-700: #393948;
  --y-neutral-800: #22222C;
  --y-neutral-900: #131319;

  /* ---- Semantic ---- */
  --y-success:      #00D670;
  --y-success-50:   #E5FBF0;
  --y-success-700:  #00945A;
  --y-warning:      #FFDA00;
  --y-warning-50:   #FFF8D6;
  --y-warning-700:  #8A7400;
  --y-danger:       #FF3A3A; /* softened from #ff0000 for UI */
  --y-danger-pure:  #FF0000;
  --y-danger-50:    #FFE9E9;
  --y-danger-700:   #C41F1F;
  --y-info:         #2D8CFF;
  --y-info-50:      #E5F0FF;

  /* ---- Type ---- */
  --y-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --y-font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Type scale */
  --y-text-xs:   12px;
  --y-text-sm:   14px;
  --y-text-base: 16px;
  --y-text-md:   18px;
  --y-text-lg:   20px;
  --y-text-xl:   24px;
  --y-text-2xl:  32px;
  --y-text-3xl:  40px;
  --y-text-4xl:  56px;
  --y-text-5xl:  72px;
  --y-text-6xl:  96px;

  /* Spacing (4-base) */
  --y-space-1: 4px;
  --y-space-2: 8px;
  --y-space-3: 12px;
  --y-space-4: 16px;
  --y-space-5: 20px;
  --y-space-6: 24px;
  --y-space-7: 32px;
  --y-space-8: 40px;
  --y-space-9: 48px;
  --y-space-10: 64px;
  --y-space-11: 80px;
  --y-space-12: 120px;

  /* Radius */
  --y-radius-xs:   4px;
  --y-radius-sm:   8px;
  --y-radius-md:   12px;
  --y-radius-lg:   16px;
  --y-radius-xl:   24px;
  --y-radius-2xl:  32px;
  --y-radius-pill: 999px;

  /* Shadows */
  --y-shadow-xs:    0 1px 2px rgba(20, 18, 50, 0.05);
  --y-shadow-sm:    0 2px 6px rgba(20, 18, 50, 0.06);
  --y-shadow-md:    0 8px 24px rgba(20, 18, 50, 0.08);
  --y-shadow-lg:    0 20px 48px rgba(20, 18, 50, 0.12);
  --y-shadow-xl:    0 32px 72px rgba(20, 18, 50, 0.16);
  --y-shadow-purple: 0 16px 40px rgba(127, 108, 255, 0.32);
  --y-shadow-focus: 0 0 0 4px rgba(127, 108, 255, 0.25);

  /* Motion */
  --y-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --y-dur-fast: 150ms;
  --y-dur:      220ms;
  --y-dur-slow: 380ms;
}

/* =========================================================
   Reset / base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--y-font);
  font-size: var(--y-text-base);
  line-height: 1.55;
  color: var(--y-neutral-800);
  background: var(--y-neutral-50);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
a { color: var(--y-purple-600); text-decoration: none; }
a:hover { color: var(--y-purple-700); }

/* =========================================================
   Type ramp
   ========================================================= */
.y-display {
  font-size: clamp(56px, 7vw, var(--y-text-6xl));
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--y-neutral-900);
}
.y-h1 { font-size: var(--y-text-4xl); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; color: var(--y-neutral-900); }
.y-h2 { font-size: var(--y-text-3xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; color: var(--y-neutral-900); }
.y-h3 { font-size: var(--y-text-2xl); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; color: var(--y-neutral-900); }
.y-h4 { font-size: var(--y-text-xl); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--y-neutral-900); }
.y-h5 { font-size: var(--y-text-lg); font-weight: 600; line-height: 1.35; color: var(--y-neutral-900); }
.y-body { font-size: var(--y-text-base); line-height: 1.6; color: var(--y-neutral-700); }
.y-body-lg { font-size: var(--y-text-md); line-height: 1.65; color: var(--y-neutral-700); }
.y-small { font-size: var(--y-text-sm); line-height: 1.5; color: var(--y-neutral-500); }
.y-caps  { font-size: var(--y-text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--y-purple-600); }

/* =========================================================
   Components — Buttons
   ========================================================= */
.y-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--y-font);
  font-weight: 600;
  font-size: var(--y-text-sm);
  line-height: 1;
  padding: 12px 20px;
  border-radius: var(--y-radius-pill);
  transition: transform var(--y-dur-fast) var(--y-ease),
              background var(--y-dur) var(--y-ease),
              box-shadow var(--y-dur) var(--y-ease),
              color var(--y-dur) var(--y-ease);
  user-select: none;
  white-space: nowrap;
}
.y-btn:active { transform: translateY(1px); }
.y-btn:focus-visible { outline: none; box-shadow: var(--y-shadow-focus); }

.y-btn--primary {
  background: var(--y-purple-500);
  color: #fff;
}
.y-btn--primary:hover { background: var(--y-purple-600); box-shadow: var(--y-shadow-purple); }

.y-btn--secondary {
  background: var(--y-purple-50);
  color: var(--y-purple-700);
}
.y-btn--secondary:hover { background: var(--y-purple-100); }

.y-btn--ghost {
  background: transparent;
  color: var(--y-neutral-700);
}
.y-btn--ghost:hover { background: var(--y-neutral-100); color: var(--y-neutral-900); }

.y-btn--outline {
  background: #fff;
  color: var(--y-neutral-800);
  box-shadow: inset 0 0 0 1.5px var(--y-neutral-200);
}
.y-btn--outline:hover { box-shadow: inset 0 0 0 1.5px var(--y-purple-400); color: var(--y-purple-700); }

.y-btn--danger { background: var(--y-danger); color: #fff; }
.y-btn--danger:hover { background: var(--y-danger-700); }

.y-btn--lg  { padding: 16px 28px; font-size: var(--y-text-base); }
.y-btn--sm  { padding: 8px 14px;  font-size: 13px; }
.y-btn--icon { padding: 10px; width: 40px; height: 40px; border-radius: var(--y-radius-md); }
.y-btn--disabled, .y-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ========= Inputs ========= */
.y-input {
  appearance: none;
  width: 100%;
  font-family: var(--y-font);
  font-size: var(--y-text-base);
  padding: 14px 16px;
  border-radius: var(--y-radius-md);
  background: #fff;
  border: 1.5px solid var(--y-neutral-200);
  color: var(--y-neutral-900);
  transition: border var(--y-dur) var(--y-ease), box-shadow var(--y-dur) var(--y-ease);
}
.y-input::placeholder { color: var(--y-neutral-400); }
.y-input:hover { border-color: var(--y-neutral-300); }
.y-input:focus {
  outline: none;
  border-color: var(--y-purple-500);
  box-shadow: var(--y-shadow-focus);
}
.y-input--error { border-color: var(--y-danger); }
.y-input--error:focus { box-shadow: 0 0 0 4px rgba(255, 58, 58, 0.18); }

.y-label {
  display: block;
  font-size: var(--y-text-sm);
  font-weight: 600;
  color: var(--y-neutral-700);
  margin-bottom: 6px;
}
.y-help { font-size: var(--y-text-xs); color: var(--y-neutral-500); margin-top: 6px; }
.y-help--error { color: var(--y-danger-700); }

/* ========= Card ========= */
.y-card {
  background: #fff;
  border-radius: var(--y-radius-lg);
  border: 1px solid var(--y-neutral-150);
  box-shadow: var(--y-shadow-sm);
}

/* ========= Badge ========= */
.y-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--y-text-xs);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--y-radius-pill);
  letter-spacing: 0.01em;
}
.y-badge--purple  { background: var(--y-purple-100);  color: var(--y-purple-700); }
.y-badge--success { background: var(--y-success-50);  color: var(--y-success-700); }
.y-badge--warning { background: var(--y-warning-50);  color: var(--y-warning-700); }
.y-badge--danger  { background: var(--y-danger-50);   color: var(--y-danger-700); }
.y-badge--info    { background: var(--y-info-50);     color: var(--y-info); }
.y-badge--neutral { background: var(--y-neutral-150); color: var(--y-neutral-700); }
.y-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ========= Tag ========= */
.y-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--y-text-xs);
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--y-radius-sm);
  background: #fff;
  border: 1px solid var(--y-neutral-200);
  color: var(--y-neutral-700);
}

/* ========= Avatar ========= */
.y-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--y-purple-100);
  color: var(--y-purple-700);
  font-weight: 700;
  font-size: var(--y-text-sm);
  overflow: hidden;
}

/* ========= Switch ========= */
.y-switch {
  position: relative;
  width: 44px; height: 26px;
  background: var(--y-neutral-200);
  border-radius: var(--y-radius-pill);
  transition: background var(--y-dur) var(--y-ease);
  cursor: pointer;
  display: inline-block;
}
.y-switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--y-shadow-sm);
  transition: transform var(--y-dur) var(--y-ease);
}
.y-switch[data-on="true"] { background: var(--y-purple-500); }
.y-switch[data-on="true"]::after { transform: translateX(18px); }

/* ========= Checkbox / Radio (visual only) ========= */
.y-check, .y-radio {
  width: 20px; height: 20px;
  border: 1.5px solid var(--y-neutral-300);
  border-radius: var(--y-radius-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.y-radio { border-radius: 50%; }
.y-check[data-on="true"], .y-radio[data-on="true"] {
  background: var(--y-purple-500);
  border-color: var(--y-purple-500);
}
.y-check[data-on="true"]::after {
  content: "";
  width: 10px; height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.y-radio[data-on="true"]::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
}