/* =====================================================================
   Button — design-system component (Figma: "Primary / Secondary /
   Tertiary buttons" board)
   ---------------------------------------------------------------------
   Transcribed from the designer's button sheet: three variants x three
   sizes x four states, in three content shapes (with icon, without icon,
   icon only). Every colour resolves to a token in tokens.css.

   Variants
     primary     forest fill, white ink        — CTAs on light grounds
     secondary   outlined, forest ink          — second action on light
     tertiary    white fill, forest ink        — on the forest ground

   Sizes                small   medium (default)   large
     height              32px         48px          64px
     font-size           14px         16px          18px
     side padding        16px         24px          32px
     label/icon gap       4px          8px           8px
     icon box            16px         20px          24px

   States. Hover and focus share one palette; focus adds a 2px ring
   sitting 2px outside the pill (forest on light grounds, white on the
   forest one). Disabled is the default state at 60% opacity, as drawn.

     | variant   | state    | fill        | ink     | border     |
     |-----------|----------|-------------|---------|------------|
     | primary   | default  | var(--color-forest)     | var(--color-white) | —          |
     |           | hover    | var(--dm-bg-accent-yellow)     | var(--color-forest) | black 15%  |
     | secondary | default  | transparent | var(--color-forest) | var(--color-forest)    |
     |           | hover    | var(--color-forest)     | var(--color-white) | —          |
     | tertiary  | default  | var(--color-white)     | var(--color-forest) | —          |
     |           | hover    | var(--dm-bg-accent-yellow)     | var(--color-forest) | —          |

   The board also specifies the state transition, quoted on the sheet as
   `transition: 0.3s cubic-bezier(0, 0, 0.2, 1)` — that is the timing
   used throughout this file.

   Markup: template-parts/button.php. Notes: docs/buttons.md.
   ===================================================================== */

.dm-btn {
	/* Geometry — medium is the default size; the size modifiers below
	   re-point these five and everything else follows. */
	--dm-btn-h: 48px;
	--dm-btn-pad: 24px;
	--dm-btn-gap: 8px;
	--dm-btn-icon: 20px;
	--dm-btn-font: 16px;

	/* Paint — set per variant, re-set per state. */
	--dm-btn-bg: transparent;
	--dm-btn-ink: var(--dm-fg-default-primary);
	--dm-btn-bd: transparent;
	--dm-btn-ring: var(--dm-border-default-dark-strong);

	/* The designer's easing, quoted on the board. */
	--dm-btn-ease: 0.3s cubic-bezier(0, 0, 0.2, 1);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dm-btn-gap);
	height: var(--dm-btn-h);
	/* The board measures side padding from the outer edge, so the 1px
	   border comes out of it and every variant's label lands on the same
	   x whether or not it is outlined. */
	padding: 0 calc(var(--dm-btn-pad) - 1px);
	border: 1px solid var(--dm-btn-bd);
	border-radius: 999px;             /* pill — radius is half the height */
	box-sizing: border-box;
	background: var(--dm-btn-bg);
	color: var(--dm-btn-ink);
	font-family: var(--font-default); /* Roboto Condensed */
	font-size: var(--dm-btn-font);
	font-weight: 400;
	line-height: 1.4;                 /* Figma: 140% */
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--dm-btn-ease),
	            border-color var(--dm-btn-ease),
	            color var(--dm-btn-ease),
	            opacity var(--dm-btn-ease);
}

/* The arrow (Material arrow_forward, the board's own icon) inherits the
   label colour, so no state has to restyle it. */
.dm-btn__icon,
.dm-btn > svg {
	flex: 0 0 auto;
	width: var(--dm-btn-icon);
	height: var(--dm-btn-icon);
	fill: currentColor;
}

/* ---- Sizes -------------------------------------------------------- */

.dm-btn--sm {
	--dm-btn-h: 32px;
	--dm-btn-pad: 16px;
	--dm-btn-gap: 4px;
	--dm-btn-icon: 16px;
	--dm-btn-font: 14px;
}

.dm-btn--md {                         /* the default — listed for parity */
	--dm-btn-h: 48px;
	--dm-btn-pad: 24px;
	--dm-btn-gap: 8px;
	--dm-btn-icon: 20px;
	--dm-btn-font: 16px;
}

