/* ===========================================================
   Sutra DS — Components
   Component implementations. Layered for clean cascade.
   =========================================================== */

@layer components {

  /* ===========================================================
     BUTTON TOKENS (component-scoped)
     =========================================================== */
  :root {
    --btn-height-sm: 36px;
    --btn-height-md: 44px;
    --btn-height-lg: 56px;

    --btn-padding-x-sm: var(--space-3);
    --btn-padding-x-md: var(--space-5);
    --btn-padding-x-lg: var(--space-8);

    --btn-radius: var(--radius-md);

    --btn-font-size-sm: var(--font-size-sm);
    --btn-font-size-md: var(--font-size-base);
    --btn-font-size-lg: var(--font-size-lg);

    --btn-ease:     cubic-bezier(0.4, 0, 0.2, 1);
    --btn-duration: 220ms;

    /* Primary */
    --btn-bg-primary:        var(--color-brand-primary);
    --btn-bg-primary-hover:  var(--color-brand-hover);
    --btn-bg-primary-active: var(--color-brand-active);
    --btn-text-primary:      var(--color-text-on-brand);
    --btn-shadow-primary:        0 1px 2px 0 rgb(0 0 0 / 0.05);
    --btn-shadow-primary-hover:  0 4px 12px -2px rgb(0 0 0 / 0.12), 0 2px 4px -1px rgb(0 0 0 / 0.06);

    /* Secondary */
    --btn-bg-secondary:       transparent;
    --btn-bg-secondary-hover: var(--color-brand-subtle);
    --btn-text-secondary:     var(--color-brand-primary);
    --btn-border-secondary:   var(--color-brand-primary);

    /* Ghost */
    --btn-bg-ghost:       transparent;
    --btn-bg-ghost-hover: var(--color-surface-raised);
    --btn-text-ghost:     var(--color-text-primary);

    /* Danger */
    --btn-bg-danger:        var(--color-danger-600);
    --btn-bg-danger-hover:  var(--color-danger-700);
    --btn-bg-danger-active: var(--color-danger-800);
    --btn-text-danger:      var(--color-neutral-0);
    --btn-shadow-danger-hover: 0 4px 12px -2px rgb(220 38 38 / 0.2), 0 2px 4px -1px rgb(0 0 0 / 0.06);
  }

  /* ===========================================================
     BASE BUTTON
     =========================================================== */
  .sutra-btn {
    /* Targeted reset — only touches what we redefine. */
    background: none;
    border: 1px solid transparent;
    padding: 0;
    color: inherit;
    font: inherit;

    /* Layout */
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--btn-height-md);
    padding-inline: var(--btn-padding-x-md);
    border-radius: var(--btn-radius);

    /* Typography */
    font-family: var(--font-body);
    font-size: var(--btn-font-size-md);
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    /* Behavior */
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;

    /* Motion */
    transition:
      background-color var(--btn-duration) var(--btn-ease),
      border-color var(--btn-duration) var(--btn-ease),
      color var(--btn-duration) var(--btn-ease),
      box-shadow var(--btn-duration) var(--btn-ease);
  }

  .sutra-btn:focus { outline: none; }
  .sutra-btn:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 3px;
  }

  .sutra-btn[disabled],
  .sutra-btn[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* ===========================================================
     SIZES
     =========================================================== */
  .sutra-btn--sm {
    height: var(--btn-height-sm);
    padding-inline: var(--btn-padding-x-sm);
    font-size: var(--btn-font-size-sm);
  }
  .sutra-btn--lg {
    height: var(--btn-height-lg);
    padding-inline: var(--btn-padding-x-lg);
    font-size: var(--btn-font-size-lg);
  }

  /* Icon-only sizing */
  .sutra-btn--icon { width: var(--btn-height-md); padding: 0; }
  .sutra-btn--icon.sutra-btn--sm { width: var(--btn-height-sm); }
  .sutra-btn--icon.sutra-btn--lg { width: var(--btn-height-lg); }

  /* ===========================================================
     WORKHORSE VARIANTS
     =========================================================== */

  /* Primary */
  .sutra-btn--primary {
    background: var(--btn-bg-primary);
    color: var(--btn-text-primary);
    box-shadow: var(--btn-shadow-primary);
  }
  .sutra-btn--primary:hover {
    background: var(--btn-bg-primary-hover);
    box-shadow: var(--btn-shadow-primary-hover);
  }
  .sutra-btn--primary:active {
    background: var(--btn-bg-primary-active);
    box-shadow: var(--btn-shadow-primary);
    transition-duration: 80ms;
  }

  /* Secondary */
  .sutra-btn--secondary {
    background: var(--btn-bg-secondary);
    color: var(--btn-text-secondary);
    border-color: var(--btn-border-secondary);
  }
  .sutra-btn--secondary:hover {
    background: var(--btn-bg-secondary-hover);
  }

  /* Ghost */
  .sutra-btn--ghost {
    background: var(--btn-bg-ghost);
    color: var(--btn-text-ghost);
  }
  .sutra-btn--ghost:hover {
    background: var(--btn-bg-ghost-hover);
  }

  /* Danger */
  .sutra-btn--danger {
    background: var(--btn-bg-danger);
    color: var(--btn-text-danger);
    box-shadow: var(--btn-shadow-primary);
  }
  .sutra-btn--danger:hover {
    background: var(--btn-bg-danger-hover);
    box-shadow: var(--btn-shadow-danger-hover);
  }
  .sutra-btn--danger:active {
    background: var(--btn-bg-danger-active);
    transition-duration: 80ms;
  }

  /* ===========================================================
     CREATIVE VARIANTS
     =========================================================== */

  /* Hero — breathing CTA */
  .sutra-btn--hero {
    height: 64px;
    padding-inline: var(--space-10);
    font-size: var(--font-size-lg);
    font-weight: 600;
    letter-spacing: 0.01em;
    background: var(--btn-bg-primary);
    color: var(--btn-text-primary);
    border-radius: var(--radius-lg);
    box-shadow:
      0 0 0 0 rgb(150 72 37 / 0),
      0 8px 24px -4px rgb(0 0 0 / 0.15);
    animation: sutra-hero-breathe 4.5s ease-in-out infinite;
  }
  .sutra-btn--hero:hover {
    animation-play-state: paused;
    background: var(--btn-bg-primary-hover);
    box-shadow:
      0 0 0 10px rgb(150 72 37 / 0.18),
      0 12px 32px -4px rgb(0 0 0 / 0.22);
  }
  .sutra-btn--hero:active {
    background: var(--btn-bg-primary-active);
    box-shadow:
      0 0 0 4px rgb(150 72 37 / 0.12),
      0 4px 12px -2px rgb(0 0 0 / 0.18);
    transition-duration: 80ms;
  }
  @keyframes sutra-hero-breathe {
    0%, 100% { box-shadow: 0 0 0 0 rgb(150 72 37 / 0), 0 8px 24px -4px rgb(0 0 0 / 0.15); }
    50%      { box-shadow: 0 0 0 12px rgb(150 72 37 / 0.12), 0 10px 28px -4px rgb(0 0 0 / 0.18); }
  }
  @media (prefers-reduced-motion: reduce) {
    .sutra-btn--hero { animation: none; }
  }

  /* Sweep — fill from left */
  .sutra-btn--sweep {
    background: transparent;
    color: var(--color-text-primary);
    border-color: var(--color-border-default);
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
  .sutra-btn--sweep::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-brand-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 380ms cubic-bezier(0.4, 0, 0.2, 1), background-color 80ms;
    z-index: -1;
  }
  .sutra-btn--sweep:hover {
    color: var(--color-text-on-brand);
    border-color: var(--color-brand-primary);
  }
  .sutra-btn--sweep:hover::before { transform: scaleX(1); }
  .sutra-btn--sweep:active::before { background: var(--color-brand-active); }
  .sutra-btn--sweep:active { border-color: var(--color-brand-active); transition-duration: 80ms; }

  /* Spotlight — radial gradient that follows cursor */
  .sutra-btn--spotlight {
    background: var(--btn-bg-primary);
    color: var(--btn-text-primary);
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .sutra-btn--spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(220px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgb(255 255 255 / 0.22), transparent 50%);
    opacity: 0;
    transition: opacity 250ms var(--btn-ease);
    pointer-events: none;
    z-index: 1;
  }
  .sutra-btn--spotlight:hover {
    background: var(--btn-bg-primary-hover);
  }
  .sutra-btn--spotlight:hover::before { opacity: 1; }
  .sutra-btn--spotlight:active {
    background: var(--btn-bg-primary-active);
    transition-duration: 80ms;
  }

  /* Magnetic — JS-powered cursor pull */
  .sutra-btn--magnetic {
    background: var(--btn-bg-primary);
    color: var(--btn-text-primary);
    box-shadow: var(--btn-shadow-primary);
    transition:
      background-color var(--btn-duration) var(--btn-ease),
      box-shadow var(--btn-duration) var(--btn-ease),
      transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }
  .sutra-btn--magnetic:hover {
    background: var(--btn-bg-primary-hover);
    box-shadow: var(--btn-shadow-primary-hover);
  }
  .sutra-btn--magnetic:active {
    background: var(--btn-bg-primary-active);
    box-shadow: var(--btn-shadow-primary);
    transition-duration: 80ms;
  }

  /* ===========================================================
     MODIFIERS
     =========================================================== */

  /* Lift — subtle hover elevation, brand-tinted glow */
  .sutra-btn--lift {
    transition:
      transform 220ms ease,
      box-shadow 220ms ease,
      background-color 220ms var(--btn-ease),
      border-color 220ms var(--btn-ease),
      color 220ms var(--btn-ease);
    will-change: transform;
  }
  .sutra-btn--lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -2px var(--sutra-lift-glow, rgb(0 0 0 / 0.18));
  }
  .sutra-btn--lift:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -2px var(--sutra-lift-glow-active, rgb(0 0 0 / 0.12));
    transition-duration: 100ms;
  }

  .sutra-btn--primary {
    --sutra-lift-glow:        color-mix(in srgb, var(--color-brand-primary) 32%, transparent);
    --sutra-lift-glow-active: color-mix(in srgb, var(--color-brand-primary) 18%, transparent);
  }
  .sutra-btn--secondary {
    --sutra-lift-glow:        color-mix(in srgb, var(--color-brand-primary) 24%, transparent);
    --sutra-lift-glow-active: color-mix(in srgb, var(--color-brand-primary) 14%, transparent);
  }
  .sutra-btn--danger {
    --sutra-lift-glow:        color-mix(in srgb, var(--color-danger-600) 32%, transparent);
    --sutra-lift-glow-active: color-mix(in srgb, var(--color-danger-600) 18%, transparent);
  }
  .sutra-btn--ghost {
    --sutra-lift-glow:        rgb(0 0 0 / 0.14);
    --sutra-lift-glow-active: rgb(0 0 0 / 0.08);
  }

  /* Morph — radius shape-shifts on hover/active */
  .sutra-btn--morph {
    border-radius: var(--radius-sm);
    transition:
      background-color var(--btn-duration) var(--btn-ease),
      border-color var(--btn-duration) var(--btn-ease),
      color var(--btn-duration) var(--btn-ease),
      box-shadow var(--btn-duration) var(--btn-ease),
      transform 220ms var(--btn-ease),
      filter 220ms var(--btn-ease),
      border-radius 280ms cubic-bezier(0.5, 1.4, 0.5, 1);
  }
  .sutra-btn--morph:hover { border-radius: var(--radius-lg); }
  .sutra-btn--morph:active {
    border-radius: var(--radius-2xl);
    filter: brightness(0.92);
    transform: scale(0.985);
    transition-duration: 120ms;
  }

  /* ===========================================================
     COMPOUND PATTERNS
     =========================================================== */

  /* Split button */
  .sutra-btn-split {
    display: inline-flex;
    isolation: isolate;
    border-radius: var(--btn-radius);
    box-shadow: var(--btn-shadow-primary);
  }
  .sutra-btn-split .sutra-btn { box-shadow: none; }
  .sutra-btn-split__main {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-right: 1px solid rgb(255 255 255 / 0.18);
  }
  .sutra-btn-split__chevron {
    width: var(--btn-height-md);
    padding: 0;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }
  .sutra-btn-split__chevron svg {
    transition: transform 320ms cubic-bezier(0.5, 1.4, 0.5, 1);
  }
  .sutra-btn-split__chevron[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  /* Toggle group */
  .sutra-btn-toggle-group {
    display: inline-flex;
    background: var(--color-surface-raised);
    padding: 4px;
    border-radius: var(--radius-lg);
    gap: 4px;
  }
  .sutra-btn-toggle-group__item {
    height: 36px;
    padding-inline: var(--space-4);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition:
      background-color var(--btn-duration) var(--btn-ease),
      color var(--btn-duration) var(--btn-ease),
      border-radius 320ms cubic-bezier(0.5, 1.4, 0.5, 1),
      padding 320ms cubic-bezier(0.5, 1.4, 0.5, 1),
      box-shadow var(--btn-duration) var(--btn-ease);
  }
  .sutra-btn-toggle-group__item:hover { color: var(--color-text-primary); }
  .sutra-btn-toggle-group__item:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
  }
  .sutra-btn-toggle-group__item[aria-pressed="true"] {
    background: var(--color-surface-base);
    color: var(--color-text-primary);
    border-radius: var(--radius-lg);
    padding-inline: var(--space-5);
    box-shadow: var(--shadow-sm);
  }

  /* Loader */
  .sutra-loader-shapes {
    width: 32px;
    height: 32px;
    background: var(--color-brand-primary);
    animation: sutra-loader-morph 2.4s infinite cubic-bezier(0.5, 1.4, 0.5, 1);
  }
  .sutra-loader-shapes--sm { width: 20px; height: 20px; }
  .sutra-loader-shapes--lg { width: 48px; height: 48px; }
  @keyframes sutra-loader-morph {
    0%, 100% { border-radius: 4px;  transform: rotate(0deg); }
    20%      { border-radius: 50%;  transform: rotate(90deg); }
    40%      { border-radius: 8px;  transform: rotate(180deg); }
    60%      { border-radius: 50%;  transform: rotate(270deg); }
    80%      { border-radius: 24px; transform: rotate(360deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .sutra-loader-shapes { animation-duration: 8s; }
  }

  /* ===========================================================
     LEGACY DOM SUPPORT
     For users applying sutra-btn classes to a Breakdance Button
     (which wraps content in inner <a> or <button> elements).
     This minimal block lets our styles cascade through BD's wrapper.
     =========================================================== */
  .sutra-btn > a,
  .sutra-btn > button,
  .sutra-btn > [class*="bde-button"] {
    all: unset;
    cursor: inherit;
    color: inherit;
    font: inherit;
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: inherit;
  }
}