/*
 * ModuraSpace Content Design System v1.0
 * Reusable article/content styles for light + dark mode.
 * Prefix: ms-
 * Works with CSS variables --bg/--surface etc. from the site when available.
 */

:root {
  --ms-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ms-font-serif: Georgia, "Times New Roman", serif;
  --ms-content-max: 780px;

  --ms-bg: #ffffff;
  --ms-surface: #f7f8f6;
  --ms-surface-2: #f0f2ee;
  --ms-text: #202421;
  --ms-text-soft: #59615b;
  --ms-text-muted: #7a827c;
  --ms-heading: #161a17;
  --ms-border: #e3e7e2;
  --ms-border-strong: #cfd6cf;

  --ms-primary: #55745d;
  --ms-primary-strong: #3f5e47;
  --ms-primary-soft: #e9f0ea;
  --ms-accent: #b86b4c;
  --ms-accent-soft: #f8ece7;
  --ms-warm: #b58a55;
  --ms-warm-soft: #f7f0e4;
  --ms-success: #4f7b59;
  --ms-success-soft: #eaf3eb;
  --ms-info: #4f7188;
  --ms-info-soft: #eaf1f5;
  --ms-warning: #a16c2c;
  --ms-warning-soft: #fbf2e3;
  --ms-danger: #a34f4f;
  --ms-danger-soft: #f8eaea;

  --ms-radius-sm: 8px;
  --ms-radius-md: 14px;
  --ms-radius-lg: 20px;
  --ms-radius-xl: 28px;
  --ms-shadow-sm: 0 2px 10px rgba(24, 32, 26, .06);
  --ms-shadow-md: 0 10px 30px rgba(24, 32, 26, .09);
  --ms-shadow-lg: 0 18px 50px rgba(24, 32, 26, .13);

  --ms-space-1: .25rem;
  --ms-space-2: .5rem;
  --ms-space-3: .75rem;
  --ms-space-4: 1rem;
  --ms-space-5: 1.25rem;
  --ms-space-6: 1.5rem;
  --ms-space-8: 2rem;
  --ms-space-10: 2.5rem;
  --ms-space-12: 3rem;
  --ms-space-16: 4rem;
  --ms-space-20: 5rem;

  --ms-ease: cubic-bezier(.22, .61, .36, 1);
  --ms-fast: 160ms;
  --ms-normal: 280ms;
  --ms-slow: 520ms;
}

/* Automatically follows a site's dark-mode attribute or class. */
html.dark,
body.dark,
[data-theme="dark"],
.dark-mode {
  --ms-bg: #111512;
  --ms-surface: #191e1a;
  --ms-surface-2: #222822;
  --ms-text: #e8ece8;
  --ms-text-soft: #b8c0b9;
  --ms-text-muted: #8f9890;
  --ms-heading: #f4f6f4;
  --ms-border: #303831;
  --ms-border-strong: #465147;

  --ms-primary: #91b49a;
  --ms-primary-strong: #b2d0b9;
  --ms-primary-soft: #1f2d22;
  --ms-accent: #dc9678;
  --ms-accent-soft: #34241f;
  --ms-warm: #d2ab76;
  --ms-warm-soft: #30291e;
  --ms-success: #8dbb95;
  --ms-success-soft: #203025;
  --ms-info: #91b4c9;
  --ms-info-soft: #202d34;
  --ms-warning: #d6aa6a;
  --ms-warning-soft: #33291c;
  --ms-danger: #d98d8d;
  --ms-danger-soft: #342122;

  --ms-shadow-sm: 0 2px 12px rgba(0,0,0,.20);
  --ms-shadow-md: 0 12px 32px rgba(0,0,0,.28);
  --ms-shadow-lg: 0 22px 55px rgba(0,0,0,.36);
}

/* Optional compatibility with common site theme attributes. */
html[data-theme="dark"],
body[data-theme="dark"] { color-scheme: dark; }
html:not(.dark):not([data-theme="dark"]) { color-scheme: light; }

