/* ============================================================
   BOOKR — Global Styles
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap');
@import url('variables.css');

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--duration-fast); }
a:hover { color: var(--color-primary-dark); }
button, input, select, textarea { font-family: inherit; font-size: inherit; }

/* -----------------------------------------------
   Typography
----------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-dark);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); }
h2 { font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p { color: var(--color-text); }
small { font-size: var(--text-sm); color: var(--color-text-muted); }

.text-muted   { color: var(--color-text-muted); }
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-error   { color: var(--color-accent); }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.font-bold    { font-weight: var(--weight-bold); }
.font-semibold { font-weight: var(--weight-semibold); }

/* -----------------------------------------------
   Layout Utilities
----------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.container-sm { max-width: 680px; margin: 0 auto; padding: 0 var(--space-6); }
.container-md { max-width: 900px; margin: 0 auto; padding: 0 var(--space-6); }

.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-2  { gap: var(--space-2); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.flex-wrap   { flex-wrap: wrap; }
.flex-1      { flex: 1; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }

/* -----------------------------------------------
   Spacing Utilities
----------------------------------------------- */
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.p-4   { padding: var(--space-4); }
.p-6   { padding: var(--space-6); }
.p-8   { padding: var(--space-8); }

/* -----------------------------------------------
   Gradient Text
----------------------------------------------- */
.gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* -----------------------------------------------
   Section
----------------------------------------------- */
.section { padding: var(--space-20) 0; }
.section-sm { padding: var(--space-12) 0; }
.section-title { font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); margin-bottom: var(--space-4); }
.section-subtitle { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 560px; }

/* -----------------------------------------------
   Page Header
----------------------------------------------- */
.page-header {
  padding: var(--space-8) 0 var(--space-6);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-8);
}
.page-header h1 { font-size: var(--text-3xl); }
.page-header p  { color: var(--color-text-muted); margin-top: var(--space-2); }

/* -----------------------------------------------
   Scrollbar
----------------------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-light); }

/* -----------------------------------------------
   Selection
----------------------------------------------- */
::selection { background: rgba(var(--color-primary-rgb), 0.2); color: var(--color-dark); }

/* -----------------------------------------------
   Focus
----------------------------------------------- */
:focus-visible {
  outline: 3px solid rgba(var(--color-primary-rgb), 0.4);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* -----------------------------------------------
   Responsive
----------------------------------------------- */
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .container { padding: 0 var(--space-4); }
  .hide-mobile { display: none !important; }
}
@media (max-width: 480px) {
  .hide-xs { display: none !important; }
}