/* ============================================================
   Sutra Button — Base skeleton
   Phase 1.2 cascade refactor.

   Defines all ~19 component-local --btn-* variables and the
   structural CSS that consumes them. Variant files only set
   --btn-* values; size files only override the size-related
   subset. Nothing in this file is variant-specific.

   Cascade layers (declared once, project-wide for buttons):
     sutra-base      — this file (skeleton)
     sutra-variants  — _sizes.css + per-variant files
     sutra-instance  — Bricks per-control inline styles (Task 7)
     sutra-user      — Bricks Custom CSS field (highest priority)

   All --btn-* defaults reference --sutra-* DS tokens with
   hex/px fallbacks, so a future Theme Controls dashboard can
   recolor / re-space everything via :root token overrides.
   ============================================================ */

@layer sutra-base, sutra-variants, sutra-custom, sutra-states, sutra-instance, sutra-user;

@layer sutra-base {
	.sutra-btn {
		/* Colors — variant files set these */
		--btn-bg: transparent;
		--btn-text: var(--sutra-color-text-primary, #171717);
		--btn-border: transparent;
		/* Hover colors fall back to non-hover when unset */

		/* Typography */
		--btn-font-family: var(--sutra-font-body, system-ui, -apple-system, sans-serif);
		--btn-font-size: var(--sutra-font-size-md, 16px);
		--btn-font-weight: var(--sutra-font-weight-medium, 500);
		--btn-letter-spacing: var(--sutra-letter-spacing-default, normal);
		--btn-line-height: var(--sutra-line-height-tight, 1.2);

		/* Geometry — md size is the base default; _sizes.css overrides for sm/lg */
		--btn-padding-x: var(--sutra-space-lg, 16px);
		--btn-padding-y: var(--sutra-space-md, 12px);
		--btn-radius: var(--sutra-radius-md, 8px);
		--btn-border-width: 1px;

		/* Depth */
		--btn-shadow: none;

		/* Motion */
		--btn-transition-duration: var(--sutra-transition-duration, var(--sutra-duration-base, 220ms));
		--btn-transition-easing: var(--sutra-ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
		--sutra-motion-amplitude: 2px;
		--sutra-motion-scale: 1.02;

		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--sutra-space-xs, 4px);
		width: fit-content;
		position: relative;
		overflow: hidden;
		padding: var(--btn-padding-y) var(--btn-padding-x);
		background: var(--btn-bg);
		color: var(--btn-text);
		border: var(--btn-border-width) solid var(--btn-border);
		border-radius: var(--btn-radius);
		font-family: var(--btn-font-family);
		font-size: var(--btn-font-size);
		font-weight: var(--btn-font-weight);
		letter-spacing: var(--btn-letter-spacing);
		line-height: var(--btn-line-height);
		text-decoration: none;
		cursor: pointer;
		box-shadow: var(--btn-shadow);
		transition:
			background-color var(--btn-transition-duration) var(--btn-transition-easing),
			border-color     var(--btn-transition-duration) var(--btn-transition-easing),
			color            var(--btn-transition-duration) var(--btn-transition-easing),
			box-shadow       var(--btn-transition-duration) var(--btn-transition-easing),
			transform        var(--btn-transition-duration) var(--btn-transition-easing),
			border-radius    var(--btn-transition-duration) var(--btn-transition-easing);
	}

	.sutra-btn:hover {
		background: var(--btn-bg-hover, var(--btn-bg));
		color: var(--btn-text-hover, var(--btn-text));
		border-color: var(--btn-border-hover, var(--btn-border));
		box-shadow: var(--btn-shadow-hover, var(--btn-shadow));
	}

	.sutra-btn[data-sutra-motion="subtle"] {
		--sutra-motion-amplitude: 1px;
		--sutra-motion-scale: 1.01;
	}

	.sutra-btn[data-sutra-motion="dramatic"] {
		--sutra-motion-amplitude: 4px;
		--sutra-motion-scale: 1.05;
	}
}

@layer sutra-states {
	/* Baseline click press — always-on for every Sutra button.
	   Lives in sutra-states (above sutra-variants) so the press
	   transform beats any active hover animation's transform when
	   user hovers and clicks simultaneously. Bricks per-instance
	   customizations still win because sutra-instance is higher. */
	.sutra-btn:active {
		transform: translateY(1px);
		filter: brightness(0.95);
		transition-duration: 80ms;
	}
}