/* Verity core primitives. Class-based so states (hover/active/disabled/focus) are real
   CSS states, not JS. Every value resolves to a token. */

/* ── Button ── */
.v-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border:1px solid transparent;border-radius:var(--radius-control);font-family:var(--font-sans);font-weight:var(--fw-medium);font-size:var(--fs-body-sm);letter-spacing:-.006em;line-height:1;cursor:pointer;white-space:nowrap;text-decoration:none;transition:var(--transition-control),transform var(--duration-instant) var(--ease-standard);height:var(--control-h-md);padding:0 var(--control-pad-x-md)}
.v-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.v-btn:active:not(:disabled){transform:translateY(.5px)}
.v-btn--sm{height:var(--control-h-sm);padding:0 10px;font-size:var(--fs-caption);gap:var(--space-1-5);border-radius:var(--radius-sm)}
.v-btn--lg{height:var(--control-h-lg);padding:0 var(--control-pad-x-lg);font-size:var(--fs-body-md)}
.v-btn--xl{height:var(--control-h-xl);padding:0 var(--space-6);font-size:var(--fs-body-lg);border-radius:var(--radius-lg)}
.v-btn--pill{border-radius:var(--radius-pill)}
.v-btn--block{width:100%}
.v-btn--primary{background:var(--action-primary-bg);color:var(--action-primary-fg);box-shadow:var(--shadow-xs)}
.v-btn--primary:hover:not(:disabled){background:var(--action-primary-bg-hover)}
.v-btn--primary:active:not(:disabled){background:var(--action-primary-bg-active)}
.v-btn--secondary{background:var(--action-secondary-bg);color:var(--action-secondary-fg);border-color:var(--border-default);box-shadow:var(--shadow-xs)}
.v-btn--secondary:hover:not(:disabled){background:var(--action-secondary-bg-hover);border-color:var(--border-strong)}
.v-btn--secondary:active:not(:disabled){background:var(--action-secondary-bg-active)}
.v-btn--ghost{background:transparent;color:var(--text-secondary)}
.v-btn--ghost:hover:not(:disabled){background:var(--action-ghost-bg-hover);color:var(--text-primary)}
.v-btn--danger{background:var(--action-danger-bg);color:#fff}
.v-btn--danger:hover:not(:disabled){background:var(--action-danger-bg-hover)}
.v-btn--ai{background:var(--color-bg-ai-thinking);color:var(--color-text-ai-thinking);border-color:var(--color-border-ai-thinking)}
.v-btn--ai:hover:not(:disabled){background:var(--iris-100);border-color:var(--iris-400)}
.v-btn:disabled,.v-btn[aria-disabled="true"]{background:var(--action-disabled-bg);color:var(--action-disabled-fg);border-color:transparent;box-shadow:none;cursor:not-allowed}
.v-btn[data-loading="true"]{cursor:progress}
.v-btn[data-loading="true"] .v-btn__label{opacity:.75}

/* ── Icon button ── */
.v-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:var(--control-h-md);height:var(--control-h-md);border-radius:var(--radius-control);border:1px solid transparent;background:transparent;color:var(--text-secondary);cursor:pointer;transition:var(--transition-control)}
.v-iconbtn:hover:not(:disabled){background:var(--action-ghost-bg-hover);color:var(--text-primary)}
.v-iconbtn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.v-iconbtn--sm{width:var(--control-h-sm);height:var(--control-h-sm);border-radius:var(--radius-sm)}
.v-iconbtn--lg{width:var(--control-h-lg);height:var(--control-h-lg)}
.v-iconbtn--outline{border-color:var(--border-default);background:var(--surface-card)}
.v-iconbtn--solid{background:var(--action-primary-bg);color:#fff}
.v-iconbtn--solid:hover:not(:disabled){background:var(--action-primary-bg-hover);color:#fff}
.v-iconbtn--active{background:var(--surface-accent);color:var(--cobalt-700)}
.v-iconbtn:disabled{color:var(--action-disabled-fg);cursor:not-allowed}

/* ── Field shell (Input / Select / Textarea) ── */
.v-field{display:flex;flex-direction:column;gap:var(--space-1-5)}
.v-field__label{font-size:var(--fs-body-sm);font-weight:var(--fw-medium);color:var(--text-primary)}
.v-field__hint{font-size:var(--fs-caption);color:var(--text-tertiary)}
.v-field__error{font-size:var(--fs-caption);color:var(--crimson-600);display:flex;align-items:center;gap:var(--space-1-5)}
.v-input{width:100%;height:var(--control-h-md);padding:0 var(--control-pad-x-md);background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-control);font:var(--fw-regular) var(--fs-body-md)/1.4 var(--font-sans);color:var(--text-primary);transition:var(--transition-control)}
.v-input::placeholder{color:var(--text-disabled)}
.v-input:hover:not(:disabled):not(:focus){border-color:var(--border-strong)}
.v-input:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px var(--cobalt-100)}
.v-input:disabled{background:var(--surface-sunken);color:var(--text-disabled);cursor:not-allowed}
.v-input[data-invalid="true"]{border-color:var(--crimson-500)}
.v-input[data-invalid="true"]:focus{box-shadow:0 0 0 3px var(--crimson-100)}
.v-input--sm{height:var(--control-h-sm);font-size:var(--fs-body-sm);padding:0 10px}
.v-input--lg{height:var(--control-h-lg);padding:0 var(--space-4)}
.v-input--textarea{height:auto;min-height:88px;padding:10px var(--control-pad-x-md);line-height:var(--lh-body-md);resize:vertical}
.v-input-wrap{position:relative;display:flex;align-items:center}
.v-input-wrap .v-input{padding-left:34px}
.v-input-wrap__icon{position:absolute;left:11px;color:var(--text-tertiary);pointer-events:none;display:flex}

