/* Dipster brand tokens */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap");

:root {
  /* Color */
  --dip-iris: #5B3FE0;
  --dip-iris-hover: #4630B8;
  --dip-iris-tint: #EEEAFD;
  --dip-ink: #0E1B2C;
  --dip-graphite: #33445A;
  --dip-slate: #5B6B80;
  --dip-mist: #E3EAF3;
  --dip-cloud: #F5F8FC;
  --dip-white: #FFFFFF;
  --dip-mint: #12B886;
  --dip-mint-text: #0B7A5A;
  --dip-mint-tint: #DDF6EE;
  --dip-zest: #FFC83D;
  --dip-zest-text: #8A5A00;
  --dip-zest-tint: #FFF4D6;
  --dip-coral: #FF6B57;
  --dip-coral-text: #C2321F;
  --dip-coral-tint: #FFE7E3;

  /* Type */
  --dip-font-heading: "Outfit", system-ui, sans-serif;
  --dip-font-body: "DM Sans", system-ui, sans-serif;

  /* Radius */
  --dip-radius-chip: 999px;
  --dip-radius-control: 14px;
  --dip-radius-tile: 16px;
  --dip-radius-card: 20px;
  --dip-radius-panel: 24px;

  /* Misc */
  --dip-shadow: 0 1px 2px rgb(14 27 44 / 0.06);
  --dip-icon-stroke: 2px;
  --dip-tap: 44px;
}

body {
  margin: 0;
  background: var(--dip-cloud);
  color: var(--dip-ink);
  font: 400 16px/24px var(--dip-font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .dip-display, .dip-price {
  font-family: var(--dip-font-heading);
  color: var(--dip-ink);
  margin: 0;
}
.dip-display { font-size: 64px; line-height: 68px; font-weight: 800; letter-spacing: -0.04em; }
h1 { font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.02em; }
h3 { font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; }
@media (max-width: 640px) {
  .dip-display { font-size: 40px; line-height: 44px; }
  h1 { font-size: 32px; line-height: 36px; }
}
.dip-body-l { font-size: 18px; line-height: 28px; color: var(--dip-graphite); }
.dip-label { font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dip-slate); }
.dip-price { font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dip-price-old { color: var(--dip-slate); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.dip-saving { color: var(--dip-mint-text); font-weight: 700; }

a { color: var(--dip-iris); }
a:hover { color: var(--dip-iris-hover); }

.dip-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: var(--dip-radius-control);
  font: 600 16px/1 var(--dip-font-body); cursor: pointer; border: 1px solid transparent;
  background: var(--dip-iris); color: var(--dip-white);
}
.dip-btn:hover { background: var(--dip-iris-hover); }
.dip-btn:focus-visible, .dip-input:focus-visible { outline: 2px solid var(--dip-iris); outline-offset: 2px; }
.dip-btn--secondary { background: var(--dip-white); color: var(--dip-ink); border-color: var(--dip-mist); }
.dip-btn--secondary:hover { background: var(--dip-cloud); }

.dip-input {
  height: 48px; padding: 0 16px; border-radius: var(--dip-radius-control);
  border: 1px solid var(--dip-mist); background: var(--dip-white);
  font: 400 16px var(--dip-font-body); color: var(--dip-ink);
}

.dip-card { background: var(--dip-white); border: 1px solid var(--dip-mist); border-radius: var(--dip-radius-card); }

.dip-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--dip-radius-chip); font-size: 13px; font-weight: 700; }
.dip-badge--drop { background: var(--dip-mint-tint); color: var(--dip-mint-text); }
.dip-badge--deal { background: var(--dip-zest-tint); color: var(--dip-zest-text); }
.dip-badge--up { background: var(--dip-coral-tint); color: var(--dip-coral-text); }

.dip-icon { width: 24px; height: 24px; flex-shrink: 0; }