/* LightCasino — design tokens, reset, base typography.
   Light UI: white background, blue/black accents, soft grey surfaces. */

:root {
  --c-bg: #FFFFFF;
  --c-surface: #F4F8FC;
  --c-border: #DCE5EE;
  --c-primary: #1677D2;
  --c-primary-dark: #095DAE;
  --c-accent-soft: #DCEEFF;
  --c-text: #151A21;
  --c-text-muted: #66778A;
  --c-positive: #27AE60;
  --c-warning: #F5A623;
  --c-danger: #D64550;

  --c-on-primary: #FFFFFF;

  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 18px;
  --radius-pill: 999px;

  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 24px;
  --gap-6: 32px;
  --gap-7: 48px;

  --shadow-flat: 0 1px 2px rgba(21, 26, 33, 0.05);
  --shadow-raised: 0 10px 28px rgba(21, 26, 33, 0.09);

  --ease: 0.18s ease;

  --gutter: 20px;
  --max-w: 1240px;

  --font-stack: "Inter", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-stack);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.lc-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.lc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-2);
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  border: none;
  font-weight: 700;
  font-size: 14px;
  transition: background var(--ease), transform var(--ease), box-shadow var(--ease);
}

.lc-btn-primary {
  background: var(--c-primary);
  color: var(--c-on-primary);
  box-shadow: var(--shadow-flat);
}

.lc-btn-primary:hover {
  background: var(--c-primary-dark);
  transform: translateY(-1px);
}

.lc-btn-ghost {
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-text);
}

.lc-btn-ghost:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.lc-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lc-tag-new { background: var(--c-positive); color: #fff; }
.lc-tag-hot { background: var(--c-danger); color: #fff; }
.lc-tag-promo { background: var(--c-warning); color: #151A21; }