/*
 * EssiCrana Studios — shared design system.
 *
 * ONE file for the marketing site, the discovery funnel, the client app and the
 * studio. This copy (funnel repo, served at /ds/essicrana.css) is the source of
 * truth. essicrana-site keeps a byte-identical copy at public/ds/essicrana.css:
 * edit here, then run essicrana-workspace/tools/sync-ds.sh.
 *
 * Everything is namespaced --ec-* / .ec-* because the surfaces already use the
 * short names for different things (the site's --body is a font size; the
 * funnel's --body is a font family). Surfaces alias their old names to these.
 *
 * Committed dark. There is no light theme, by design.
 */

:root {
  /* ground and surfaces */
  --ec-void:     #060607;   /* behind framed app windows */
  --ec-ground:   #0A0A0A;
  --ec-raise:    #121212;
  --ec-raise-2:  #181817;

  /* ink */
  --ec-ink:      #F5F5F0;
  --ec-ink-2:    #C9C9C4;
  --ec-muted:    #8A8A83;   /* 5.5:1 on ground — the floor for any text */

  /* lines */
  --ec-line:     #242422;   /* decorative rules only */
  --ec-line-2:   #61615E;   /* component edges: ≥3:1 on ground and raise */

  /* the one brand colour */
  --ec-accent:       #FFF91A;
  --ec-accent-hover: #FFFB5C;
  --ec-accent-deep:  #D6CB00;
  --ec-accent-dim:   rgba(255, 249, 26, .10);
  --ec-on-accent:    #0A0A0A;

  /* status — semantic, never decoration. Yellow means "needs you". */
  --ec-done:     #2FBF71;  --ec-done-dim: rgba(47, 191, 113, .13);
  --ec-now:      #FF8A1F;  --ec-now-dim:  rgba(255, 138, 31, .13);   /* studio is working on it */
  --ec-bad:      #FF6B4A;  --ec-bad-dim:  rgba(255, 107, 74, .13);

  /* type */
  --ec-display: "Mohave", "Haettenschweiler", Impact, "Arial Narrow", sans-serif;
  --ec-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ec-mono:    "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --ec-hand:    "Rock Salt", "Bradley Hand", cursive;   /* one handwritten line per screen, at most */

  --ec-fs-label: 11px;   /* uppercase labels. Nothing a client must act on is this small. */
  --ec-fs-small: 13px;
  --ec-fs-text:  15px;
  --ec-fs-lead:  17px;

  /* shape */
  --ec-r-sm: 4px;
  --ec-r:    8px;
  --ec-r-lg: 14px;
  --ec-pill: 999px;
  --ec-focus: 0 0 0 2px var(--ec-ground), 0 0 0 4px var(--ec-accent);
  --ec-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ------------------------------------------------------------------ labels */

/* Small uppercase label: eyebrows, table heads, tags. */
.ec-label {
  font: 500 var(--ec-fs-label)/1.3 var(--ec-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ec-muted);
}

/* Eyebrow: a yellow rule, then the label. Sits above a display heading. */
.ec-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font: 500 var(--ec-fs-label)/1.3 var(--ec-mono);
  letter-spacing: .16em; text-transform: uppercase; color: var(--ec-accent);
}
.ec-eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; flex: none; }

/* ----------------------------------------------------------------- buttons */

/*
 * Three kinds, three sizes. Primary is the one thing to do on the screen:
 * yellow, Mohave, uppercase. Secondary is an outline. Quiet is text.
 *   <button class="ec-btn">                 primary
 *   <button class="ec-btn ec-btn--secondary">
 *   <button class="ec-btn ec-btn--quiet">
 *   add ec-btn--sm or ec-btn--lg for size
 */
.ec-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 12px 24px;
  font: 700 17px/1.05 var(--ec-display); letter-spacing: .01em; text-transform: uppercase;
  color: var(--ec-on-accent); background: var(--ec-accent);
  border: 1px solid var(--ec-accent); border-radius: var(--ec-r-sm);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ec-btn:hover { background: var(--ec-accent-hover); border-color: var(--ec-accent-hover); box-shadow: 0 0 0 3px var(--ec-accent-dim); }
.ec-btn:active { transform: translateY(1px); }
.ec-btn:focus-visible { outline: none; box-shadow: var(--ec-focus); }
.ec-btn:disabled, .ec-btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; box-shadow: none; }

.ec-btn--secondary { color: var(--ec-ink); background: transparent; border-color: var(--ec-line-2); }
.ec-btn--secondary:hover { color: var(--ec-accent); background: transparent; border-color: var(--ec-accent); box-shadow: none; }

.ec-btn--quiet {
  color: var(--ec-muted); background: transparent; border-color: transparent;
  font: 500 14px/1.2 var(--ec-body); letter-spacing: 0; text-transform: none; padding-inline: 12px;
}
.ec-btn--quiet:hover { color: var(--ec-ink); background: transparent; border-color: transparent; box-shadow: none; }

.ec-btn--sm { min-height: 36px; padding: 8px 14px; font-size: 14px; }
.ec-btn--sm.ec-btn--quiet { font-size: 13px; }
.ec-btn--lg { min-height: 56px; padding: 16px 34px; font-size: 20px; }

/* ------------------------------------------------------------ chips, cards */

/* Chip: a status or a count. Put .ec-chip--done/now/needs on it for a dot. */
.ec-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 var(--ec-fs-label)/1 var(--ec-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ec-ink-2); border: 1px solid var(--ec-line-2); border-radius: var(--ec-pill);
  padding: 6px 11px; white-space: nowrap;
}
.ec-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ec-muted); flex: none; }
.ec-chip--done::before  { background: var(--ec-done);   box-shadow: 0 0 0 3px var(--ec-done-dim); }
.ec-chip--now::before   { background: var(--ec-now);    box-shadow: 0 0 0 3px var(--ec-now-dim); }
.ec-chip--needs::before { background: var(--ec-accent); box-shadow: 0 0 0 3px var(--ec-accent-dim); }
.ec-chip--plain::before { display: none; }

/* Card: a separate object. Use it for things you act on, not for every block. */
.ec-card {
  background: var(--ec-raise); border: 1px solid var(--ec-line);
  border-radius: var(--ec-r); padding: 18px;
}
.ec-card--needs { border-color: var(--ec-accent); background: linear-gradient(180deg, var(--ec-accent-dim), var(--ec-raise) 70%); }
.ec-card--done  { border-color: rgba(47, 191, 113, .4); }

/* ------------------------------------------------------------------ inputs */

.ec-input {
  display: block; width: 100%; min-height: 44px; padding: 11px 13px;
  font: 400 15px/1.45 var(--ec-body); color: var(--ec-ink);
  background: #161615; border: 1px solid #373732; border-radius: var(--ec-r-sm);
}
.ec-input:focus { outline: none; border-color: var(--ec-accent); }

@media (prefers-reduced-motion: reduce) {
  .ec-btn { transition: none; }
}