/* EdCapable LLC — brand stylesheet
   Drop this into any project and link it. Everything below is plain CSS
   custom properties plus a handful of primitives. No build step, no framework. */

@import url("https://fonts.googleapis.com/css2?family=Epilogue:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* Brand */
  --ec-indigo: #3A4488;
  --ec-indigo-light: #727CC4;   /* oversized mark on an indigo field */
  --ec-clay: #C9704F;
  --ec-clay-light: #E0916B;     /* clay on indigo — true clay fails contrast */
  --ec-sand: #EBB79B;           /* tagline on indigo */

  /* Neutrals */
  --ec-ink: #1A1B2B;
  --ec-body: #4A4842;
  --ec-muted: #8A867E;
  --ec-paper: #F7F6F2;
  --ec-white: #FFFFFF;
  --ec-line: #E4E2DC;

  /* Semantic aliases — prefer these in product code */
  --text-strong: var(--ec-ink);
  --text-body: var(--ec-body);
  --text-muted: var(--ec-muted);
  --text-accent: var(--ec-clay);
  --surface-page: var(--ec-paper);
  --surface-card: var(--ec-white);
  --surface-invert: var(--ec-indigo);
  --border-hairline: var(--ec-line);
  --action-primary: var(--ec-indigo);
  --action-accent: var(--ec-clay);

  /* Type */
  --font-sans: Epilogue, system-ui, -apple-system, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;   /* tagline only */
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --tracking-wordmark: -0.045em;
  --tracking-display: -0.03em;
  --tracking-label: 0.16em;

  /* Space — 4px base */
  --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;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-icon: 22.5%;     /* iOS squircle approximation */
  --radius-print: 0;        /* cards and print: square corners, always */

  /* Depth — used sparingly; the brand leans on hairlines, not shadows */
  --shadow-card: 0 1px 2px rgba(26, 27, 43, 0.04);
  --shadow-raised: 0 6px 20px rgba(26, 27, 43, 0.10);

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur: 160ms;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
}

a { color: var(--action-primary); }
a:hover { color: var(--action-accent); }

/* ── Brand elements ───────────────────────────────── */

/* Wordmark. The C takes the mark's accent on that background — never white
   by default. Set --ec-c on a dark parent: indigo bg → var(--ec-clay-light),
   ink bg → var(--ec-clay). Exception: the social banner keeps a white C. */
.ec-wordmark {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: var(--tracking-wordmark);
  color: var(--text-strong);
}
.ec-wordmark > b { font-weight: 700; color: var(--ec-c, var(--ec-indigo)); }

/* Tagline. Ratios locked to the wordmark font size (W). */
.ec-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.5em;         /* 0.50 × W when nested in .ec-lockup */
  color: var(--text-accent);
  line-height: 1;
}
.ec-lockup { display: flex; align-items: center; gap: 0.45em; }
.ec-lockup .ec-type { display: flex; flex-direction: column; gap: 0.2em; }
.ec-lockup img.ec-mark { height: 1.9em; width: auto; }

.ec-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Primitives ───────────────────────────────────── */

.ec-btn {
  font: 500 15px/1 var(--font-sans);
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ec-btn--primary { background: var(--action-primary); color: var(--ec-paper); }
.ec-btn--primary:hover { background: #2F3873; }
.ec-btn--accent { background: var(--action-accent); color: var(--ec-white); }
.ec-btn--accent:hover { background: #B45F40; }
.ec-btn--ghost { background: transparent; color: var(--text-strong); border-color: var(--border-hairline); }
.ec-btn--ghost:hover { background: var(--ec-white); }

.ec-card {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.ec-badge {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--ec-indigo);
  color: var(--ec-paper);
}
.ec-badge--accent { background: var(--ec-clay); color: var(--ec-white); }

.ec-input {
  font: 400 16px/1.4 var(--font-sans);
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  width: 100%;
}
.ec-input:focus { outline: 2px solid var(--ec-indigo); outline-offset: -1px; }

.ec-rule { height: 1px; background: var(--border-hairline); border: 0; margin: 0; }

/* Dark sections */
.ec-invert { background: var(--surface-invert); color: #C6CBEC; --ec-c: var(--ec-clay-light); }
.ec-invert .ec-wordmark { color: var(--ec-paper); }
.ec-invert .ec-tagline { color: var(--ec-sand); }
.ec-invert .ec-label { color: #A8AEE0; }

@media print { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }