/* shadcn/ui — component styles.
   Semantic classes that mirror the New York registry's Tailwind output, expressed
   against the design tokens so components work anywhere styles.css is linked.
   Consumers get these by linking the one stylesheet; JSX components apply the class
   names + data-* variant attributes. */

/* ---------- base ---------- */
.ds-root, .ds-scope {
  font-family: var(--font-sans);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}
.ds-scope *, .ds-scope *::before, .ds-scope *::after { box-sizing: border-box; }
.ds-scope ::selection { background: var(--selection); color: var(--selection-foreground); }

/* ---------- Button ---------- */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2);
  flex-shrink: 0; white-space: nowrap; cursor: pointer; user-select: none;
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--font-weight-medium);
  line-height: 1.25rem; border: 1px solid transparent; border-radius: var(--radius-md);
  height: 2.25rem; padding: 0 1rem; transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, opacity .15s;
  outline: none;
}
.ds-btn svg { width: 1rem; height: 1rem; flex-shrink: 0; pointer-events: none; }
.ds-btn:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.ds-btn:disabled { pointer-events: none; opacity: .5; }
.ds-btn:active { opacity: .9; }
.ds-btn[data-variant="default"] { background: var(--primary); color: var(--primary-foreground); }
.ds-btn[data-variant="default"]:hover { background: color-mix(in oklab, var(--primary) 90%, transparent); }
.ds-btn[data-variant="destructive"] { background: var(--destructive); color: #fff; }
.ds-btn[data-variant="destructive"]:hover { background: color-mix(in oklab, var(--destructive) 90%, transparent); }
.ds-btn[data-variant="destructive"]:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent); }
.ds-btn[data-variant="outline"] { background: var(--background); border-color: var(--border); box-shadow: var(--shadow-xs); }
.ds-btn[data-variant="outline"]:hover { background: var(--accent); color: var(--accent-foreground); }
.ds-btn[data-variant="secondary"] { background: var(--secondary); color: var(--secondary-foreground); }
.ds-btn[data-variant="secondary"]:hover { background: color-mix(in oklab, var(--secondary) 80%, transparent); }
.ds-btn[data-variant="ghost"] { background: transparent; }
.ds-btn[data-variant="ghost"]:hover { background: var(--accent); color: var(--accent-foreground); }
.ds-btn[data-variant="link"] { background: transparent; color: var(--primary); text-underline-offset: 4px; height: auto; padding: 0; }
.ds-btn[data-variant="link"]:hover { text-decoration: underline; }
.ds-btn[data-size="sm"] { height: 2rem; padding: 0 .75rem; gap: var(--spacing-1-5); border-radius: var(--radius-md); }
.ds-btn[data-size="lg"] { height: 2.5rem; padding: 0 1.5rem; border-radius: var(--radius-md); }
.ds-btn[data-size="icon"] { width: 2.25rem; height: 2.25rem; padding: 0; }
.ds-btn[data-size="icon-sm"] { width: 2rem; height: 2rem; padding: 0; }

/* ---------- Badge ---------- */
.ds-badge {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-1);
  width: fit-content; white-space: nowrap; overflow: hidden;
  border: 1px solid transparent; border-radius: var(--radius-full);
  padding: 2px .5rem; font-size: var(--text-xs); line-height: 1rem; font-weight: var(--font-weight-medium);
}
.ds-badge svg { width: .75rem; height: .75rem; }
.ds-badge[data-variant="default"] { background: var(--primary); color: var(--primary-foreground); }
.ds-badge[data-variant="secondary"] { background: var(--secondary); color: var(--secondary-foreground); }
.ds-badge[data-variant="destructive"] { background: var(--destructive); color: #fff; }
.ds-badge[data-variant="outline"] { border-color: var(--border); color: var(--foreground); }

/* ---------- Card ---------- */
.ds-card {
  display: flex; flex-direction: column; gap: var(--spacing-6);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--card); color: var(--card-foreground);
  padding: var(--spacing-6) 0; box-shadow: var(--shadow-sm);
}
.ds-card-header { display: grid; grid-auto-rows: min-content; gap: var(--spacing-1-5); padding: 0 var(--spacing-6); }
.ds-card-header[data-action] { grid-template-columns: 1fr auto; }
.ds-card-title { font-weight: var(--font-weight-semibold); line-height: 1; }
.ds-card-description { font-size: var(--text-sm); color: var(--muted-foreground); }
.ds-card-action { grid-column: 2; grid-row: 1 / span 2; align-self: start; justify-self: end; }
.ds-card-content { padding: 0 var(--spacing-6); }
.ds-card-footer { display: flex; align-items: center; padding: 0 var(--spacing-6); }

