/* UI primitives only, not an application. The face and the hit target are separate. */
.yon-surface { background:var(--yon-canvas-workbench); color:var(--yon-text); font-family:var(--yon-font-ui); }
.yon-button { --face-h:var(--yon-control-md); min-height:var(--yon-target-min); min-width:var(--yon-target-min); padding:0; border:0; border-radius:var(--yon-radius-pill); background:none; color:var(--yon-text); font:500 14px/20px var(--yon-font-ui); display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; cursor:pointer; }
.yon-button__face { min-height:var(--face-h); width:100%; padding:6px 16px; border:var(--yon-border-width) solid var(--yon-border-structure); border-radius:var(--yon-radius-pill); display:inline-flex; align-items:center; justify-content:center; gap:8px; background:transparent; transition:background-color var(--yon-motion-fast) var(--yon-ease-out); }
.yon-button--primary .yon-button__face { background:var(--yon-action-bg); border-color:var(--yon-action-bg); color:var(--yon-action-fg); }
.yon-button--sm { --face-h:var(--yon-control-sm); }
.yon-button--lg { --face-h:var(--yon-control-lg); }
.yon-button--icon .yon-button__face { width:var(--face-h); height:var(--face-h); min-width:var(--face-h); padding:0; border-radius:50%; flex:none; }
.yon-button--on-content .yon-button__face { border-color:var(--yon-border-control); }
.yon-button:focus-visible { outline:0; }
.yon-button:focus-visible .yon-button__face, .yon-input:focus-visible, .yon-segment button:focus-visible { outline:var(--yon-focus-width) solid var(--yon-focus); outline-offset:var(--yon-focus-offset); }
.yon-button:disabled .yon-button__face { background:var(--yon-surface-secondary); border-color:var(--yon-border-structure); color:var(--yon-text-secondary); }
.yon-button:disabled { cursor:not-allowed; }
.yon-icon { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; flex:0 0 20px; }
.yon-icon svg { display:block; width:100%; height:100%; }
.yon-card { background:var(--yon-canvas-workbench); border:var(--yon-border-width) solid var(--yon-border-structure); border-radius:var(--yon-radius-card); color:var(--yon-text); padding:20px; }
.yon-dialog { background:var(--yon-surface-overlay); border:var(--yon-border-width) solid var(--yon-border-structure); border-radius:var(--yon-radius-panel); padding:24px; color:var(--yon-text); }
.yon-input { box-sizing:border-box; width:100%; min-height:44px; padding:12px 16px; border:var(--yon-border-width) solid var(--yon-border-control); border-radius:var(--yon-radius-control); background:var(--yon-surface-overlay); color:var(--yon-text); font:400 16px/24px var(--yon-font-ui); }
.yon-input::placeholder { color:var(--yon-text-secondary); opacity:1; }
.yon-input--multiline { min-height:84px; resize:vertical; }
.yon-segment { --track-h:38px; display:flex; height:var(--track-h); padding:var(--yon-nested-gap); border:var(--yon-border-width) solid var(--yon-border-structure); border-radius:var(--yon-radius-pill); background:var(--yon-canvas-workbench); box-sizing:border-box; align-items:stretch; }
.yon-segment button { flex:1 1 0; border:0; border-radius:var(--yon-radius-pill); margin:0; padding:0 14px; background:none; color:var(--yon-text); font:500 14px/20px var(--yon-font-ui); cursor:pointer; }
.yon-segment button[aria-pressed="true"] { background:var(--yon-action-bg); color:var(--yon-action-fg); }
.yon-state { display:inline-flex; align-items:center; gap:8px; min-height:30px; padding:4px 12px; background:var(--yon-surface-secondary); color:var(--yon-text); border:var(--yon-border-width) solid var(--yon-border-structure); border-radius:var(--yon-radius-pill); font:400 14px/20px var(--yon-font-ui); }
.yon-state--success { background:var(--yon-green); color:var(--yon-on-green); border-color:var(--yon-green); }
.yon-state--warning::before, .yon-state--error::before { content:""; width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:var(--yon-warning-accent); }
.yon-state--error::before { background:var(--yon-danger-accent); }
.yon-divider { border:0; border-top:var(--yon-divider-width) solid var(--yon-border-reading); margin:16px 0; }
.yon-content-surface { background:var(--yon-canvas-content); color:var(--yon-text); }
/* Visible borders on white reading surfaces, without changing the 1.5px outer weight. */
.yon-content-surface .yon-card { background:var(--yon-canvas-content); border-color:var(--yon-border-reading); }
@media (prefers-reduced-motion:reduce) { .yon-button__face, .yon-state, .yon-dialog { transition:none; animation:none; } }