.dm-btn--lg {
	--dm-btn-h: 64px;
	--dm-btn-pad: 32px;
	--dm-btn-gap: 8px;
	--dm-btn-icon: 24px;
	--dm-btn-font: 18px;
}

/* Icon only — a circle, so width tracks height and padding drops out. */
.dm-btn--icon {
	width: var(--dm-btn-h);
	padding: 0;
}

/* ---- Variants ----------------------------------------------------- */

/* Primary — forest fill, white ink. Hover flips to brand yellow with the
   board's hairline border (border/default/dark). */
.dm-btn--primary,
.dm-btn--solid {                      /* legacy alias */
	--dm-btn-bg: var(--dm-bg-default-tertiary);
	--dm-btn-ink: var(--dm-fg-default-white);
	--dm-btn-bd: transparent;
	--dm-btn-ring: var(--dm-border-default-dark-strong);
}

.dm-btn--primary:hover,
.dm-btn--primary:focus-visible,
.dm-btn--primary:active,
.dm-btn--solid:hover,
.dm-btn--solid:focus-visible,
.dm-btn--solid:active {
	--dm-btn-bg: var(--dm-bg-accent-yellow);
	--dm-btn-ink: var(--dm-fg-default-primary);
	--dm-btn-bd: var(--dm-border-default-dark);
}

/* Secondary — outlined on light grounds; hover fills forest. */
.dm-btn--secondary,
.dm-btn--outline {                    /* legacy alias */
	--dm-btn-bg: transparent;
	--dm-btn-ink: var(--dm-fg-default-primary);
	--dm-btn-bd: var(--dm-border-default-dark-strong);
	--dm-btn-ring: var(--dm-border-default-dark-strong);
}

.dm-btn--secondary:hover,
.dm-btn--secondary:focus-visible,
.dm-btn--secondary:active,
.dm-btn--outline:hover,
.dm-btn--outline:focus-visible,
.dm-btn--outline:active {
	--dm-btn-bg: var(--dm-bg-default-tertiary);
	--dm-btn-ink: var(--dm-fg-default-white);
	--dm-btn-bd: transparent;
}

/* Tertiary — white fill for the forest ground; hover flips to yellow and
   the focus ring goes white so it reads against that ground. */
.dm-btn--tertiary,
.dm-btn--light {                      /* legacy alias */
	--dm-btn-bg: var(--dm-bg-default-white);
	--dm-btn-ink: var(--dm-fg-default-primary);
	--dm-btn-bd: transparent;
	--dm-btn-ring: var(--dm-border-default-light-strong);
}

.dm-btn--tertiary:hover,
.dm-btn--tertiary:focus-visible,
.dm-btn--tertiary:active,
.dm-btn--light:hover,
.dm-btn--light:focus-visible,
.dm-btn--light:active {
	--dm-btn-bg: var(--dm-bg-accent-yellow);
	--dm-btn-ink: var(--dm-fg-default-primary);
	--dm-btn-bd: transparent;
}

/* ---- States ------------------------------------------------------- */

/* Focus ring: 2px, sitting 2px clear of the pill. The board specifies
   colour for hover/focus, not motion — no lift, no shadow. */
.dm-btn:focus-visible,
.dm-btn--primary:active,
.dm-btn--solid:active,
.dm-btn--secondary:active,
.dm-btn--outline:active,
.dm-btn--tertiary:active,
.dm-btn--light:active {
	outline: 2px solid var(--dm-btn-ring);
	outline-offset: 2px;
}

/* Disabled — the default state at 60%, as drawn. pointer-events keeps the
   hover palette off it; anchors also get tabindex="-1" from
   template-parts/button.php so they cannot be focused into it. */
.dm-btn:disabled,
.dm-btn[aria-disabled="true"],
.dm-btn.is-disabled {
	opacity: .6;
	pointer-events: none;
	cursor: default;
}

/* ---- Helpers ------------------------------------------------------ */

.dm-btn--block {
	width: 100%;
}

/* Icon-only buttons carry their label as an aria-label; when markup
   passes real text instead, keep it out of the pill but in the a11y
   tree. */
.dm-btn__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}