/* ── Select ── */
.v-select{appearance:none;background-image:none;padding-right:32px;cursor:pointer}
.v-select-wrap{position:relative;display:flex;align-items:center}
.v-select-wrap__chevron{position:absolute;right:11px;color:var(--text-tertiary);pointer-events:none;display:flex}

/* ── Checkbox / Radio / Switch ── */
.v-check{display:inline-flex;align-items:flex-start;gap:var(--space-2);cursor:pointer;font-size:var(--fs-body-sm);color:var(--text-primary);line-height:18px}
.v-check input{position:absolute;opacity:0;width:0;height:0}
.v-check__box{width:18px;height:18px;flex:none;border:1px solid var(--border-strong);border-radius:var(--radius-xs);background:var(--surface-card);display:flex;align-items:center;justify-content:center;color:transparent;transition:var(--transition-control)}
.v-check__box--radio{border-radius:var(--radius-circle)}
.v-check:hover .v-check__box{border-color:var(--cobalt-400)}
.v-check input:checked+.v-check__box{background:var(--action-primary-bg);border-color:var(--action-primary-bg);color:#fff}
.v-check input:focus-visible+.v-check__box{box-shadow:var(--focus-ring)}
.v-check input:disabled+.v-check__box{background:var(--action-disabled-bg);border-color:var(--border-subtle)}
.v-check[data-disabled="true"]{color:var(--text-disabled);cursor:not-allowed}
.v-switch{display:inline-flex;align-items:center;gap:var(--space-2-5,10px);cursor:pointer;font-size:var(--fs-body-sm);color:var(--text-primary)}
.v-switch input{position:absolute;opacity:0;width:0;height:0}
.v-switch__track{width:36px;height:20px;border-radius:var(--radius-pill);background:var(--n-300);position:relative;transition:background-color var(--duration-normal) var(--ease-standard);flex:none}
.v-switch__thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:var(--radius-circle);background:#fff;box-shadow:var(--shadow-xs);transition:transform var(--duration-normal) var(--ease-spring)}
.v-switch input:checked+.v-switch__track{background:var(--action-primary-bg)}
.v-switch input:checked+.v-switch__track .v-switch__thumb{transform:translateX(16px)}
.v-switch input:focus-visible+.v-switch__track{box-shadow:var(--focus-ring)}
.v-switch input:disabled+.v-switch__track{background:var(--n-200)}

/* ── Card ── */
.v-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--elevation-card);transition:var(--transition-surface),border-color var(--duration-normal) var(--ease-standard)}
.v-card--flat{box-shadow:none}
.v-card--sunken{background:var(--surface-sunken);box-shadow:none;border-color:transparent}
.v-card--interactive{cursor:pointer}
.v-card--interactive:hover{box-shadow:var(--elevation-card-hover);transform:translateY(-1px);border-color:var(--border-default)}
.v-card--interactive:active{transform:translateY(0)}
.v-card__body{padding:var(--space-5)}
.v-card__header{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.v-card__footer{padding:var(--space-3) var(--space-5);border-top:1px solid var(--border-subtle);display:flex;align-items:center;gap:var(--space-2)}

/* ── Badge & Tag ── */
.v-badge{display:inline-flex;align-items:center;gap:var(--space-1-5);height:20px;padding:0 var(--space-2);border-radius:var(--radius-sm);font-size:var(--fs-micro);font-weight:var(--fw-semibold);letter-spacing:.02em;text-transform:uppercase;background:var(--surface-sunken);color:var(--text-secondary);border:1px solid transparent}
.v-badge--neutral{background:var(--n-100);color:var(--n-700)}
.v-badge--accent{background:var(--cobalt-50);color:var(--cobalt-700)}
.v-badge--success{background:var(--jade-50);color:var(--jade-700)}
.v-badge--warning{background:var(--amber-50);color:var(--amber-700)}
.v-badge--danger{background:var(--crimson-50);color:var(--crimson-700)}
.v-badge--ai{background:var(--color-bg-ai-thinking);color:var(--color-text-ai-thinking)}
.v-badge--human{background:var(--color-bg-ai-human);color:var(--color-text-ai-human)}
.v-badge--outline{background:transparent;border-color:var(--border-default);color:var(--text-secondary)}
.v-tag{display:inline-flex;align-items:center;gap:var(--space-1-5);height:26px;padding:0 10px;border-radius:var(--radius-chip);background:var(--surface-card);border:1px solid var(--border-subtle);font-size:var(--fs-caption);color:var(--text-secondary);transition:var(--transition-control)}
.v-tag--removable{padding-right:var(--space-1)}
.v-tag__x{display:flex;border:0;background:transparent;color:var(--text-tertiary);cursor:pointer;padding:3px;border-radius:var(--radius-circle)}
.v-tag__x:hover{background:var(--n-100);color:var(--text-primary)}
.v-tag--selected{background:var(--cobalt-50);border-color:var(--cobalt-200);color:var(--cobalt-700)}
.v-tag--button{cursor:pointer}
.v-tag--button:hover{border-color:var(--border-strong);background:var(--n-25)}

/* ── Tabs ── */
.v-tabs{display:flex;align-items:center;gap:var(--space-1);border-bottom:1px solid var(--border-subtle)}
.v-tab{position:relative;background:transparent;border:0;padding:0 var(--space-3);height:38px;font:var(--fw-medium) var(--fs-body-sm)/1 var(--font-sans);color:var(--text-tertiary);cursor:pointer;transition:var(--transition-control)}
.v-tab:hover{color:var(--text-primary)}
.v-tab[aria-selected="true"]{color:var(--text-primary)}
.v-tab[aria-selected="true"]::after{content:"";position:absolute;left:var(--space-2);right:var(--space-2);bottom:-1px;height:2px;background:var(--action-primary-bg);border-radius:2px 2px 0 0}
.v-tabs--pill{border-bottom:0;background:var(--surface-sunken);padding:3px;border-radius:var(--radius-md);gap:2px;display:inline-flex}
.v-tabs--pill .v-tab{height:28px;border-radius:var(--radius-sm)}
.v-tabs--pill .v-tab[aria-selected="true"]{background:var(--surface-card);box-shadow:var(--shadow-xs)}
.v-tabs--pill .v-tab[aria-selected="true"]::after{display:none}

/* ── Dialog ── */
.v-dialog-scrim{position:fixed;inset:0;background:var(--surface-overlay);backdrop-filter:var(--blur-sm);display:flex;align-items:center;justify-content:center;padding:var(--space-6);z-index:var(--z-modal);animation:v-fade var(--duration-normal) var(--ease-standard)}
.v-dialog{width:100%;max-width:520px;background:var(--surface-card);border-radius:var(--radius-panel);box-shadow:var(--elevation-modal);animation:v-rise var(--duration-slow) var(--ease-entrance);overflow:hidden}
.v-dialog__header{padding:var(--space-5) var(--space-6) var(--space-3);display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4)}
.v-dialog__title{font-size:var(--fs-title-md);font-weight:var(--fw-semibold);letter-spacing:var(--ls-title-md)}
.v-dialog__desc{margin-top:var(--space-2);color:var(--text-secondary);font-size:var(--fs-body-md);max-width:var(--measure-prose)}
.v-dialog__body{padding:0 var(--space-6) var(--space-5)}
.v-dialog__footer{padding:var(--space-4) var(--space-6);background:var(--surface-subtle);border-top:1px solid var(--border-subtle);display:flex;justify-content:flex-end;gap:var(--space-2)}

