/*
 * Modern Yogi — Design System
 * CSS custom properties, typography, base resets
 * Source of truth for all brand tokens
 */

/* ─────────────────────────────────────────────
   DESIGN TOKENS
───────────────────────────────────────────── */
:root {
  /* Brand colours */
  --my-teal:       #2A7A8C;
  --my-teal-deep:  #1A5F6E;
  --my-teal-wash:  #EBF5F7;
  --my-lime:       #6B9A2E;
  --my-black:      #0d0d0d;
  --my-white:      #ffffff;

  /* Greyscale */
  --my-g100: #f5f5f5;
  --my-g150: #eeeeee;
  --my-g200: #e0e0e0;
  --my-g400: #999999;
  --my-g600: #555555;
  --my-g800: #222222;

  /* Typography */
  --my-font:       'Noto Sans', sans-serif;
  --my-base-size:  13px;
  --my-base-weight: 400;
  --my-base-lh:    1.7;

  /* Layout */
  --my-nav-h:      52px;
  --my-snav-h:     40px;
  --my-max-w:      1400px;

  /* Spacing */
  --my-gutter:     28px;
  --my-section-v:  80px;

  /* Borders */
  --my-border:     1px solid var(--my-g200);
  --my-border-dark: 1px solid var(--my-black);

  /* Transitions */
  --my-t-fast:  0.12s ease;
  --my-t-med:   0.2s ease;
  --my-t-slow:  0.4s ease;
}

/* ─────────────────────────────────────────────
   RESETS & BASE
───────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--my-font);
  font-size: var(--my-base-size);
  font-weight: var(--my-base-weight);
  line-height: var(--my-base-lh);
  color: var(--my-black);
  background: var(--my-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Override WoodMart body font */
body,
body .woodmart-theme,
body .site {
  font-family: var(--my-font) !important;
}

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

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--my-t-fast);
}

/* ─────────────────────────────────────────────
   TYPOGRAPHY SCALE
───────────────────────────────────────────── */

/* Eyebrow / label */
.my-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--my-g400);
}

.my-eyebrow--teal {
  color: var(--my-teal);
}

/* Display headings */
.my-h1 {
  font-size: clamp(40px, 8vw, 96px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.03em;
}

.my-h2 {
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
}

.my-h3 {
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
}

/* Body text variants */
.my-body-lg {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.95;
  color: var(--my-g600);
}

.my-body {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--my-g600);
}

.my-body-sm {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--my-g600);
}

/* Pull quote */
.my-pull {
  font-size: clamp(20px, 2.8vw, 32px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: var(--my-black);
  border-left: 3px solid var(--my-teal);
  padding-left: 32px;
  margin: 48px 0;
}

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

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

.my-teal-text  { color: var(--my-teal); }
.my-lime-text  { color: var(--my-lime); }
.my-muted-text { color: var(--my-g400); }

/* ─────────────────────────────────────────────
   SUPPRESS WOODMART ELEMENTS WE REPLACE
───────────────────────────────────────────── */

/* WoodMart top bar / header */
.woodmart-top-bar-wrapper,
.woodmart-header-clone,
#site-header.woodmart-header {
  display: none !important;
}

/* WoodMart footer */
.woodmart-footer-container,
#site-footer.woodmart-footer {
  display: none !important;
}