/**
 * SKSculpts Premium — Base / Global Styles
 * Resets, body, typography scale, container, utility primitives.
 * Depends on: tokens.css
 */

/* ============================================================
   GLOBAL RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;
}

/* ============================================================
   BODY
   ============================================================ */
body {
  background: var(--sk-bg);
  color: var(--sk-text);
  font-family: var(--sk-font-ui);
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.005em;
  overflow-x: hidden;
  transition: background 0.35s ease, color 0.35s ease;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .sk-home {
  background: linear-gradient(180deg, #0f171e 0%, #151d23 48%, #10171d 100%);
  color: var(--sk-text);
}

@media (max-width: 700px) {
  body { font-size: 14px; }
}

/* ============================================================
   TYPOGRAPHY — HEADINGS
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--sk-font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 0.98;
}

h3, h4, h5, h6 { letter-spacing: -0.012em; }

/* ============================================================
   BASE ELEMENTS
   ============================================================ */
img  { max-width: 100%; height: auto; }
a    { color: inherit; text-decoration: none; }
button, input { font: inherit; }

/* ============================================================
   CONTAINER
   ============================================================ */
.sk-container {
  width: min(calc(100% - clamp(32px, 6vw, 128px)), var(--sk-inner, 1500px));
  margin-inline: auto;
}

/* ============================================================
   SITE WRAPPER
   ============================================================ */
.site-main { width: 100%; max-width: none; margin: 0; }

/* ============================================================
   ACCESSIBILITY — reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}