.ms-content {
  width: min(100%, var(--ms-content-max));
  margin-inline: auto;
  color: var(--ms-text);
  font-family: var(--ms-font-sans);
  font-size: 1rem;
  line-height: 1.78;
  text-wrap: pretty;
}

.ms-content *, .ms-content *::before, .ms-content *::after { box-sizing: border-box; }
.ms-content :where(h1,h2,h3,h4,h5,h6,p,ul,ol,blockquote,figure,table,details,pre) { margin-top: 0; }

/* Typography */
.ms-title { color: var(--ms-heading); font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 800; margin-bottom: var(--ms-space-5); }
.ms-lead { color: var(--ms-text-soft); font-size: clamp(1.05rem, 2vw, 1.2rem); line-height: 1.75; margin-bottom: var(--ms-space-8); }
.ms-h1 { color: var(--ms-heading); font-size: clamp(1.8rem, 4vw, 2.5rem); line-height: 1.15; letter-spacing: -.025em; font-weight: 800; margin: var(--ms-space-12) 0 var(--ms-space-5); }
.ms-h2 { color: var(--ms-heading); font-size: clamp(1.45rem, 3vw, 1.9rem); line-height: 1.25; letter-spacing: -.02em; font-weight: 750; margin: var(--ms-space-10) 0 var(--ms-space-4); }
.ms-h3 { color: var(--ms-heading); font-size: 1.25rem; line-height: 1.35; font-weight: 700; margin: var(--ms-space-8) 0 var(--ms-space-3); }
.ms-h4 { color: var(--ms-heading); font-size: 1.05rem; line-height: 1.4; font-weight: 700; margin: var(--ms-space-6) 0 var(--ms-space-2); }
.ms-eyebrow { display: inline-flex; align-items: center; gap: .45rem; color: var(--ms-primary); font-size: .75rem; line-height: 1; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--ms-space-3); }
.ms-eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 99px; background: currentColor; }
.ms-caption { color: var(--ms-text-muted); font-size: .86rem; line-height: 1.55; }
.ms-small { font-size: .9rem; }
.ms-large { font-size: 1.12rem; }
.ms-serif { font-family: var(--ms-font-serif); }
.ms-center { text-align: center; }
.ms-muted { color: var(--ms-text-muted) !important; }
.ms-soft { color: var(--ms-text-soft) !important; }
.ms-strong { color: var(--ms-heading) !important; font-weight: 750; }
.ms-accent { color: var(--ms-accent) !important; }
.ms-primary { color: var(--ms-primary) !important; }