/* ---------- Input / Textarea ---------- */
.ds-input, .ds-textarea {
  width: 100%; min-width: 0; font-family: var(--font-sans); font-size: var(--text-sm);
  color: var(--foreground); background: transparent;
  border: 1px solid var(--input); border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs); outline: none; transition: color .15s, box-shadow .15s, border-color .15s;
}
.ds-input { height: 2.25rem; padding: var(--spacing-1) var(--spacing-3); }
.ds-textarea { min-height: 4rem; padding: var(--spacing-2) var(--spacing-3); line-height: 1.4; resize: vertical; }
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--muted-foreground); }
.ds-input:focus-visible, .ds-textarea:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.ds-input:disabled, .ds-textarea:disabled { cursor: not-allowed; opacity: .5; }
.ds-input[aria-invalid="true"], .ds-textarea[aria-invalid="true"] { border-color: var(--destructive); box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent); }

/* ---------- Label ---------- */
.ds-label { display: inline-flex; align-items: center; gap: var(--spacing-2); font-size: var(--text-sm); line-height: 1; font-weight: var(--font-weight-medium); user-select: none; }

/* ---------- Checkbox ---------- */
.ds-checkbox {
  appearance: none; width: 1rem; height: 1rem; flex-shrink: 0; cursor: pointer; position: relative;
  border: 1px solid var(--input); border-radius: 4px; box-shadow: var(--shadow-xs);
  transition: box-shadow .15s, background-color .15s, border-color .15s; outline: none;
}
.ds-checkbox:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.ds-checkbox:checked { background: var(--primary); border-color: var(--primary); }
.ds-checkbox:checked::after { content: ""; position: absolute; inset: 0; background: var(--primary-foreground);
  -webkit-mask: no-repeat center/70% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  mask: no-repeat center/70% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.ds-checkbox:disabled { cursor: not-allowed; opacity: .5; }

/* ---------- Radio ---------- */
.ds-radio-group { display: grid; gap: var(--spacing-3); }
.ds-radio {
  appearance: none; width: 1rem; height: 1rem; flex-shrink: 0; cursor: pointer; position: relative;
  border: 1px solid var(--input); border-radius: var(--radius-full); box-shadow: var(--shadow-xs);
  transition: box-shadow .15s, border-color .15s; outline: none;
}
.ds-radio:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.ds-radio:checked { border-color: var(--primary); }
.ds-radio:checked::after { content: ""; position: absolute; top: 50%; left: 50%; width: .5rem; height: .5rem; transform: translate(-50%,-50%); border-radius: 50%; background: var(--primary); }
.ds-radio:disabled { cursor: not-allowed; opacity: .5; }

/* ---------- Switch ---------- */
.ds-switch {
  appearance: none; position: relative; cursor: pointer; flex-shrink: 0;
  width: 2rem; height: 1.15rem; border: 1px solid transparent; border-radius: var(--radius-full);
  background: var(--input); box-shadow: var(--shadow-xs); transition: background-color .15s, box-shadow .15s; outline: none;
}
.ds-switch:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.ds-switch:checked { background: var(--primary); }
.ds-switch::after { content: ""; position: absolute; top: 50%; left: 2px; width: 1rem; height: 1rem; transform: translateY(-50%); border-radius: 50%; background: var(--background); transition: transform .15s; }
.ds-switch:checked::after { transform: translate(calc(100% - 2px), -50%); }
.ds-switch:disabled { cursor: not-allowed; opacity: .5; }

/* ---------- Select (styled native) ---------- */
.ds-select {
  appearance: none; display: inline-flex; align-items: center; width: fit-content; min-width: 10rem;
  font-family: var(--font-sans); font-size: var(--text-sm); color: var(--foreground);
  height: 2.25rem; padding: 0 2rem 0 var(--spacing-3);
  background: transparent; border: 1px solid var(--input); border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs); cursor: pointer; outline: none; transition: box-shadow .15s, border-color .15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .625rem center;
}
.ds-select:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.ds-select:disabled { cursor: not-allowed; opacity: .5; }

