/* Amara Design System — shared tokens across Acute, Flow, Palliate.
   Each product has its own :root-level overrides, plus semantic type classes
   that work against whichever product palette is active. */

/* ─── GOOGLE FONT IMPORTS ──────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Outfit:wght@300;400;500;600&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ─── ACUTE (cobalt / cool-navy, default) ──────────────────────── */
:root,
.amara-acute{
  --bg:#06080c; --sf:#0e1118; --sf2:#161a24; --sf3:#1e2330;
  --bd:#2a3040; --bd2:#3a4358;
  --tx:#e0e4ee; --dim:#7a829a; --fnt:#4a5168;
  --acc:#5b8af5; --acc-soft:#5b8af518; --acc-ring:#5b8af550;
  --grn:#34d399; --ylw:#fbbf24; --org:#f59e0b;
  --red:#ef4444; --crit:#dc2626; --lo:#3b82f6; --hi:#ef4444;
  --rds:8px;
}
.amara-acute.light, :root.light .amara-acute, :root.light:not(.amara-flow):not(.amara-palliate){
  --bg:#ffffff; --sf:#f5f6f8; --sf2:#ebedf2; --sf3:#e1e4eb;
  --bd:#c4cad6; --bd2:#aeb7c8;
  --tx:#0f172a; --dim:#334155; --fnt:#4b5568;
}

/* ─── FLOW (violet / GitHub-dark) ─────────────────────────────── */
.amara-flow{
  --bg:#0d1117; --sf:#161b22; --sf2:#1c2128; --sf3:#21262d;
  --bd:#30363d; --bd2:#484f58;
  --tx:#e6edf3; --dim:#8b949e; --fnt:#484f58;
  --acc:#a371f7; --acc-soft:#a371f712; --acc-ring:#a371f750;
  --grn:#3fb950; --ylw:#d29922; --org:#f0883e;
  --red:#f85149; --crit:#f85149; --lo:#58a6ff; --hi:#f85149;
  --lane1:#f85149; --lane2:#f0883e; --lane3:#58a6ff; --lane4:#a371f7; --lane5:#3fb950;
  --rds:8px;
}
.amara-flow.light{
  --bg:#f6f8fa; --sf:#ffffff; --sf2:#f0f2f5; --sf3:#e8ebef;
  --bd:#d0d7de; --bd2:#afb8c1;
  --tx:#1f2328; --dim:#656d76; --fnt:#afb8c1;
  --acc:#8250df; --red:#cf222e; --org:#bc4c00; --ylw:#9a6700;
  --grn:#1a7f37; --lo:#0969da;
}

/* ─── PALLIATE (dusty mauve / warm aubergine) ─────────────────── */
.amara-palliate{
  --bg:#1A181D; --sf:#252229; --sf2:#2E2A33; --sf3:#38333F;
  --bd:#3D374A; --bd2:#4A4358;
  --tx:#E8E3ED; --dim:#B0A8BD; --fnt:#8E849A;
  --acc:#A994B8; --acc2:#8B7A9E; --acc3:#7C6B8A;
  --acc-soft:#A994B818; --acc-ring:#A994B850;
  --grn:#7EBF8E; --red:#D4727A; --org:#D4A574; --lo:#7EA8BF;
  --warm:#C4A882;
  --rds:8px;
}
.amara-palliate.light{
  --bg:#FAF8F6; --sf:#F0ECE8; --sf2:#E8E2DB; --sf3:#DDD6CD;
  --bd:#C4BBAF; --bd2:#AEA397;
  --tx:#2D2A33; --dim:#5C5466; --fnt:#6B6573;
  --acc:#7C6B8A; --acc2:#6B5A7A; --acc3:#5A4A69;
  --grn:#4A8F5E; --red:#B8525A; --org:#B8864A; --lo:#4A7E8F;
}

/* ─── SEMANTIC TYPE ───────────────────────────────────────────── */

/* Display (Acute & Palliate logo treatment) */
.a-display, h1.a-display{
  font-family:'Instrument Serif', serif;
  font-weight:400;
  font-size:1.8rem;
  line-height:1.1;
  letter-spacing:-0.01em;
  color:var(--tx);
}
.a-display i{ color:var(--acc); font-style:italic; font-size:0.82em; }

/* Palliate card title */
.a-title-serif{
  font-family:'Cormorant Garamond', serif;
  font-weight:600;
  font-size:1.05rem;
  line-height:1.3;
  color:var(--tx);
}