/* Emphasis */
.ms-highlight { padding: .08em .35em; border-radius: .35em; color: var(--ms-heading); background: var(--ms-warm-soft); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ms-highlight-green { padding: .08em .35em; border-radius: .35em; background: var(--ms-primary-soft); color: var(--ms-primary-strong); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ms-underlined { text-decoration: underline; text-decoration-color: var(--ms-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ms-dropcap::first-letter { float: left; margin: .06em .12em 0 0; color: var(--ms-primary); font-size: 3.6em; line-height: .78; font-weight: 800; }

/* Links */
.ms-content a:not(.ms-btn) { color: var(--ms-primary); font-weight: 650; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--ms-fast) var(--ms-ease), opacity var(--ms-fast) var(--ms-ease); }
.ms-content a:not(.ms-btn):hover { color: var(--ms-primary-strong); }

/* Paragraph rhythm */
.ms-content p { margin-bottom: var(--ms-space-5); }
.ms-content p:last-child { margin-bottom: 0; }
.ms-prose > * + * { margin-top: var(--ms-space-5); }
.ms-prose > :is(h1,h2,h3,h4) + * { margin-top: 0; }

/* Cards */
.ms-card { padding: var(--ms-space-6); background: var(--ms-surface); border: 1px solid var(--ms-border); border-radius: var(--ms-radius-lg); box-shadow: var(--ms-shadow-sm); transition: transform var(--ms-normal) var(--ms-ease), box-shadow var(--ms-normal) var(--ms-ease), border-color var(--ms-normal) var(--ms-ease); }
.ms-card:hover { transform: translateY(-3px); box-shadow: var(--ms-shadow-md); border-color: var(--ms-border-strong); }
.ms-card-flat { box-shadow: none; }
.ms-card-bordered { background: transparent; box-shadow: none; }
.ms-card-soft { background: var(--ms-primary-soft); border-color: transparent; }
.ms-card-warm { background: var(--ms-warm-soft); border-color: transparent; }
.ms-card-accent { background: var(--ms-accent-soft); border-color: transparent; }
.ms-card-dark { background: #1b211c; color: #eef2ee; border-color: transparent; }
.ms-card-title { color: var(--ms-heading); font-size: 1.08rem; font-weight: 750; margin-bottom: var(--ms-space-2); }
.ms-card-text { color: var(--ms-text-soft); font-size: .95rem; }

/* Feature grid */
.ms-grid { display: grid; gap: var(--ms-space-5); }
.ms-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.ms-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.ms-grid-auto { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Callouts */
.ms-callout { position: relative; margin: var(--ms-space-8) 0; padding: var(--ms-space-6) var(--ms-space-6) var(--ms-space-6) calc(var(--ms-space-6) + 4px); border: 1px solid var(--ms-border); border-radius: var(--ms-radius-md); background: var(--ms-surface); overflow: hidden; }
.ms-callout::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--ms-primary); }
.ms-callout-title { display: flex; align-items: center; gap: .55rem; color: var(--ms-heading); font-weight: 800; margin-bottom: var(--ms-space-2); }
.ms-callout-info { background: var(--ms-info-soft); border-color: transparent; }
.ms-callout-info::before { background: var(--ms-info); }
.ms-callout-success { background: var(--ms-success-soft); border-color: transparent; }
.ms-callout-success::before { background: var(--ms-success); }
.ms-callout-warning { background: var(--ms-warning-soft); border-color: transparent; }
.ms-callout-warning::before { background: var(--ms-warning); }
.ms-callout-danger { background: var(--ms-danger-soft); border-color: transparent; }
.ms-callout-danger::before { background: var(--ms-danger); }
.ms-callout-tip { background: var(--ms-primary-soft); border-color: transparent; }
.ms-callout-tip::before { background: var(--ms-primary); }

/* Quote styles */
.ms-quote { margin: var(--ms-space-8) 0; padding: var(--ms-space-6) var(--ms-space-8); border-left: 4px solid var(--ms-primary); background: var(--ms-surface); border-radius: 0 var(--ms-radius-md) var(--ms-radius-md) 0; color: var(--ms-heading); font-family: var(--ms-font-serif); font-size: 1.18rem; line-height: 1.65; }
.ms-quote-clean { border: 0; background: transparent; padding-inline: var(--ms-space-5); }
.ms-quote-author { display: block; margin-top: var(--ms-space-3); color: var(--ms-text-muted); font-family: var(--ms-font-sans); font-size: .8rem; font-weight: 700; }

/* Dividers */
.ms-divider { height: 1px; margin: var(--ms-space-10) 0; background: var(--ms-border); border: 0; }
.ms-divider-soft { background: linear-gradient(90deg, transparent, var(--ms-border), transparent); }
.ms-divider-accent { height: 2px; width: 70px; margin: var(--ms-space-6) 0; background: var(--ms-primary); border: 0; border-radius: 99px; }
.ms-divider-center { margin-inline: auto; }

/* Lists */
.ms-list, .ms-checklist, .ms-numbered { padding-left: 1.35rem; margin: var(--ms-space-5) 0; }
.ms-list li, .ms-checklist li, .ms-numbered li { margin: .6rem 0; padding-left: .25rem; }
.ms-list li::marker { color: var(--ms-primary); }
.ms-numbered { counter-reset: ms-list; list-style: none; padding-left: 0; }
.ms-numbered li { counter-increment: ms-list; position: relative; padding-left: 2.25rem; }
.ms-numbered li::before { content: counter(ms-list); position: absolute; left: 0; top: .1rem; display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: 50%; background: var(--ms-primary-soft); color: var(--ms-primary-strong); font-size: .78rem; font-weight: 800; }
.ms-checklist { list-style: none; padding-left: 0; }
.ms-checklist li { position: relative; padding-left: 2rem; }
.ms-checklist li::before { content: "✓"; position: absolute; left: 0; top: .05rem; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--ms-primary-soft); color: var(--ms-primary-strong); font-size: .75rem; font-weight: 900; }

/* Tags / badges */
.ms-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .7rem; border-radius: 999px; background: var(--ms-surface-2); color: var(--ms-text-soft); border: 1px solid var(--ms-border); font-size: .75rem; font-weight: 750; line-height: 1; }
.ms-badge-primary { background: var(--ms-primary-soft); color: var(--ms-primary-strong); border-color: transparent; }
.ms-badge-accent { background: var(--ms-accent-soft); color: var(--ms-accent); border-color: transparent; }
.ms-badge-warm { background: var(--ms-warm-soft); color: var(--ms-warm); border-color: transparent; }

/* Buttons / action links */
.ms-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .7rem 1.05rem; border: 1px solid transparent; border-radius: 999px; background: var(--ms-primary); color: #fff !important; font: inherit; font-size: .9rem; font-weight: 750; text-decoration: none !important; cursor: pointer; transition: transform var(--ms-fast) var(--ms-ease), background var(--ms-fast) var(--ms-ease), box-shadow var(--ms-fast) var(--ms-ease); }
.ms-btn:hover { transform: translateY(-2px); box-shadow: var(--ms-shadow-sm); }
.ms-btn-outline { background: transparent; color: var(--ms-primary) !important; border-color: var(--ms-border-strong); }
.ms-btn-soft { background: var(--ms-primary-soft); color: var(--ms-primary-strong) !important; }
.ms-btn-accent { background: var(--ms-accent); }

/* Tables */
.ms-table-wrap { width: 100%; overflow-x: auto; margin: var(--ms-space-6) 0; border: 1px solid var(--ms-border); border-radius: var(--ms-radius-md); }
.ms-table { width: 100%; min-width: 560px; border-collapse: collapse; background: var(--ms-bg); }
.ms-table th, .ms-table td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--ms-border); }
.ms-table th { background: var(--ms-surface); color: var(--ms-heading); font-size: .82rem; font-weight: 800; }
.ms-table td { color: var(--ms-text-soft); font-size: .92rem; }
.ms-table tr:last-child td { border-bottom: 0; }
.ms-table tbody tr:hover { background: var(--ms-surface); }