/* ---------- Toggle ---------- */
.ds-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2);
  height: 2.25rem; min-width: 2.25rem; padding: 0 var(--spacing-2); cursor: pointer;
  font-size: var(--text-sm); font-weight: var(--font-weight-medium); border-radius: var(--radius-md);
  border: 1px solid transparent; background: transparent; color: var(--foreground);
  transition: background-color .15s, color .15s, box-shadow .15s; outline: none;
}
.ds-toggle svg { width: 1rem; height: 1rem; }
.ds-toggle:hover { background: var(--muted); color: var(--muted-foreground); }
.ds-toggle:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.ds-toggle[data-variant="outline"] { border-color: var(--input); box-shadow: var(--shadow-xs); }
.ds-toggle[data-state="on"] { background: var(--accent); color: var(--accent-foreground); }
.ds-toggle:disabled { pointer-events: none; opacity: .5; }

/* ---------- Alert ---------- */
.ds-alert {
  position: relative; display: grid; grid-template-columns: 0 1fr; align-items: start; row-gap: 2px;
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--spacing-3) var(--spacing-4); font-size: var(--text-sm);
  background: var(--card); color: var(--card-foreground);
}
.ds-alert:has(svg) { grid-template-columns: calc(var(--spacing) * 4) 1fr; column-gap: var(--spacing-3); }
.ds-alert > svg { width: 1rem; height: 1rem; transform: translateY(2px); color: currentColor; }
.ds-alert[data-variant="destructive"] { color: var(--destructive); }
.ds-alert-title { grid-column: 2; min-height: 1rem; font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-tight); }
.ds-alert-description { grid-column: 2; display: grid; gap: var(--spacing-1); font-size: var(--text-sm); color: var(--muted-foreground); }
.ds-alert[data-variant="destructive"] .ds-alert-description { color: color-mix(in oklab, var(--destructive) 90%, transparent); }

/* ---------- Avatar ---------- */
.ds-avatar { position: relative; display: inline-flex; flex-shrink: 0; width: 2rem; height: 2rem; overflow: hidden; border-radius: var(--radius-full); user-select: none; }
.ds-avatar[data-size="sm"] { width: 1.5rem; height: 1.5rem; }
.ds-avatar[data-size="lg"] { width: 2.5rem; height: 2.5rem; }
.ds-avatar img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.ds-avatar-fallback { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; background: var(--muted); color: var(--muted-foreground); font-size: var(--text-sm); }
.ds-avatar-group { display: inline-flex; }
.ds-avatar-group .ds-avatar { margin-left: -.5rem; box-shadow: 0 0 0 2px var(--background); }
.ds-avatar-group .ds-avatar:first-child { margin-left: 0; }

/* ---------- Separator ---------- */
.ds-separator { flex-shrink: 0; background: var(--border); }
.ds-separator[data-orientation="horizontal"] { height: 1px; width: 100%; }
.ds-separator[data-orientation="vertical"] { width: 1px; height: 100%; align-self: stretch; }

/* ---------- Skeleton ---------- */
.ds-skeleton { background: var(--accent); border-radius: var(--radius-md); animation: ds-pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes ds-pulse { 50% { opacity: .5; } }

/* ---------- Progress ---------- */
.ds-progress { position: relative; height: .5rem; width: 100%; overflow: hidden; border-radius: var(--radius-full); background: color-mix(in oklab, var(--primary) 20%, transparent); }
.ds-progress-indicator { height: 100%; background: var(--primary); border-radius: inherit; transition: width .3s ease; }

/* ---------- Tooltip (static demo) ---------- */
.ds-tooltip { display: inline-flex; align-items: center; width: fit-content; background: var(--foreground); color: var(--background); border-radius: var(--radius-md); padding: var(--spacing-1-5) var(--spacing-3); font-size: var(--text-xs); box-shadow: var(--shadow-md); }

/* ---------- Kbd ---------- */
.ds-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .375rem; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-weight-medium); color: var(--muted-foreground); background: var(--muted); border-radius: var(--radius-sm); }

/* ---------- Tabs ---------- */
.ds-tabs { display: flex; flex-direction: column; gap: var(--spacing-2); }
.ds-tabs-list { display: inline-flex; width: fit-content; align-items: center; justify-content: center; height: 2.25rem; padding: 3px; border-radius: var(--radius-lg); background: var(--muted); color: var(--muted-foreground); }
.ds-tabs-trigger {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-1-5);
  height: calc(100% - 1px); flex: 1; padding: var(--spacing-1) var(--spacing-2); cursor: pointer;
  font-size: var(--text-sm); font-weight: var(--font-weight-medium); white-space: nowrap;
  color: color-mix(in oklab, var(--foreground) 60%, transparent);
  border: 1px solid transparent; border-radius: var(--radius-md); background: transparent;
  transition: color .15s, background-color .15s, box-shadow .15s; outline: none;
}
.ds-tabs-trigger:hover { color: var(--foreground); }
.ds-tabs-trigger[data-state="active"] { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-sm); }
.ds-tabs-content { flex: 1; outline: none; }

