/* ============================================================
   SUKOON — Base: reset, canvas polarity, typography roles
   Source of truth: DESIGN-sentry.md
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

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

html, body { overflow-x: clip; } /* horizontal scroll must come from inner scroll containers only */

body {
  margin: 0;
  font-family: var(--sk-font-ui);
  font-size: var(--sk-body-size);
  font-weight: 500;
  line-height: 1.5;
  color: var(--sk-ink);
  background: var(--sk-surface-canvas-light);
}

img, svg, video { max-width: 100%; height: auto; }

/* ---- Canvas polarity: two complete worlds, never blended ---- */
.sk-canvas-light {
  background: var(--sk-surface-canvas-light);
  color: var(--sk-ink);
}
.sk-canvas-dark {
  background: var(--sk-surface-canvas-dark);
  color: var(--sk-on-primary);
}
.sk-canvas-night {
  background: var(--sk-surface-night);
  color: var(--sk-on-primary);
}

/* Starfield hero texture: faint white-on-violet pinpricks (background image) */
.sk-starfield {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='24' cy='60' r='1'/%3E%3Ccircle cx='120' cy='24' r='1.4'/%3E%3Ccircle cx='210' cy='90' r='0.9'/%3E%3Ccircle cx='330' cy='40' r='1.2'/%3E%3Ccircle cx='396' cy='150' r='1'/%3E%3Ccircle cx='60' cy='190' r='1.3'/%3E%3Ccircle cx='170' cy='230' r='0.8'/%3E%3Ccircle cx='290' cy='200' r='1.1'/%3E%3Ccircle cx='80' cy='320' r='1'/%3E%3Ccircle cx='240' cy='350' r='1.3'/%3E%3Ccircle cx='360' cy='300' r='0.9'/%3E%3Ccircle cx='40' cy='400' r='1.1'/%3E%3Ccircle cx='150' cy='140' r='0.7'/%3E%3Ccircle cx='310' cy='390' r='1'/%3E%3Ccircle cx='395' cy='240' r='0.8'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
}
.sk-starfield { position: relative; }

/* ---- Container & section rhythm ---- */
.sk-container {
  width: 100%;
  max-width: var(--sk-container-max);
  margin-inline: auto;
  padding-inline: var(--sk-space-xl);
}
.sk-section { padding-block: var(--sk-space-section); }
@media (max-width: 639px) {
  .sk-section { padding-block: var(--sk-space-section-mobile); }
}

/* ---- Typography roles ---- */
.sk-display-hero {
  font-family: var(--sk-font-display);
  font-size: var(--sk-display-hero-size);
  font-weight: 700;
  line-height: var(--sk-display-hero-lh);
  letter-spacing: 0;
  margin: 0;
}
.sk-display-large {
  font-family: var(--sk-font-display);
  font-size: var(--sk-display-large-size);
  font-weight: 500;
  line-height: var(--sk-display-large-lh);
  margin: 0;
}
.sk-heading-xl { font-family: var(--sk-font-ui); font-size: var(--sk-heading-xl-size); font-weight: 500; line-height: 1.2; margin: 0; }
.sk-heading-lg { font-family: var(--sk-font-ui); font-size: var(--sk-heading-lg-size); font-weight: 500; line-height: 1.25; margin: 0; }
.sk-heading-md { font-family: var(--sk-font-ui); font-size: var(--sk-heading-md-size); font-weight: 500; line-height: 1.25; margin: 0; }
.sk-heading-sm { font-family: var(--sk-font-ui); font-size: var(--sk-heading-sm-size); font-weight: 600; line-height: 1.25; margin: 0; }

/* Two leading worlds: marketing 2.0, functional 1.5 (load-bearing) */
.sk-body-lg     { font-size: 16px; font-weight: 400; line-height: 2.0; }
.sk-body-strong { font-size: 16px; font-weight: 600; line-height: 1.5; }
.sk-body-md     { font-size: 16px; font-weight: 500; line-height: 1.5; }
.sk-caption     { font-size: 14px; font-weight: 400; line-height: 1.43; }
.sk-micro-cap   { font-size: 10px; font-weight: 600; line-height: 1.8; letter-spacing: 0.25px; text-transform: uppercase; }

.sk-eyebrow {
  font-size: var(--sk-eyebrow-size);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  margin: 0;
}
.sk-canvas-dark .sk-eyebrow, .sk-canvas-night .sk-eyebrow { color: var(--sk-on-dark-muted); }

.sk-code {
  font-family: var(--sk-font-code);
  font-size: var(--sk-code-size);
  font-weight: 400;
  line-height: 1.5;
}
.sk-code-strong { font-weight: 700; }

.sk-text-muted-dark { color: var(--sk-on-dark-muted); }

/* Responsive display stair: 88 -> 60 -> 48 */
@media (max-width: 767px) { .sk-display-hero { font-size: 56px; } .sk-display-large { font-size: 48px; } }
@media (max-width: 575px) { .sk-display-hero { font-size: 48px; } .sk-display-large { font-size: 40px; } }

/* ---- Lime keyword chip: glyph-level decoration inside display headlines ---- */
.sk-chip-lime {
  display: inline-block;
  background: var(--sk-accent-lime);
  color: var(--sk-ink-deep);
  border-radius: var(--sk-rounded-xs);
  padding: 0 var(--sk-space-md);
}

/* ---- Links: persistent underline is the entire affordance ---- */
.sk-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: var(--sk-rounded-xs);
  transition: text-decoration-thickness var(--sk-motion-micro);
}
.sk-link:hover { text-decoration-thickness: 2px; }
.sk-link-violet { color: var(--sk-accent-violet); }

/* ---- Focus: the only blue in the system ---- */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sk-ring-focus);
  border-radius: var(--sk-rounded-xs);
}

/* ---- Screen-reader only ---- */
.sk-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}

/* ---- Skip link ---- */
.sk-skip-link {
  position: absolute;
  left: var(--sk-space-lg);
  top: -48px;
  z-index: 1100;
  background: var(--sk-primary);
  color: var(--sk-on-primary);
  padding: var(--sk-space-md) var(--sk-space-lg);
  border-radius: var(--sk-rounded-md);
  transition: top var(--sk-motion-micro);
}
.sk-skip-link:focus { top: var(--sk-space-lg); }

/* ---- Lime squiggle divider (above footer, ~3px stroke) ---- */
.sk-squiggle {
  display: block;
  width: 100%;
  height: 14px;
  color: var(--sk-accent-lime);
}