/* FAQ / details interaction. No JavaScript required. */
.ms-faq { margin: var(--ms-space-8) 0; display: grid; gap: .7rem; }
.ms-faq details { border: 1px solid var(--ms-border); border-radius: var(--ms-radius-md); background: var(--ms-surface); overflow: hidden; transition: border-color var(--ms-normal) var(--ms-ease), background var(--ms-normal) var(--ms-ease); }
.ms-faq details[open] { border-color: var(--ms-border-strong); background: var(--ms-bg); }
.ms-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; color: var(--ms-heading); font-weight: 750; cursor: pointer; list-style: none; }
.ms-faq summary::-webkit-details-marker { display: none; }
.ms-faq summary::after { content: "+"; flex: 0 0 auto; color: var(--ms-primary); font-size: 1.25rem; font-weight: 500; transition: transform var(--ms-normal) var(--ms-ease); }
.ms-faq details[open] summary::after { transform: rotate(45deg); }
.ms-faq-answer { padding: 0 1.1rem 1.1rem; color: var(--ms-text-soft); }

/* Media / image presentation */
.ms-media { margin: var(--ms-space-8) 0; }
.ms-media img { display: block; width: 100%; height: auto; border-radius: var(--ms-radius-lg); box-shadow: var(--ms-shadow-sm); }
.ms-media-caption { margin-top: .7rem; color: var(--ms-text-muted); text-align: center; font-size: .82rem; }
.ms-image-card { overflow: hidden; border: 1px solid var(--ms-border); border-radius: var(--ms-radius-lg); background: var(--ms-surface); }
.ms-image-card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform var(--ms-slow) var(--ms-ease); }
.ms-image-card:hover img { transform: scale(1.025); }
.ms-image-card-body { padding: var(--ms-space-5); }