/* ── Tooltip ── */
.v-tooltip-root{position:relative;display:inline-flex}
.v-tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--n-900);color:var(--n-25);font-size:var(--fs-caption);line-height:1.35;padding:6px 9px;border-radius:var(--radius-sm);white-space:nowrap;box-shadow:var(--elevation-popover);z-index:var(--z-tooltip);animation:v-fade var(--duration-fast) var(--ease-standard);pointer-events:none}
.v-tooltip__kbd{margin-left:6px;opacity:.6;font-family:var(--font-mono);font-size:10px}

/* ── Toast ── */
.v-toast{display:flex;align-items:flex-start;gap:var(--space-3);min-width:320px;max-width:420px;padding:var(--space-3) var(--space-4);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--elevation-toast);animation:v-rise var(--duration-slow) var(--ease-entrance)}
.v-toast__icon{margin-top:1px;flex:none;display:flex}
.v-toast__title{font-size:var(--fs-body-sm);font-weight:var(--fw-semibold)}
.v-toast__desc{font-size:var(--fs-body-sm);color:var(--text-secondary);margin-top:2px}
.v-toast--success .v-toast__icon{color:var(--jade-500)}
.v-toast--warning .v-toast__icon{color:var(--amber-500)}
.v-toast--danger .v-toast__icon{color:var(--crimson-500)}
.v-toast--ai .v-toast__icon{color:var(--ai-thinking)}

/* ── Callout ── */
.v-callout{display:flex;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--surface-subtle);font-size:var(--fs-body-sm);color:var(--text-secondary)}
.v-callout__icon{flex:none;margin-top:1px;color:var(--text-tertiary)}
.v-callout__title{font-weight:var(--fw-semibold);color:var(--text-primary);margin-bottom:2px}
.v-callout--info{background:var(--cobalt-50);border-color:var(--cobalt-100)}
.v-callout--info .v-callout__icon{color:var(--cobalt-600)}
.v-callout--warning{background:var(--amber-50);border-color:var(--amber-100)}
.v-callout--warning .v-callout__icon{color:var(--amber-600)}
.v-callout--danger{background:var(--crimson-50);border-color:var(--crimson-100)}
.v-callout--danger .v-callout__icon{color:var(--crimson-600)}
.v-callout--ai{background:var(--color-bg-ai-thinking);border-color:var(--color-border-ai-thinking)}
.v-callout--ai .v-callout__icon{color:var(--ai-thinking)}

/* ── Avatar ── */
.v-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-circle);background:var(--n-200);color:var(--n-700);font-weight:var(--fw-semibold);font-size:var(--fs-caption);overflow:hidden;flex:none}
.v-avatar img{width:100%;height:100%;object-fit:cover}
