/* Components driven purely by tokens.css variables. In a layer, so any unlayered CSS in your site wins. */
@layer ds {
  [data-theme="light"] { color-scheme: light }
  [data-theme="dark"] { color-scheme: dark }
  *, *::before, *::after { box-sizing: border-box }
  body { margin: 0; font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--color-fg); background: var(--color-bg); -webkit-font-smoothing: antialiased }

  h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 calc(var(--spacing) * 3); text-wrap: balance }
  h1 { font-size: var(--text-5xl) } h2 { font-size: var(--text-4xl) } h3 { font-size: var(--text-3xl) }
  h4 { font-size: var(--text-2xl) } h5 { font-size: var(--text-xl) } h6 { font-size: var(--text-lg) }
  p { margin: 0 0 calc(var(--spacing) * 4); text-wrap: pretty }
  .lead { font-size: var(--text-lg); color: var(--color-muted) }
  small, .muted { color: var(--color-muted) }
  a { color: var(--color-primary); text-underline-offset: 3px }
  code, kbd, pre { font-family: var(--font-mono); font-size: 0.9em }
  code, kbd { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.1em 0.4em }
  kbd { border-bottom-width: 2px }
  pre { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: calc(var(--spacing) * 4); overflow: auto }
  pre code { background: none; border: 0; padding: 0 }
  blockquote { margin: 0 0 calc(var(--spacing) * 4); padding-left: calc(var(--spacing) * 4); border-left: 3px solid var(--color-primary); color: var(--color-muted) }
  hr { border: 0; border-top: 1px solid var(--color-border); margin: calc(var(--spacing) * 6) 0 }
  :focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px }

  /* Buttons */
  .btn {
    --solid: var(--color-primary); --on: var(--color-on-primary);
    display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 4); font: 600 var(--text-sm)/1.2 var(--font-body);
    border: 1px solid transparent; border-radius: var(--radius-md); background: var(--solid); color: var(--on);
    cursor: pointer; text-decoration: none; transition: filter .15s, background-color .15s, transform .1s;
  }
  .btn:hover { filter: brightness(1.08) }
  .btn:active { transform: translateY(1px) }
  .btn:disabled { opacity: .5; cursor: not-allowed; filter: none; transform: none }
  .btn-outline { background: transparent; color: var(--color-fg); border-color: var(--color-border) }
  .btn-ghost { background: transparent; color: var(--color-fg) }
  .btn-soft { background: var(--soft, var(--color-primary-soft)); color: var(--strong, var(--color-primary-strong)) }
  .btn-outline:hover, .btn-ghost:hover { background: var(--color-surface); filter: none }
  .btn-sm { padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3); font-size: var(--text-xs) }
  .btn-lg { padding: calc(var(--spacing) * 3.5) calc(var(--spacing) * 6); font-size: var(--text-base) }

  /* Forms */
  .label { display: block; font-size: var(--text-sm); font-weight: 500; margin-bottom: calc(var(--spacing) * 1.5) }
  .field { margin-bottom: calc(var(--spacing) * 4) }
  .hint { font-size: var(--text-xs); color: var(--color-muted); margin-top: calc(var(--spacing) * 1) }
  .input {
    width: 100%; padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3); font: inherit; font-size: var(--text-sm);
    color: var(--color-fg); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md);
    transition: border-color .15s, box-shadow .15s;
  }
  .input:focus { outline: none; border-color: var(--color-ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-ring) 25%, transparent) }
  .input[aria-invalid="true"] { border-color: var(--color-danger) }
  .input:disabled { opacity: .6; background: var(--color-surface) }
  textarea.input { min-height: 6rem; resize: vertical }
  input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--color-primary) }
  .check { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 2); font-size: var(--text-sm); cursor: pointer }
  .switch { appearance: none; margin: 0; width: 2.5rem; height: 1.4rem; border-radius: var(--radius-full); background: var(--color-border); position: relative; cursor: pointer; transition: background-color .2s }
  .switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.4rem - 6px); aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: translate .2s cubic-bezier(.2, .8, .2, 1) }
  .switch:checked { background: var(--color-primary) }
  .switch:checked::before { translate: 1.1rem 0 }

  /* Badges & alerts */
  .badge { display: inline-flex; align-items: center; padding: calc(var(--spacing) * .5) calc(var(--spacing) * 2.5); font-size: var(--text-xs); font-weight: 600; line-height: 1.5; border-radius: var(--radius-full); background: var(--soft, var(--color-neutral-soft)); color: var(--strong, var(--color-neutral-strong)) }
  .alert { padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4); border-radius: var(--radius-md); font-size: var(--text-sm); background: var(--soft, var(--color-neutral-soft)); color: var(--strong, var(--color-neutral-strong)); border: 1px solid color-mix(in oklab, var(--strong, var(--color-neutral-strong)) 20%, transparent) }
  .alert strong { display: block; margin-bottom: 2px }

  /* Color modifiers: .btn.is-danger, .badge.is-success, .alert.is-warning ... */
  .is-primary   { --solid: var(--color-primary);   --on: var(--color-on-primary);   --soft: var(--color-primary-soft);   --strong: var(--color-primary-strong) }
  .is-secondary { --solid: var(--color-secondary); --on: var(--color-on-secondary); --soft: var(--color-secondary-soft); --strong: var(--color-secondary-strong) }
  .is-accent    { --solid: var(--color-accent);    --on: var(--color-on-accent);    --soft: var(--color-accent-soft);    --strong: var(--color-accent-strong) }
  .is-neutral   { --solid: var(--color-neutral);   --on: var(--color-on-neutral);   --soft: var(--color-neutral-soft);   --strong: var(--color-neutral-strong) }
  .is-success   { --solid: var(--color-success);   --on: var(--color-on-success);   --soft: var(--color-success-soft);   --strong: var(--color-success-strong) }
  .is-warning   { --solid: var(--color-warning);   --on: var(--color-on-warning);   --soft: var(--color-warning-soft);   --strong: var(--color-warning-strong) }
  .is-danger    { --solid: var(--color-danger);    --on: var(--color-on-danger);    --soft: var(--color-danger-soft);    --strong: var(--color-danger-strong) }
  .is-info      { --solid: var(--color-info);      --on: var(--color-on-info);      --soft: var(--color-info-soft);      --strong: var(--color-info-strong) }

  /* Surfaces */
  .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: calc(var(--spacing) * 6); box-shadow: var(--shadow-sm) }
  .card > :last-child { margin-bottom: 0 }
  dialog { border: 0; border-radius: var(--radius-lg); padding: calc(var(--spacing) * 6); background: var(--color-bg); color: var(--color-fg); box-shadow: var(--shadow-lg); max-width: min(32rem, 100% - 2rem) }
  dialog::backdrop { background: rgb(0 0 0 / .45) }
  details { border-bottom: 1px solid var(--color-border); padding: calc(var(--spacing) * 3) 0 }
  summary { cursor: pointer; font-weight: 600 }
  details > :not(summary) { margin: calc(var(--spacing) * 2) 0 0; color: var(--color-muted) }

  /* Data */
  .table { width: 100%; border-collapse: collapse; font-size: var(--text-sm) }
  .table th, .table td { padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3); text-align: left; border-bottom: 1px solid var(--color-border) }
  .table th { color: var(--color-muted); font-weight: 600; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em }
  .avatar { display: inline-grid; place-items: center; width: 2.5rem; aspect-ratio: 1; border-radius: var(--radius-full); background: var(--color-primary-soft); color: var(--color-primary-strong); font-weight: 600; font-size: var(--text-sm) }
  progress { width: 100%; height: .5rem }

  /* Navigation */
  .tabs { display: flex; gap: calc(var(--spacing) * 1); border-bottom: 1px solid var(--color-border) }
  .tab { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3); font: 500 var(--text-sm) var(--font-body); color: var(--color-muted); cursor: pointer }
  .tab[aria-selected="true"] { color: var(--color-fg); border-color: var(--color-primary) }
  .nav { display: flex; gap: calc(var(--spacing) * 5); font-size: var(--text-sm) }
  .nav a { color: var(--color-muted); text-decoration: none }
  .nav a:hover, .nav a[aria-current] { color: var(--color-fg) }
  .breadcrumb { display: flex; gap: calc(var(--spacing) * 2); font-size: var(--text-sm); color: var(--color-muted); list-style: none; padding: 0; margin: 0 }
  .breadcrumb li + li::before { content: "/"; margin-right: calc(var(--spacing) * 2); opacity: .5 }
  .breadcrumb a { color: inherit }

  /* Feedback */
  [data-tip] { position: relative }
  [data-tip]:hover::after, [data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; translate: -50% 0; white-space: nowrap; background: var(--color-fg); color: var(--color-bg); font: 500 var(--text-xs)/1.4 var(--font-body); padding: 4px 8px; border-radius: var(--radius-sm); pointer-events: none; z-index: 10 }
  .spinner { width: 1.25rem; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--color-border); border-top-color: var(--color-primary); animation: ds-spin .7s linear infinite }
  .skeleton { background: linear-gradient(90deg, var(--color-surface), var(--color-border), var(--color-surface)); background-size: 200% 100%; border-radius: var(--radius-sm); animation: ds-shimmer 1.4s ease-in-out infinite }
  @keyframes ds-spin { to { rotate: 1turn } }
  @keyframes ds-shimmer { from { background-position: 100% 0 } to { background-position: -100% 0 } }
  @media (prefers-reduced-motion: reduce) { .spinner, .skeleton { animation-duration: 3s } }
}