/* ==========================================================================
   AI Companionship in Clinical Practice — Design System
   Palette: Soft Black / Warm Cream / Deep Teal / Mid Teal
           + Terracotta / Sage / Warm Grey / Warm White
   Type:   Fraunces (display + optical italic pulls) + Inter (body/UI)
   ========================================================================== */

:root {
  /* Primary */
  --soft-black: #1d1d1d;
  --warm-cream: #f3efe6;
  --deep-teal:  #0f5f5a;
  --mid-teal:   #2a9d99;

  /* Supporting */
  --terracotta: #c77155;
  --sage:       #8ea988;
  --warm-grey:  #a59d98;
  --warm-white: #fbf9f4;

  /* Functional */
  --ink:        var(--soft-black);
  --ink-muted:  #5a5754;
  --ink-soft:   #8a857f;
  --bg:         var(--warm-cream);
  --surface:    var(--warm-white);
  --rule:       #dcd5c7;
  --rule-soft:  #e8e1d2;
  --accent:     var(--deep-teal);
  --accent-2:   var(--mid-teal);
  --warn:       var(--terracotta);

  /* Type scale */
  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Radii + motion */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* Dark mode — Soft Black ground */
[data-theme="dark"] {
  --ink:        #f0ebde;
  --ink-muted:  #c9c2b2;
  --ink-soft:   #8e8878;
  --bg:         #161513;
  --surface:    #1f1e1b;
  --rule:       #2e2c27;
  --rule-soft:  #262421;
  --accent:     var(--mid-teal);
  --accent-2:   #4fbfba;
}

/* Accent swap — Terracotta lead */
[data-accent="terracotta"] {
  --accent:   var(--terracotta);
  --accent-2: #d88970;
}
[data-accent="sage"] {
  --accent:   #6a8d66;
  --accent-2: var(--sage);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--f-body);
  font-feature-settings: "ss01", "cv11";
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-size: 17px;
  line-height: 1.55;
  transition: background .4s var(--ease), color .4s var(--ease);
}

/* Headings — Fraunces, optical */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 480;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 144;
}
h1 { font-size: clamp(2.4rem, 5.2vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-variation-settings: "opsz" 72; }
h3 { font-size: 1.35rem; font-variation-settings: "opsz" 36; letter-spacing: -0.01em; }

p { margin: 0 0 1em; text-wrap: pretty; color: var(--ink); }

em, .pull {
  font-family: var(--f-display);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

/* Eyebrow / micro labels */
.eyebrow {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Layout */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.wrap-narrow { max-width: 720px; margin: 0 auto; padding: 0 40px; }

hr.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* Utility */
.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.02em; }
.tnum { font-variant-numeric: tabular-nums; }
.swash { font-family: var(--f-display); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .2s var(--ease);
}
.btn-primary { background: var(--accent); color: var(--warm-white); }
.btn-primary:hover { background: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--ink); }

/* Placeholder image block */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(135deg, transparent 0 10px, rgba(0,0,0,0.035) 10px 11px),
    var(--rule-soft);
  color: var(--ink-muted);
  border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--r-md);
  overflow: hidden;
}
.ph::after {
  content: attr(data-label);
  opacity: 0.7;
}

/* Focus */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }