/* Craft V1 UI Primitives v0.1 — only semantic variants from the design spec. */

.ui-button{
  min-height:var(--ds-control-height);padding:0 0 6px;border:0;border-radius:0;background:transparent;
  color:var(--ds-ink);font:600 14px/1 var(--ds-font-body);letter-spacing:.06em;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-space-2);white-space:nowrap;
  transition:color var(--ds-duration-fast) var(--ds-ease-standard),border-color var(--ds-duration-fast) var(--ds-ease-standard),transform var(--ds-duration-fast) var(--ds-ease-standard),background-color var(--ds-duration-fast) var(--ds-ease-standard)
}
.ui-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ui-button--primary{border-bottom:1px solid var(--ds-accent)}
.ui-button--primary:hover{color:var(--ds-accent-hover);border-bottom-color:var(--ds-ink)}
.ui-button--primary:active{color:var(--ds-accent-pressed);transform:translateY(1px)}
.ui-button--secondary{color:var(--ds-ink-dim)}
.ui-button--secondary:hover{color:var(--ds-ink)}
.ui-button--icon{width:var(--ds-hit-target);height:var(--ds-hit-target);min-height:var(--ds-hit-target);padding:0;color:var(--ds-ink-dim);border-radius:var(--ds-radius-sm)}
.ui-button--icon:hover{color:var(--ds-accent);background:var(--ds-accent-soft)}
.ui-button--toggle{min-height:var(--ds-control-height-compact);padding:0 var(--ds-space-2) 5px;color:var(--ds-ink-dim);border-bottom:2px solid transparent}
.ui-button--toggle:hover{color:var(--ds-ink)}
.ui-button--toggle[aria-pressed="true"],.ui-button--toggle[aria-selected="true"]{color:var(--ds-accent);border-bottom-color:var(--ds-accent)}
.ui-button--danger{color:var(--ds-danger);border-bottom:1px solid var(--ds-danger)}
.ui-button--danger:hover{background:var(--ds-danger-soft)}
.ui-button:focus-visible{outline:2px solid var(--ds-focus);outline-offset:3px}
.ui-button:disabled,.ui-button[aria-disabled="true"]{opacity:.35;cursor:not-allowed;pointer-events:none;transform:none}
.ui-button-group{display:flex;align-items:center;gap:var(--ds-space-5)}

.ui-field{display:grid;gap:var(--ds-space-1);min-width:0}
.ui-field__label{color:var(--ds-ink-dim);font:var(--ds-type-label);letter-spacing:.1em}
.ui-field input,.ui-field textarea,.ui-field select{
  width:100%;min-height:var(--ds-control-height);padding:8px 0;border:0;border-bottom:1px solid var(--ds-hairline);border-radius:0;
  background:transparent;color:var(--ds-ink);font:var(--ds-type-body);outline:none;
  transition:border-color var(--ds-duration-fast) var(--ds-ease-standard),box-shadow var(--ds-duration-fast) var(--ds-ease-standard)
}
.ui-field textarea{min-height:88px;resize:vertical}
.ui-field input::placeholder,.ui-field textarea::placeholder{color:var(--ds-ink-faint)}
.ui-field input:focus,.ui-field textarea:focus,.ui-field select:focus{border-bottom-color:var(--ds-accent);box-shadow:0 8px 14px -15px var(--ds-accent)}
.ui-field input:focus-visible,.ui-field textarea:focus-visible,.ui-field select:focus-visible{outline:2px solid var(--ds-focus);outline-offset:3px}
.ui-field__hint{color:var(--ds-ink-faint);font:var(--ds-type-micro);letter-spacing:.03em}
.ui-field[data-state="error"] input,.ui-field[data-state="error"] textarea,.ui-field[data-state="error"] select{border-bottom-color:var(--ds-danger)}
.ui-field[data-state="error"] .ui-field__hint{color:var(--ds-danger)}

.ui-glass{
  position:relative;isolation:isolate;overflow:hidden;border:0;border-radius:var(--ds-radius-panel);
  background:var(--ds-glass-neutral);backdrop-filter:blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate)) contrast(var(--ds-glass-contrast));
  -webkit-backdrop-filter:blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate)) contrast(var(--ds-glass-contrast));
  box-shadow:var(--ds-shadow-panel)
}
.ui-glass__optics{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
.ui-glass__optics .ui-optics-dark{mix-blend-mode:multiply}
.ui-glass__optics .ui-optics-neutral{mix-blend-mode:soft-light}
.ui-glass__optics .ui-optics-light{mix-blend-mode:screen}
.ui-glass>:not(.ui-glass__optics){position:relative;z-index:1}

.ui-status{display:inline-flex;align-items:center;gap:var(--ds-space-2);color:var(--ds-ink-dim);font:var(--ds-type-micro);letter-spacing:.08em}
.ui-status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ds-hairline)}
.ui-status[data-state="live"]::before,.ui-status[data-state="success"]::before{background:var(--ds-accent);box-shadow:0 0 8px rgb(90 187 180 / .45)}
.ui-status[data-state="warning"]::before{background:var(--ds-focus)}
.ui-status[data-state="danger"]::before{background:var(--ds-danger)}

.ui-tooltip{position:relative}
.ui-tooltip::after{
  content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);z-index:var(--ds-z-toast);
  padding:6px 9px;background:rgb(4 10 18 / .92);color:var(--ds-ink);font:var(--ds-type-micro);letter-spacing:.04em;
  border-radius:var(--ds-radius-sm);white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--ds-duration-fast) var(--ds-ease-standard),transform var(--ds-duration-fast) var(--ds-ease-standard),visibility 0s linear var(--ds-duration-fast)
}
.ui-tooltip:hover::after,.ui-tooltip:focus-within::after{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}

.ui-toast{
  position:fixed;top:var(--ds-safe-top);left:50%;z-index:var(--ds-z-toast);transform:translate(-50%,-12px);
  padding:10px 16px;border:0;border-bottom:1px solid var(--ds-accent);border-radius:0;background:rgb(4 10 18 / .78);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--ds-ink);font:var(--ds-type-body);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--ds-duration-base) var(--ds-ease-standard),transform var(--ds-duration-base) var(--ds-ease-standard),visibility 0s linear var(--ds-duration-base)
}
.ui-toast.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
.ui-toast[data-state="danger"]{border-bottom-color:var(--ds-danger)}

.ui-overlay{padding:var(--ds-space-8);color:var(--ds-ink)}
dialog.ui-overlay{margin:auto;max-width:min(520px,calc(100vw - 32px));border:0}
dialog.ui-overlay::backdrop{background:rgb(4 10 18 / .46);backdrop-filter:blur(3px)}
.ui-overlay__title{font:var(--ds-type-title);margin-bottom:var(--ds-space-3)}
.ui-overlay__body{color:var(--ds-ink-dim);font:var(--ds-type-body)}
.ui-overlay__actions{display:flex;justify-content:flex-end;gap:var(--ds-space-5);margin-top:var(--ds-space-6)}

@media (max-width:767px){
  .ui-overlay{padding:var(--ds-space-6)}
  .ui-button-group{gap:var(--ds-space-4)}
}

@media (prefers-reduced-motion:reduce){
  .ui-button,.ui-field input,.ui-field textarea,.ui-field select,.ui-tooltip::after,.ui-toast{transition:none!important}
}