/* dc.css — the shared design system for every Dr. Capital page (public).
   Tokens: dr-capital-design-system-lms.md (v2). Area stylesheets (e.g.
   capitomo.css) load after this one and only add their own rules. */
/* ============================================================
   1. Design-system tokens — verbatim from dr-capital-design-system-lms.md (v2)
   ============================================================ */
:root {
  --surface-100: #F7F6F3; --surface-200: #EDEBE7; --border: #DAD7D1;
  --control-border: #8C7C6E; --ink: #1E1D1C; --ink-muted: #57544E;
  --brand-blue: #2E82A4; --brand-blue-text: #1F6E8C; --navy: #1F3347;
  --accent-pink: #B45476; --accent-pink-text: #93395A; --violet: #4E4A80; --sky: #8FC0DE;
  --font-sans: "Noto Sans", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 999px;
}
[data-theme="dark"] {
  --surface-100: #17171A; --surface-200: #212125; --border: #34333A;
  --control-border: #7A7870; --ink: #F2F1EE; --ink-muted: #B8B6B0;
  --brand-blue: #6FB6D6; --brand-blue-text: #8FCBE6; --navy: #3D6A94;
  --accent-pink: #E890AA; --accent-pink-text: #EFA3BA; --violet: #9C97D6; --sky: #4E88A8;
}

/* ============================================================
   2. Fill tokens — from the design system: text on colored fills.
   Dark mode puts dark ink on the lighter fill; white on a raw
   brand color fails contrast in one theme or the other.
   ============================================================ */
:root {
  --fill-primary: #1F6E8C;  --on-fill-primary: #FFFFFF;  /* 5.73:1 */
  --fill-accent:  #93395A;  --on-fill-accent:  #FFFFFF;  /* 7.06:1 */
}
[data-theme="dark"] {
  --fill-primary: #6FB6D6;  --on-fill-primary: #17171A;  /* 7.95:1 */
  --fill-accent:  #E890AA;  --on-fill-accent:  #17171A;  /* 7.67:1 */
}

/* ============================================================
   3. Type scale — verbatim from the design system
   ============================================================ */
.text-display-lg { font: 800 40px/44px var(--font-sans); }
.text-heading-lg { font: 700 24px/32px var(--font-sans); }
.text-heading-md { font: 700 20px/28px var(--font-sans); }
.text-heading-sm { font: 700 17px/24px var(--font-sans); }
.text-body-lg    { font: 400 17px/26px var(--font-sans); }
.text-body       { font: 400 15px/24px var(--font-sans); }
.text-body-sm    { font: 400 13px/20px var(--font-sans); }
.text-label      { font: 600 13px/16px var(--font-sans); }
.text-caption    { font: 400 12px/16px var(--font-sans); }

/* ============================================================
   4. Base + components
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--surface-100); }
body { margin: 0; font: 400 15px/24px var(--font-sans); color: var(--ink); background: var(--surface-100); }
h1, h2, h3, p { margin: 0; }
a { color: var(--brand-blue-text); }
:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 2px; border-radius: 4px; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 var(--space-5); }
.muted { color: var(--ink-muted); }

.btn { display: inline-block; font: 600 15px/20px var(--font-sans); text-decoration: none;
       border-radius: var(--radius-md); padding: var(--space-3) var(--space-5); cursor: pointer; }
.btn-primary { background: var(--fill-primary); color: var(--on-fill-primary); border: 0; }
.btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--control-border); }
.btn[disabled] { opacity: .6; cursor: default; }

/* sections */
section.block { padding: var(--space-7) 0; border-top: 1px solid var(--border); }
section.block h2 { margin-bottom: var(--space-2); }
section.block .sub { margin-bottom: var(--space-6); max-width: 40em; }

.notice { max-width: 40em; margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4);
  background: var(--surface-200); border-left: 3px solid var(--violet); border-radius: var(--radius-sm); }
/* Read by screen readers, not shown (e.g. the search box's label). */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 560px) {
  .text-display-lg { font-size: 32px; line-height: 38px; }
}

/* ============================================================
   5. Forms — a narrow page (.narrow) holding a .form
   ============================================================ */
.narrow .wrap { max-width: 640px; }
.narrow h1 { margin-bottom: var(--space-4); }
.narrow .sub { margin-bottom: var(--space-5); }
.form { display: grid; gap: var(--space-2); }
.form label { font: 600 13px/16px var(--font-sans); margin-top: var(--space-3); }
.form input[type="text"], .form input[type="email"] {
  font: 400 16px/24px var(--font-sans); /* 16px keeps iOS from zooming on focus */
  color: var(--ink); background: var(--surface-100);
  border: 1px solid var(--control-border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.form .field-help { margin: 0; }
.form select {
  font: 400 16px/24px var(--font-sans); /* 16px keeps iOS from zooming on focus */
  color: var(--ink); background: var(--surface-100);
  border: 1px solid var(--control-border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.form textarea {
  font: 400 16px/24px var(--font-sans); /* 16px keeps iOS from zooming on focus */
  color: var(--ink); background: var(--surface-100); resize: vertical;
  border: 1px solid var(--control-border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.form label.check { display: flex; gap: var(--space-2); align-items: flex-start; font: 400 15px/22px var(--font-sans); }
.form label.check input { margin-top: 4px; flex: none; }
.form .btn { justify-self: start; margin-top: var(--space-4); }
.form-error { color: var(--accent-pink-text); font-weight: 600; margin-bottom: var(--space-3); }
/* Honeypot: off-screen for people (and out of the tab order and screen
   readers, set in the markup); bots that fill every field reveal themselves. */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   6. Public pages — the main site's plain, light header: "Dr. Capital"
   and the site menu, wrapping on phones
   ============================================================ */
.public-head { border-bottom: 1px solid var(--border); background: #fff; }
.public-head .wrap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-3) var(--space-5); padding-top: var(--space-4); padding-bottom: var(--space-4); }
.public-wordmark { font: 800 24px/1.2 var(--font-sans); color: var(--navy); text-decoration: none; }
.public-menu { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.public-menu a { font: 600 13px/20px var(--font-sans); letter-spacing: .06em; color: var(--ink); text-decoration: none; }
.public-menu a:hover, .public-menu a[aria-current="page"] { color: var(--brand-blue-text); text-decoration: underline; text-underline-offset: 4px; }
/* The contact page's own language switch, above the fields. */
.contact-lang { margin: 0 0 var(--space-5); }