/* ---------- Accordion ---------- */
.ds-accordion { width: 100%; }
.ds-accordion-item { border-bottom: 1px solid var(--border); }
.ds-accordion-item:last-child { border-bottom: 0; }
.ds-accordion-trigger {
  display: flex; flex: 1; width: 100%; align-items: center; justify-content: space-between; gap: var(--spacing-4);
  padding: var(--spacing-4) 0; cursor: pointer; text-align: left; font-size: var(--text-sm); font-weight: var(--font-weight-medium);
  background: transparent; border: none; color: var(--foreground); transition: color .15s; outline: none;
}
.ds-accordion-trigger:hover { text-decoration: underline; }
.ds-accordion-trigger svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--muted-foreground); transition: transform .2s; }
.ds-accordion-trigger[data-state="open"] svg { transform: rotate(180deg); }
.ds-accordion-content { overflow: hidden; font-size: var(--text-sm); color: var(--muted-foreground); }
.ds-accordion-content > div { padding: 0 0 var(--spacing-4); }

/* ---------- Table ---------- */
.ds-table-container { position: relative; width: 100%; overflow-x: auto; }
.ds-table { width: 100%; caption-side: bottom; border-collapse: collapse; font-size: var(--text-sm); }
.ds-table thead tr { border-bottom: 1px solid var(--border); }
.ds-table tbody tr { border-bottom: 1px solid var(--border); transition: background-color .15s; }
.ds-table tbody tr:last-child { border-bottom: 0; }
.ds-table tbody tr:hover { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.ds-table th { height: 2.5rem; padding: 0 var(--spacing-2); text-align: left; vertical-align: middle; font-weight: var(--font-weight-medium); white-space: nowrap; color: var(--foreground); }
.ds-table td { padding: var(--spacing-2); vertical-align: middle; white-space: nowrap; }
.ds-table tfoot { border-top: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 50%, transparent); font-weight: var(--font-weight-medium); }
.ds-table caption { margin-top: var(--spacing-4); color: var(--muted-foreground); }

/* ---------- Menu surface (dropdown / select content, static) ---------- */
.ds-menu { min-width: 8rem; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--popover); color: var(--popover-foreground); padding: var(--spacing-1); box-shadow: var(--shadow-md); }
.ds-menu-label { padding: var(--spacing-1-5) var(--spacing-2); font-size: var(--text-sm); font-weight: var(--font-weight-medium); }
.ds-menu-item { display: flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-1-5) var(--spacing-2); border-radius: var(--radius-sm); font-size: var(--text-sm); cursor: default; user-select: none; }
.ds-menu-item svg { width: 1rem; height: 1rem; color: var(--muted-foreground); }
.ds-menu-item:hover { background: var(--accent); color: var(--accent-foreground); }
.ds-menu-item[data-variant="destructive"] { color: var(--destructive); }
.ds-menu-item[data-variant="destructive"]:hover { background: color-mix(in oklab, var(--destructive) 10%, transparent); }
.ds-menu-shortcut { margin-left: auto; font-size: var(--text-xs); letter-spacing: var(--tracking-widest); color: var(--muted-foreground); }
.ds-menu-separator { height: 1px; margin: var(--spacing-1) calc(-1 * var(--spacing-1)); background: var(--border); }

/* ---------- Dialog (static demo) ---------- */
.ds-dialog-overlay { position: absolute; inset: 0; background: rgb(0 0 0 / .5); border-radius: inherit; }
.ds-dialog { position: relative; display: grid; gap: var(--spacing-4); width: 100%; max-width: 32rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--background); padding: var(--spacing-6); box-shadow: var(--shadow-lg); }
.ds-dialog-header { display: flex; flex-direction: column; gap: var(--spacing-2); }
.ds-dialog-title { font-size: var(--text-lg); line-height: 1; font-weight: var(--font-weight-semibold); }
.ds-dialog-description { font-size: var(--text-sm); color: var(--muted-foreground); }
.ds-dialog-footer { display: flex; justify-content: flex-end; gap: var(--spacing-2); }
.ds-dialog-close { position: absolute; top: var(--spacing-4); right: var(--spacing-4); opacity: .7; cursor: pointer; background: none; border: none; color: var(--foreground); }
.ds-dialog-close:hover { opacity: 1; }

/* ---------- link defaults ---------- */
a { color: var(--primary); text-underline-offset: 4px; }
a:hover { text-decoration: underline; }