/* ============================================================
   SOMA & SHEN — Color & Type Foundations
   Women's health & traditional medicine.
   Rooted, warm, traditional. "Rooted like an old tree, but warm."
   ============================================================ */

/* ---- Webfonts ----------------------------------------------
   Headings : Cormorant Garamond (elegant, editorial serif)
   Body     : Mulish (clean, warm humanist sans)
   NOTE: loaded from Google Fonts CDN. No original brand font
   was provided — see README "Type" for the substitution note.
------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ===========================================================
     1. BRAND PALETTE  (the six core hues + their tints/shades)
     =========================================================== */
  --tan:        #C29575;  /* primary — warm clay / skin */
  --brown:      #3A2920;  /* deep bark — primary text */
  --mustard:    #A87A2C;  /* deep gold — labels, subtle accents */
  --coral:      #E69A8C;  /* soft coral — gentle highlight */
  --sage:       #A0AE8B;  /* sage green — calm, botanical */
  --cream:      #E8DDD0;  /* warm cream — base background */

  /* Tints & shades (derived in oklch to stay in-family) */
  --tan-700:    #9A7156;
  --tan-600:    #B0825F;
  --tan-500:    #C29575;
  --tan-300:    #D6B49C;
  --tan-100:    #ECDCCE;

  --brown-900:  #2A1D16;
  --brown-700:  #3A2920;
  --brown-500:  #5A4537;
  --brown-300:  #8A7565;

  --mustard-600: #8A6420;  /* deep gold — heading em accents (legible on cream) */
  --mustard-500: #C8973C;
  --mustard-300: #DCAB5E;  /* logo bright gold */

  --coral-600:  #D8826F;
  --coral-500:  #E69A8C;
  --coral-300:  #F0BFB5;

  --sage-600:   #859372;
  --sage-500:   #A0AE8B;
  --sage-300:   #C2CCB2;

  --cream-200:  #F3EBE0;
  --cream-100:  #F6F0E8;
  --cream-50:   #FBF7F1;

  /* ===========================================================
     2. SURFACES & INK  (semantic background / foreground)
     =========================================================== */
  --bg:         #FBF7F1;   /* page base — warmest cream */
  --bg-2:       #F3EBE0;   /* raised section / alt band */
  --bg-3:       #ECDCCE;   /* sunk panel / inset */
  --surface:    #FFFFFF;   /* cards on warm bg */
  --surface-warm:#FDF9F3;  /* cards that should feel paper */

  --ink-1:      #3A2920;   /* primary text — deep bark */
  --ink-2:      #5A4537;   /* secondary text */
  --ink-3:      #8A7565;   /* muted / captions */
  --ink-on-dark:#F4EBDF;   /* text on brown / tan blocks */
  --ink-on-dark-2:#D2BFA8; /* muted text on dark blocks */

  /* ===========================================================
     3. SEMANTIC ROLES
     =========================================================== */
  --primary:        #883E31;  /* rust — primary buttons/brand */
  --primary-ink:    #FBF7F1;  /* cream text on rust */
  --primary-hover:  #71332A;
  --primary-press:  #5E2A22;

  --accent:         #A87A2C;  /* deep gold — labels, links, emphasis */
  --accent-hover:   #8A6420;

  --rust:           #883E31;  /* brand rust (logo circle, footer, buttons) */
  --gold:           #DCAB5E;  /* brand bright gold (logo motif, on-rust accents) */

  --highlight:      #E69A8C;  /* coral — soft attention */
  --calm:           #A0AE8B;  /* sage — wellness / success-ish */

  --link:           #8A6420;  /* deep gold for contrast on cream */
  --link-hover:     #883E31;

  --border:         #E2D3C2;  /* hairline on cream */
  --border-strong:  #D2BFA8;
  --border-ink:     #3A2920;

  --focus-ring:     #A87A2C;

  /* ===========================================================
     4. TYPE FAMILIES
     =========================================================== */
  --font-display: 'Cormorant Garamond', 'Hoefler Text', Georgia, serif;
  --font-body:    'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ----- Type scale (fluid-ish, fixed for the system) ----- */
  --text-display:  4.5rem;   /* 72px hero */
  --text-h1:       3.25rem;  /* 52px */
  --text-h2:       2.375rem; /* 38px */
  --text-h3:       1.75rem;  /* 28px */
  --text-h4:       1.375rem; /* 22px */
  --text-lead:     1.3125rem;/* 21px intro paragraph */
  --text-body:     1.0625rem;/* 17px base */
  --text-small:    0.9375rem;/* 15px */
  --text-eyebrow:  0.8125rem;/* 13px label / overline */

  --leading-tight:  1.08;
  --leading-snug:   1.25;
  --leading-normal: 1.55;
  --leading-relaxed:1.7;

  --tracking-eyebrow: 0.18em;
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;

  /* ===========================================================
     5. RADII / SHADOW / SPACING
     =========================================================== */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  34px;
  --radius-pill:999px;

  /* Soft, warm, low-contrast shadows (brown-tinted, never grey) */
  --shadow-xs: 0 1px 2px rgba(58,41,32,0.06);
  --shadow-sm: 0 2px 8px rgba(58,41,32,0.07);
  --shadow-md: 0 8px 24px rgba(58,41,32,0.09);
  --shadow-lg: 0 18px 48px rgba(58,41,32,0.12);
  --shadow-inset: inset 0 1px 2px rgba(58,41,32,0.06);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10:128px;

  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
}

/* ============================================================
   6. BASE ELEMENT STYLES (semantic, opt-in via .ss-prose / root)
   ============================================================ */
.ss-root,
body.ss {
  background: var(--bg);
  color: var(--ink-1);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ss-display,
.ss-h1, .ss-h2, .ss-h3, .ss-h4 {
  font-family: var(--font-display);
  color: var(--ink-1);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

.ss-display { font-size: var(--text-display); font-weight: 500; }
.ss-h1 { font-size: var(--text-h1); }
.ss-h2 { font-size: var(--text-h2); line-height: var(--leading-snug); }
.ss-h3 { font-size: var(--text-h3); line-height: var(--leading-snug); }
.ss-h4 { font-family: var(--font-body); font-size: var(--text-h4); font-weight: 700; letter-spacing: 0; }

.ss-lead {
  font-size: var(--text-lead);
  line-height: var(--leading-relaxed);
  color: var(--ink-2);
  font-weight: 400;
}

.ss-p {
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--ink-2);
  max-width: 62ch;
  text-wrap: pretty;
}

.ss-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.ss-small { font-size: var(--text-small); color: var(--ink-3); }

a.ss-link {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--link) 35%, transparent);
  transition: color 0.2s var(--ease-soft), border-color 0.2s var(--ease-soft);
}
a.ss-link:hover { color: var(--link-hover); border-color: var(--link-hover); }

em, .ss-italic { font-style: italic; }