/* Flow logo (same pattern as Acute/Palliate) */
.a-logo-mono{
  font-family:'Instrument Serif', serif;
  font-weight:400;
  font-size:1.3rem;
  line-height:1.1;
  color:var(--tx);
}
.a-logo-mono i{ color:var(--acc); font-style:italic; font-size:0.82em; }

/* Headings */
h1.a-h1{ font-family:'Outfit',sans-serif; font-weight:600; font-size:1.3rem; line-height:1.25; color:var(--tx); letter-spacing:-0.01em; }
h2.a-h2{ font-family:'Outfit',sans-serif; font-weight:600; font-size:1.05rem; line-height:1.3; color:var(--tx); }
h3.a-h3{ font-family:'Outfit',sans-serif; font-weight:600; font-size:0.88rem; line-height:1.35; color:var(--tx); }

/* Section label — the signature uppercase-mono eyebrow */
.a-eyebrow, .sh{
  font-family:'JetBrains Mono', monospace;
  font-size:0.58rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--dim);
  font-weight:500;
}

/* Ultra-small metadata (Acute-style) */
.a-meta{
  font-family:'JetBrains Mono', monospace;
  font-size:0.48rem;
  text-transform:uppercase;
  letter-spacing:0.15em;
  color:var(--fnt);
  font-weight:500;
}

/* Body */
p.a-body, .a-body{
  font-family:'Outfit', sans-serif;
  font-size:0.82rem;
  line-height:1.55;
  color:var(--dim);
}
p.a-body strong, .a-body strong{ color:var(--tx); font-weight:600; }

/* Body — dense (Acute info rows) */
.a-body-dense{
  font-family:'Outfit', sans-serif;
  font-size:0.62rem;
  line-height:1.6;
  color:var(--dim);
}

/* Dose / code block — inline prescribing */
.a-dose, code.a-dose{
  font-family:'JetBrains Mono', monospace;
  font-size:0.68rem;
  line-height:1.7;
  color:var(--acc);
  background:var(--acc-soft);
  border:1px solid var(--acc-ring);
  border-radius:6px;
  padding:8px 12px;
  display:block;
}

/* Tag / chip text */
.a-tag{
  font-family:'JetBrains Mono', monospace;
  font-size:0.5rem;
  font-weight:600;
  letter-spacing:0.04em;
  padding:2px 8px;
  border-radius:4px;
  text-transform:uppercase;
  display:inline-block;
}

/* Button base */
.a-btn{
  font-family:'Outfit', sans-serif;
  font-size:0.74rem;
  padding:8px 12px;
  border-radius:var(--rds);
  border:1px solid var(--bd);
  background:var(--sf2);
  color:var(--dim);
  cursor:pointer;
  min-height:36px;
  transition:all 0.15s;
}
.a-btn:active{ transform:scale(0.96); }
.a-btn.on, .a-btn[aria-pressed="true"]{
  background:var(--acc-soft); border-color:var(--acc-ring); color:var(--acc);
}

/* Card */
.a-card{
  background:var(--sf);
  border:1px solid var(--bd);
  border-radius:var(--rds);
  padding:10px 12px;
}
.a-card--accent{ border-left:3px solid var(--acc); }
.a-card--crit{ border-left:3px solid var(--crit); }
.a-card--warn{ border-left:3px solid var(--org); }
.a-card--ok{ border-left:3px solid var(--grn); }

/* Severity palette (semantic colours, product-agnostic) */
.a-sev-crit{ color:var(--crit); background:color-mix(in srgb, var(--crit) 12%, transparent); border:1px solid color-mix(in srgb, var(--crit) 35%, transparent); }
.a-sev-red { color:var(--red);  background:color-mix(in srgb, var(--red)  10%, transparent); border:1px solid color-mix(in srgb, var(--red)  30%, transparent); }
.a-sev-warn{ color:var(--org);  background:color-mix(in srgb, var(--org)  12%, transparent); border:1px solid color-mix(in srgb, var(--org)  30%, transparent); }
.a-sev-ok  { color:var(--grn);  background:color-mix(in srgb, var(--grn)  10%, transparent); border:1px solid color-mix(in srgb, var(--grn)  30%, transparent); }
.a-sev-info{ color:var(--lo);   background:color-mix(in srgb, var(--lo)   10%, transparent); border:1px solid color-mix(in srgb, var(--lo)   30%, transparent); }

/* Pulse animation — reserved for critical alerts ONLY */
@keyframes amara-pulse{ 0%,100%{opacity:1} 50%{opacity:.7} }
.a-pulse{ animation: amara-pulse 2s infinite; }