/*
 * Copyright (c) 2026, Salesforce, Inc.,
 * All rights reserved.
 * For full license text, see the LICENSE.txt file
 *
 * Lightning Blue theme for Button.
 *
 * Hook organization: --slds-c-button-[{element}-]{category}-{property}.
 * Authoring shape: each variant declares all its hooks flat at the
 * variant root. Per-state hooks (`-hover`, `-focus`, `-active`,
 * `-disabled`) are read by `themes/base.css` only inside the matching
 * pseudo-state, so flat assignment paints identically to nested but
 * emits fewer rules. See cosmos.css for the same shape rationale.
 *
 * Lightning Blue does NOT layer button paint declarations
 * (no box-shadow / transform / transition writes), only hooks.
 */

@layer theme {
  /**
   * Base button — defaults for unclassed .slds-button (text/link style).
   */
  .slds-button {
    --slds-c-button-radius-border: var(--slds-s-button-radius-border);
    --slds-c-button-sizing-border: var(--slds-g-sizing-border-1);
    --slds-c-button-font-weight: var(--slds-g-font-weight-4);
    --slds-c-button-font-line-height: 1.875rem;
    --slds-c-button-spacing-gap: var(--slds-g-spacing-2);

    /* Icon - Direct size on primitive to allow button-icon-* hook to override  */
    --slds-c-icon-size: 0.875rem;

    --slds-c-button-color-foreground: var(--slds-g-color-accent-2);
    --slds-c-button-color-foreground-hover: var(--slds-g-color-accent-3);
    --slds-c-button-color-foreground-focus: var(--slds-g-color-accent-3);
    --slds-c-button-color-foreground-active: var(--slds-g-color-accent-3);
    --slds-c-button-color-foreground-disabled: var(--slds-g-color-disabled-1);
  }

  /* Neutral — gray border, white background. */
  .slds-button_neutral {
    --slds-c-button-color-border: var(--slds-g-color-border-2);
    --slds-c-button-color-background: var(--slds-g-color-surface-container-1);
    --slds-c-button-spacing-inline: var(--slds-s-button-spacing-inline);

    --slds-c-button-color-background-hover: var(--slds-g-color-surface-container-2);
    --slds-c-button-color-border-hover: var(--slds-g-color-border-2);

    --slds-c-button-color-background-focus: var(--slds-g-color-surface-container-2);
    --slds-c-button-color-border-focus: var(--slds-g-color-border-2);

    --slds-c-button-color-background-active: var(--slds-g-color-surface-container-2);
    --slds-c-button-color-border-active: var(--slds-g-color-border-2);

    --slds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
    --slds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
    --slds-c-button-color-foreground-disabled: var(--slds-g-color-on-disabled-1);
  }

  /* Brand — primary CTA on accent surface. */
  .slds-button_brand {
    --slds-c-button-color-background: var(--slds-g-color-accent-container-1);
    --slds-c-button-color-border: var(--slds-g-color-border-accent-1);
    --slds-c-button-color-foreground: var(--slds-g-color-on-accent-1);
    --slds-c-button-spacing-inline: var(--slds-s-button-spacing-inline);

    --slds-c-button-color-background-hover: var(--slds-g-color-accent-container-2);
    --slds-c-button-color-border-hover: var(--slds-g-color-accent-container-2);
    --slds-c-button-color-foreground-hover: var(--slds-g-color-on-accent-2);

    --slds-c-button-color-background-focus: var(--slds-g-color-accent-container-2);
    --slds-c-button-color-border-focus: var(--slds-g-color-accent-container-2);
    --slds-c-button-color-foreground-focus: var(--slds-g-color-on-accent-2);

    --slds-c-button-color-background-active: var(--slds-g-color-accent-container-2);
    --slds-c-button-color-border-active: transparent;
    --slds-c-button-color-foreground-active: var(--slds-g-color-on-accent-2);

    --slds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-2);
    --slds-c-button-color-border-disabled: var(--slds-g-color-disabled-container-2);
    --slds-c-button-color-foreground-disabled: var(--slds-g-color-on-disabled-2);
  }

  /* Outline-brand — accent border on neutral surface. */
  .slds-button_outline-brand {
    --slds-c-button-color-background: var(--slds-g-color-surface-container-1);
    --slds-c-button-color-border: var(--slds-g-color-border-accent-1);
    --slds-c-button-spacing-inline: var(--slds-s-button-spacing-inline);

    --slds-c-button-color-background-hover: var(--slds-g-color-surface-container-2);
    --slds-c-button-color-border-hover: var(--slds-g-color-border-accent-1);

    --slds-c-button-color-background-focus: var(--slds-g-color-surface-container-2);
    --slds-c-button-color-border-focus: var(--slds-g-color-border-accent-1);

    --slds-c-button-color-background-active: var(--slds-g-color-surface-container-2);
    --slds-c-button-color-border-active: var(--slds-g-color-border-accent-1);

    --slds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
    --slds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
  }

  /* Inverse — for dark surfaces. */
  .slds-button_inverse {
    --slds-c-button-color-background: transparent;
    --slds-c-button-color-border: var(--slds-g-color-border-inverse-1);
    --slds-c-button-color-foreground: var(--slds-g-color-on-surface-inverse-1);
    --slds-c-button-spacing-inline: var(--slds-s-button-spacing-inline);

    --slds-c-button-color-background-hover: var(--slds-g-color-surface-container-2);
    --slds-c-button-color-border-hover: var(--slds-g-color-border-inverse-1);
    --slds-c-button-color-foreground-hover: var(--slds-g-color-accent-3);

    --slds-c-button-color-border-focus: var(--slds-g-color-surface-container-2);
    --slds-c-button-color-foreground-focus: var(--slds-g-color-on-surface-3);

    --slds-c-button-color-background-active: var(--slds-g-color-surface-container-2);
    --slds-c-button-color-border-active: transparent;
    --slds-c-button-color-foreground-active: var(--slds-g-color-accent-3);

    --slds-c-button-color-border-disabled: color-mix(
      in oklab,
      var(--slds-g-color-neutral-base-100),
      transparent 50%
    );
    --slds-c-button-color-foreground-disabled: color-mix(
      in oklab,
      var(--slds-g-color-neutral-base-100),
      transparent 50%
    );

    /* State-combination override: focus-visible WITHOUT hover. */
    &:not(:hover):focus-visible {
      --slds-c-button-color-foreground-focus: var(--slds-g-color-on-surface-inverse-1);
    }
  }

  /* Destructive — red CTA. */
  .slds-button_destructive {
    --slds-c-button-color-background: var(--slds-g-color-error-base-40);
    --slds-c-button-color-border: var(--slds-g-color-error-base-40);
    --slds-c-button-color-foreground: var(--slds-g-color-neutral-base-100);
    --slds-c-button-spacing-inline: var(--slds-s-button-spacing-inline);

    --slds-c-button-color-background-hover: var(--slds-g-color-error-base-30);
    --slds-c-button-color-border-hover: var(--slds-g-color-error-base-30);
    --slds-c-button-color-foreground-hover: var(--slds-g-color-neutral-base-100);

    --slds-c-button-color-background-focus: var(--slds-g-color-error-base-30);
    --slds-c-button-color-border-focus: var(--slds-g-color-error-base-30);
    --slds-c-button-color-foreground-focus: var(--slds-g-color-neutral-base-100);

    --slds-c-button-color-background-active: var(--slds-g-color-error-base-30);
    --slds-c-button-color-border-active: var(--slds-g-color-error-base-30);
    --slds-c-button-color-foreground-active: var(--slds-g-color-neutral-base-100);

    --slds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-2);
    --slds-c-button-color-border-disabled: var(--slds-g-color-disabled-container-2);
    --slds-c-button-color-foreground-disabled: var(--slds-g-color-on-disabled-2);
  }

  /* Text-destructive — red text on neutral surface. */
  .slds-button_text-destructive {
    --slds-c-button-color-background: var(--slds-g-color-surface-container-1);
    --slds-c-button-color-border: var(--slds-g-color-border-error-1);
    --slds-c-button-color-foreground: var(--slds-g-color-error-1);
    --slds-c-button-spacing-inline: var(--slds-s-button-spacing-inline);

    --slds-c-button-color-background-hover: var(--slds-g-color-surface-container-2);
    --slds-c-button-color-border-hover: var(--slds-g-color-border-error-2);
    --slds-c-button-color-foreground-hover: var(--slds-g-color-error-1);

    --slds-c-button-color-background-focus: var(--slds-g-color-surface-container-2);
    --slds-c-button-color-border-focus: var(--slds-g-color-border-error-2);
    --slds-c-button-color-foreground-focus: var(--slds-g-color-error-1);

    --slds-c-button-color-background-active: var(--slds-g-color-surface-container-2);
    --slds-c-button-color-border-active: var(--slds-g-color-border-error-2);
    --slds-c-button-color-foreground-active: var(--slds-g-color-error-1);

    --slds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
    --slds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
    --slds-c-button-color-foreground-disabled: var(--slds-g-color-on-disabled-1);
  }

  /* Success — green CTA. */
  .slds-button_success {
    --slds-c-button-color-background: var(--slds-g-color-success-base-50);
    --slds-c-button-color-border: var(--slds-g-color-success-base-50);
    --slds-c-button-color-foreground: var(--slds-g-color-neutral-base-100);
    --slds-c-button-spacing-inline: var(--slds-s-button-spacing-inline);

    --slds-c-button-color-background-hover: var(--slds-g-color-success-base-30);
    --slds-c-button-color-border-hover: var(--slds-g-color-success-base-50);
    --slds-c-button-color-foreground-hover: var(--slds-g-color-neutral-base-100);

    --slds-c-button-color-background-focus: var(--slds-g-color-success-base-30);
    --slds-c-button-color-border-focus: var(--slds-g-color-success-base-50);
    --slds-c-button-color-foreground-focus: var(--slds-g-color-neutral-base-100);

    --slds-c-button-color-background-active: var(--slds-g-color-success-base-30);
    --slds-c-button-color-border-active: var(--slds-g-color-success-base-50);
    --slds-c-button-color-foreground-active: var(--slds-g-color-neutral-base-100);

    --slds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-2);
    --slds-c-button-color-border-disabled: var(--slds-g-color-disabled-container-2);
    --slds-c-button-color-foreground-disabled: var(--slds-g-color-on-disabled-2);
  }

  /* Per-element icon-size modifiers. Mirrors the legacy button.css contract. */
  .slds-button .slds-button__icon_large {
    --slds-c-button-icon-size: var(--slds-g-sizing-7);
  }

  .slds-button .slds-button__icon_small {
    --slds-c-button-icon-size: var(--slds-g-sizing-4);
  }

  .slds-button .slds-button__icon_x-small {
    --slds-c-button-icon-size: var(--slds-g-sizing-3);
  }
}