@layer sanchika-primitives {
  :where(.sk-button, .sk-card, .sk-badge, .sk-field) {
    --sk-primitive-tone: var(--sk-color-ink-muted);
    --sk-primitive-fg: var(--sk-color-ink-primary);
    --sk-primitive-on-tone: var(--sk-color-bg-surface);
    --sk-primitive-border: var(--sk-color-border-control);
    --sk-primitive-tint: color-mix(in oklch, var(--sk-primitive-tone) 10%, var(--sk-color-bg-surface));
    --sk-primitive-control-block: var(--sk-size-control-md);
    --sk-primitive-control-pad-inline: var(--sk-space-4);
    --sk-primitive-control-pad-block: var(--sk-space-2);
    --sk-primitive-font-size: var(--sk-font-size-md);
    --sk-primitive-card-pad: var(--sk-space-4);
    --sk-primitive-badge-pad-inline: var(--sk-space-2);
    --sk-primitive-badge-pad-block: var(--sk-space-1);
    box-sizing: border-box;
    color: var(--sk-color-ink-primary);
    font: inherit;
    letter-spacing: 0;
  }

  :where(.sk-tone-brand) {
    --sk-primitive-tone: var(--sk-color-brand-primary);
  }

  :where(.sk-tone-accent) {
    --sk-primitive-tone: var(--sk-color-accent);
    --sk-primitive-on-tone: var(--sk-color-ink-primary);
  }

  :where(.sk-tone-success) {
    --sk-primitive-tone: var(--sk-color-success);
  }

  :where(.sk-tone-warning) {
    --sk-primitive-tone: var(--sk-color-warning);
    --sk-primitive-on-tone: var(--sk-color-ink-primary);
  }

  :where(.sk-tone-danger) {
    --sk-primitive-tone: var(--sk-color-danger);
  }

  :where(.sk-tone-info) {
    --sk-primitive-tone: var(--sk-color-info);
  }

  :where(.sk-size-sm) {
    --sk-primitive-control-block: var(--sk-size-control-sm);
    --sk-primitive-control-pad-inline: var(--sk-space-3);
    --sk-primitive-control-pad-block: var(--sk-space-1);
    --sk-primitive-font-size: var(--sk-font-size-sm);
    --sk-primitive-card-pad: var(--sk-space-3);
    --sk-primitive-badge-pad-inline: var(--sk-space-2);
  }

  :where(.sk-size-lg) {
    --sk-primitive-control-block: var(--sk-size-control-lg);
    --sk-primitive-control-pad-inline: var(--sk-space-6);
    --sk-primitive-control-pad-block: var(--sk-space-3);
    --sk-primitive-font-size: var(--sk-font-size-lg);
    --sk-primitive-card-pad: var(--sk-space-6);
    --sk-primitive-badge-pad-inline: var(--sk-space-3);
  }

  :where(.sk-button) {
    align-items: center;
    appearance: none;
    background: var(--sk-color-bg-surface);
    border: 1px solid var(--sk-primitive-border);
    border-radius: var(--sk-radius-control);
    color: var(--sk-color-ink-primary);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--sk-primitive-font-size);
    font-weight: var(--sk-font-weight-semibold);
    gap: var(--sk-space-2);
    justify-content: center;
    line-height: var(--sk-line-height-control);
    max-inline-size: 100%;
    min-block-size: var(--sk-primitive-control-block);
    min-inline-size: var(--sk-primitive-control-block);
    overflow-wrap: anywhere;
    padding: var(--sk-primitive-control-pad-block) var(--sk-primitive-control-pad-inline);
    text-align: center;
    text-decoration: none;
    transition:
      background-color var(--sk-motion-duration-standard) var(--sk-motion-easing-standard),
      border-color var(--sk-motion-duration-standard) var(--sk-motion-easing-standard),
      box-shadow var(--sk-motion-duration-standard) var(--sk-motion-easing-standard),
      color var(--sk-motion-duration-standard) var(--sk-motion-easing-standard);
    user-select: none;
    vertical-align: middle;
    white-space: normal;
  }

  :where(.sk-button.sk-tone-brand, .sk-button.sk-tone-danger) {
    background: var(--sk-primitive-tone);
    border-color: transparent;
    color: var(--sk-primitive-on-tone);
  }

  :where(.sk-button:hover) {
    background: var(--sk-primitive-tint);
    border-color: var(--sk-primitive-tone);
  }

  :where(.sk-button[aria-pressed="true"]) {
    background: var(--sk-primitive-tint);
    border-color: var(--sk-primitive-tone);
    box-shadow: inset 0 0 0 1px var(--sk-primitive-tone);
  }

  :where(.sk-button.sk-tone-brand:hover, .sk-button.sk-tone-danger:hover) {
    background: color-mix(in oklch, var(--sk-primitive-tone) 90%, var(--sk-color-ink-primary));
  }

  :where(.sk-button:focus-visible, .sk-card:focus-visible, .sk-field :is(input, textarea, select, [data-sk-control]):focus-visible) {
    outline: var(--sk-focus-outline-width) solid var(--sk-color-info);
    outline-offset: var(--sk-focus-outline-offset);
  }

  :where(.sk-button:disabled, .sk-button[aria-disabled="true"], .sk-button[data-disabled="true"]) {
    cursor: not-allowed;
    opacity: 0.56;
    pointer-events: none;
  }

  :where(.sk-button[aria-busy="true"], .sk-button[data-loading="true"]) {
    cursor: progress;
  }

  :where(.sk-button[aria-busy="true"]::after, .sk-button[data-loading="true"]::after) {
    animation: sk-primitive-spin var(--sk-motion-duration-loading) var(--sk-motion-easing-linear) infinite;
    block-size: 0.8em;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    content: "";
    inline-size: 0.8em;
  }

  :where(.sk-card) {
    background: var(--sk-color-bg-surface);
    border: 1px solid var(--sk-primitive-border);
    border-radius: var(--sk-radius-card);
    box-shadow: var(--sk-elevation-card);
    display: grid;
    gap: var(--sk-space-2);
    max-inline-size: 100%;
    padding: var(--sk-primitive-card-pad);
  }

  :where(.sk-card.sk-tone-neutral) {
    box-shadow: var(--sk-elevation-card);
  }

  :where(a.sk-card) {
    color: inherit;
    text-decoration: none;
  }

  :where(.sk-card :is(h1, h2, h3, p)) {
    margin-block: 0;
    overflow-wrap: anywhere;
  }

  :where(.sk-card :is(p, li)) {
    color: var(--sk-color-ink-muted);
    line-height: var(--sk-line-height-body);
  }

  :where(.sk-badge) {
    align-items: center;
    background: var(--sk-primitive-tint);
    border: 1px solid var(--sk-primitive-border);
    border-radius: var(--sk-radius-control);
    color: var(--sk-primitive-fg);
    display: inline-flex;
    font-size: var(--sk-primitive-font-size);
    font-weight: var(--sk-font-weight-bold);
    gap: var(--sk-space-1);
    line-height: var(--sk-line-height-tight);
    max-inline-size: 100%;
    min-block-size: var(--sk-size-badge-min);
    overflow-wrap: anywhere;
    padding: var(--sk-primitive-badge-pad-block) var(--sk-primitive-badge-pad-inline);
    vertical-align: middle;
  }

  :where(.sk-field) {
    display: grid;
    gap: var(--sk-space-2);
    max-inline-size: 100%;
  }

  :where(.sk-field :is(label, [data-sk-label])) {
    color: var(--sk-color-ink-primary);
    font-size: var(--sk-primitive-font-size);
    font-weight: var(--sk-font-weight-semibold);
    line-height: var(--sk-line-height-label);
  }

  :where(.sk-field :is(input, textarea, select, [data-sk-control])) {
    appearance: none;
    background: var(--sk-color-bg-surface);
    border: 1px solid var(--sk-primitive-border);
    border-radius: var(--sk-radius-control);
    color: var(--sk-color-ink-primary);
    font: inherit;
    inline-size: 100%;
    line-height: var(--sk-line-height-body);
    min-block-size: var(--sk-primitive-control-block);
    min-inline-size: 0;
    padding: var(--sk-primitive-control-pad-block) var(--sk-primitive-control-pad-inline);
  }

  :where(.sk-field :is(textarea, [data-sk-control][data-multiline="true"])) {
    min-block-size: calc(var(--sk-primitive-control-block) * 2);
    resize: vertical;
  }

  :where(.sk-field :is(input, textarea, select, [data-sk-control])::placeholder) {
    color: var(--sk-color-ink-muted);
  }

  :where(.sk-field :is(input, textarea, select, [data-sk-control]):disabled, .sk-field[data-disabled="true"]) {
    cursor: not-allowed;
    opacity: 0.62;
  }

  :where(.sk-field[data-invalid="true"]) {
    --sk-primitive-tone: var(--sk-color-danger);
  }

  :where(.sk-field[data-invalid="true"] :is(input, textarea, select, [data-sk-control]), .sk-field :is(input, textarea, select, [data-sk-control])[aria-invalid="true"]) {
    border-color: var(--sk-color-danger);
    box-shadow: 0 0 0 1px color-mix(in oklch, var(--sk-color-danger) 35%, transparent);
  }

  :where(.sk-field :is([data-sk-hint], [data-sk-error])) {
    color: var(--sk-color-ink-muted);
    font-size: var(--sk-font-size-sm);
    line-height: var(--sk-line-height-body);
    margin-block: 0;
    overflow-wrap: anywhere;
  }

  :where(.sk-field :is([data-sk-error])) {
    color: var(--sk-color-danger);
    font-weight: var(--sk-font-weight-semibold);
  }

  @keyframes sk-primitive-spin {
    to {
      rotate: 1turn;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :where(.sk-button) {
      transition: none;
    }

    :where(.sk-button[aria-busy="true"]::after, .sk-button[data-loading="true"]::after) {
      animation: none;
    }
  }
}