/* Product / affiliate recommendation card */
.ms-product { display: grid; grid-template-columns: minmax(140px, 34%) 1fr; gap: var(--ms-space-5); padding: var(--ms-space-5); margin: var(--ms-space-8) 0; background: var(--ms-surface); border: 1px solid var(--ms-border); border-radius: var(--ms-radius-lg); box-shadow: var(--ms-shadow-sm); }
.ms-product img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--ms-radius-md); }
.ms-product-label { color: var(--ms-accent); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.ms-product-title { color: var(--ms-heading); font-size: 1.08rem; font-weight: 800; margin: .25rem 0 .5rem; }
.ms-product-copy { color: var(--ms-text-soft); font-size: .9rem; }

/* Section / hero blocks */
.ms-section { margin: var(--ms-space-16) 0; }
.ms-section-tight { margin: var(--ms-space-10) 0; }
.ms-section-head { max-width: 680px; margin-bottom: var(--ms-space-8); }
.ms-hero { position: relative; padding: clamp(2rem, 7vw, 4.5rem); border-radius: var(--ms-radius-xl); background: linear-gradient(135deg, var(--ms-primary-soft), var(--ms-surface)); border: 1px solid var(--ms-border); overflow: hidden; }
.ms-hero::after { content: ""; position: absolute; width: 220px; height: 220px; right: -80px; bottom: -100px; border-radius: 50%; background: var(--ms-warm-soft); opacity: .75; pointer-events: none; }
.ms-hero > * { position: relative; z-index: 1; }

/* Spacing utility classes */
.ms-mt-0{margin-top:0!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1rem!important}.ms-mt-6{margin-top:1.5rem!important}.ms-mt-8{margin-top:2rem!important}.ms-mt-12{margin-top:3rem!important}
.ms-mb-0{margin-bottom:0!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1rem!important}.ms-mb-6{margin-bottom:1.5rem!important}.ms-mb-8{margin-bottom:2rem!important}.ms-mb-12{margin-bottom:3rem!important}
.ms-p-0{padding:0!important}.ms-p-4{padding:1rem!important}.ms-p-6{padding:1.5rem!important}.ms-p-8{padding:2rem!important}

/* Animation classes. Motion is automatically disabled for accessibility preferences. */
.ms-reveal { animation: ms-fade-up .6s var(--ms-ease) both; }
.ms-fade { animation: ms-fade .45s var(--ms-ease) both; }
.ms-scale-in { animation: ms-scale-in .5s var(--ms-ease) both; }
.ms-hover-lift { transition: transform var(--ms-normal) var(--ms-ease), box-shadow var(--ms-normal) var(--ms-ease); }
.ms-hover-lift:hover { transform: translateY(-4px); box-shadow: var(--ms-shadow-md); }
@keyframes ms-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ms-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ms-scale-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 700px) {
  .ms-content { font-size: .97rem; line-height: 1.72; }
  .ms-card, .ms-callout { padding: var(--ms-space-5); }
  .ms-grid-2, .ms-grid-3 { grid-template-columns: 1fr; }
  .ms-product { grid-template-columns: 1fr; }
  .ms-product img { max-height: 260px; }
  .ms-quote { padding: var(--ms-space-5); }
}