/* =====================================================================
   MISTCULTURE DESIGN SYSTEM — Design Tokens
   Location: assets/css/components/01-tokens.css
   ===================================================================== */

:root {
  /* Colors */
  --mc-ink: #064E3B;
  --mc-mist: #F9FAFB;
  --mc-paper: #FFFFFF;
  --mc-leaf: #16A34A;
  --mc-line: #E5E7EB;
  --mc-text: #374151;
  --mc-text-soft: #6B7280;
  --mc-soil: #9CA3AF;
  --mc-blue: #15803D;
  --mc-hero-bg: url('https://mistculture.com/wp-content/uploads/2026/08/Mistculture-Internal-page-Hero-Background-scaled.webp');

  /* Typography */
  --mc-font-heading: "Space Grotesk", -apple-system, sans-serif;
  --mc-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mc-font-size-base: 16px;
  --mc-heading-scale: 100%;

  /* Layout */
  --mc-container-width: 1200px;
  --mc-radius: 18px;
  --mc-section-gap: 48px;
  --mc-pad-top: 40px;
  --mc-pad-x: 32px;
  --mc-header-height: 68px;
}

/* Root container */
.th-root,
.mc-root {
  font-family: var(--mc-font-body);
  color: var(--mc-text);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--mc-mist) 320px);
  border: 1px solid var(--mc-line);
  border-radius: 20px;
  max-width: var(--mc-container-width);
  margin: 10px auto;
  overflow: clip;
  position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 24px 56px -28px rgba(6,78,59,.22);
}

/* Skip link */
.mc-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  background: #064E3B;
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 0 0 8px 0;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(6, 78, 59, 0.3);
}
.mc-skip-link:focus,
.mc-skip-link:focus-visible {
  left: 0;
  color: #ffffff;
}

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

/* SVG constraints */
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Image base */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* Focus visible for accessibility */
:focus-visible {
  outline: 2px solid var(--mc-leaf);
  outline-offset: 2px;
}

/* Selection */
::selection {
  background: var(--mc-leaf);
  color: #fff;
}