/* Shared shadcn-faithful component styles for preview cards & UI kit.
   Pairs with colors_and_type.css. */

/* ---- Button ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  border-radius:var(--radius-md);font-size:14px;font-weight:500;font-family:var(--font-sans);
  height:36px;padding:0 16px;border:1px solid transparent;cursor:pointer;
  transition:background-color .15s,color .15s,box-shadow .15s,opacity .15s;outline:none;}
.btn svg{width:16px;height:16px;flex-shrink:0}
.btn:focus-visible{box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent);border-color:var(--ring)}
.btn:active{opacity:.85}
.btn-default{background:var(--primary);color:var(--primary-foreground)}
.btn-default:hover{background:color-mix(in oklab,var(--primary) 90%,transparent)}
.btn-secondary{background:var(--secondary);color:var(--secondary-foreground)}
.btn-secondary:hover{background:color-mix(in oklab,var(--secondary) 80%,transparent)}
.btn-outline{background:var(--background);border-color:var(--border);color:var(--foreground);box-shadow:var(--shadow-xs)}
.btn-outline:hover{background:var(--accent);color:var(--accent-foreground)}
.btn-ghost{background:transparent;color:var(--foreground)}
.btn-ghost:hover{background:var(--accent);color:var(--accent-foreground)}
.btn-destructive{background:var(--destructive);color:#fff}
.btn-destructive:hover{background:color-mix(in oklab,var(--destructive) 90%,transparent)}
.btn-link{background:transparent;color:var(--primary);text-underline-offset:4px;height:auto;padding:0}
.btn-link:hover{text-decoration:underline}
.btn-sm{height:32px;padding:0 12px;gap:6px;border-radius:var(--radius-md)}
.btn-lg{height:40px;padding:0 24px;border-radius:var(--radius-md)}
.btn-icon{width:36px;height:36px;padding:0}
.btn:disabled{pointer-events:none;opacity:.5}

/* ---- Badge ---- */
.badge{display:inline-flex;align-items:center;gap:4px;border-radius:var(--radius-full);
  padding:2px 9px;font-size:12px;font-weight:500;border:1px solid transparent;white-space:nowrap}
.badge svg{width:12px;height:12px}
.badge-default{background:var(--primary);color:var(--primary-foreground)}
.badge-secondary{background:var(--secondary);color:var(--secondary-foreground)}
.badge-destructive{background:var(--destructive);color:#fff}
.badge-outline{border-color:var(--border);color:var(--foreground)}

/* ---- Input ---- */
.input{height:36px;width:100%;min-width:0;border-radius:var(--radius-md);
  border:1px solid var(--input);background:transparent;padding:0 12px;font-size:14px;
  font-family:var(--font-sans);color:var(--foreground);box-shadow:var(--shadow-xs);
  transition:border-color .15s,box-shadow .15s;outline:none;box-sizing:border-box}
.input::placeholder{color:var(--muted-foreground)}
.input:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}
.label{font-size:14px;font-weight:500;color:var(--foreground);display:block;margin-bottom:8px}

/* ---- Select trigger ---- */
.select{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;
  height:36px;border-radius:var(--radius-md);border:1px solid var(--input);background:transparent;
  padding:0 12px;font-size:14px;box-shadow:var(--shadow-xs);color:var(--foreground);cursor:pointer;box-sizing:border-box}
.select svg{width:16px;height:16px;opacity:.5}

/* ---- Switch ---- */
.switch{display:inline-flex;align-items:center;width:32px;height:18px;border-radius:9999px;
  background:var(--input);border:1px solid transparent;box-shadow:var(--shadow-xs);
  padding:2px;cursor:pointer;transition:background-color .15s}
.switch[data-on="true"]{background:var(--primary)}
.switch .thumb{width:14px;height:14px;border-radius:50%;background:var(--background);
  transition:transform .15s;box-shadow:var(--shadow-sm)}
.switch[data-on="true"] .thumb{transform:translateX(14px)}

/* ---- Checkbox ---- */
.checkbox{width:16px;height:16px;border-radius:4px;border:1px solid var(--input);
  display:inline-grid;place-content:center;box-shadow:var(--shadow-xs);color:var(--primary-foreground)}
.checkbox[data-on="true"]{background:var(--primary);border-color:var(--primary)}
.checkbox svg{width:13px;height:13px;opacity:0}
.checkbox[data-on="true"] svg{opacity:1}

/* ---- Radio ---- */
.radio{width:16px;height:16px;border-radius:50%;border:1px solid var(--input);display:inline-grid;place-content:center}
.radio[data-on="true"]{border-color:var(--primary)}
.radio .dot{width:8px;height:8px;border-radius:50%;background:var(--primary);opacity:0}
.radio[data-on="true"] .dot{opacity:1}

/* ---- Card ---- */
.ui-card{background:var(--card);color:var(--card-foreground);border:1px solid var(--border);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);padding:24px;display:flex;flex-direction:column;gap:6px}
.ui-card .ct{font-weight:600;line-height:1.1}
.ui-card .cd{font-size:14px;color:var(--muted-foreground)}

/* ---- Tabs ---- */
.tabs{display:inline-flex;align-items:center;gap:0;background:var(--muted);border-radius:var(--radius-lg);padding:3px}
.tab{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 12px;
  border-radius:var(--radius-md);font-size:14px;font-weight:500;color:color-mix(in oklab,var(--foreground) 60%,transparent);
  border:1px solid transparent;cursor:pointer;transition:all .15s}
.tab[data-on="true"]{background:var(--background);color:var(--foreground);box-shadow:var(--shadow-sm)}