/* Design tokens — Melbet Rewards Store prototype (shadcn-style, light) */

:root {
  /* palette (zinc) */
  --bg: #FFFFFF;
  --surface: #FAFAFA;
  --fg: #09090B;
  --muted: #71717A;
  --border: #E4E4E7;
  --accent: #18181B;          /* primary buttons, ink accents */
  --accent-fg: #FFFFFF;
  --destructive: #DC2626;
  --destructive-soft: #FEE2E2;
  --success: #16A34A;
  --success-soft: #DCFCE7;
  --warning-bg: #FEF9C3;
  --warning-fg: #854D0E;
  --page-frame: #F4F4F5;      /* ground around the 480px column on wide screens */

  /* radii */
  --r-control: 8px;
  --r-card: 12px;

  /* spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;

  /* layout */
  --page-max: 480px;
  --topbar-h: 56px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --shadow-card: 0 1px 2px rgba(9, 9, 11, .05);
  --shadow-overlay: 0 16px 48px rgba(9, 9, 11, .18);
}

/* base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--page-frame);
}
.page-col {
  max-width: var(--page-max);
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  position: relative;
}
@media (min-width: 512px) {
  .page-col { border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
}
main.page { flex: 1; padding: var(--s-5) var(--s-4) var(--s-6); }

/* type scale (kit) */
h1, h2, h3, p { margin: 0; }
.t-display { font-size: 28px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
h1, .t-h1 { font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
h2, .t-h2 { font-size: 20px; font-weight: 600; line-height: 1.35; }
h3, .t-h3 { font-size: 16px; font-weight: 600; line-height: 1.4; }
.t-body { font-size: 16px; font-weight: 400; }
.t-sm { font-size: 14px; font-weight: 400; }
.t-label { font-size: 14px; font-weight: 500; }
.t-caption { font-size: 12px; font-weight: 400; }
.t-price { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.t-muted { color: var(--muted); }

a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}