/* EF family visual language: warm paper, clear ink, restrained pastel cues. */
:root {
  color-scheme: light;
  --ef-canvas: #f4f1eb;
  --ef-paper: #fffdfa;
  --ef-paper-hover: #f4f8f3;
  --ef-ink: #202b25;
  --ef-muted: #526359;
  --ef-line: #d5ddd2;
  --ef-action: #35694e;
  --ef-action-hover: #285840;
  --ef-sage: #e6f0e6;
  --ef-sage-ink: #285a40;
  --ef-lavender: #eee9f7;
  --ef-lavender-ink: #594779;
  --ef-peach: #faecdf;
  --ef-peach-ink: #754c32;
  --ef-blue: #e7eef7;
  --ef-blue-ink: #355577;
  --ef-focus: #276bcd;
  --ef-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Shared opt-in primitives. Product styles own layout; these own common treatment. */
.ef-surface { background: var(--ef-paper); border: 1px solid var(--ef-line); border-radius: 14px; box-shadow: 0 2px 8px rgba(31,42,35,.035); }
.ef-segmented { background: #eeeee8; border: 1px solid var(--ef-line); border-radius: 11px; padding: 4px; }
.ef-segment { min-height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--ef-muted); font: 650 .86rem var(--ef-font); cursor: pointer; }
.ef-segment[aria-pressed="true"] { background: var(--ef-paper); color: var(--ef-ink); box-shadow: 0 1px 3px rgba(32,41,34,.1); }
.ef-check-row { min-height: 52px; background: var(--ef-paper); border: 1px solid var(--ef-line); border-radius: 10px; }
.ef-check-row:hover { background: var(--ef-paper-hover); }
.ef-check-row input[type="checkbox"] { width: 21px; height: 21px; flex: none; margin: 0; accent-color: var(--ef-action); }
.ef-check-row[aria-checked="true"],.ef-check-row:has(input:checked) { background: #f1f7ef; border-color: #b9cfbb; }
.ef-primary { min-height: 44px; border: 1px solid var(--ef-action); border-radius: 9px; background: var(--ef-action); color: white; font-weight: 700; cursor: pointer; }
.ef-primary:hover { background: var(--ef-action-hover); }
.ef-field { min-height: 44px; border: 1px solid #b9c9bb; border-radius: 9px; background: var(--ef-paper); color: var(--ef-ink); }
.ef-attention { background: var(--ef-peach); border: 1px solid #e6ceb9; border-radius: 11px; color: #4b3b30; }
:where(.ef-surface,.ef-segment,.ef-check-row,.ef-primary,.ef-field):focus-visible { outline: 3px solid var(--ef-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { :where(.ef-surface,.ef-segment,.ef-check-row,.ef-primary,.ef-field) { transition-duration: 0ms !important; animation-duration: 0ms !important; } }