/* SDS bridge — maps SDS tokens to wedding palette and enables SDS components
   to respond to native HTML states (:checked, :focus-visible, :hover) so we
   don't need react-aria's data-attribute toggling.
   Loaded AFTER sds.css, overriding its :root tokens. */

:root {
  /* ---------- Wedding palette mapped onto SDS brand/default tokens ----------
     Brand = sea accent (ampersand color), with navy text/icons on top for AA. */
  --sds-color-background-brand-default: var(--accent);      /* #6CDDEA cyan */
  --sds-color-background-brand-hover: #4FC9D7;              /* deeper cyan for hover */
  --sds-color-background-brand-secondary: var(--accent);
  --sds-color-background-brand-secondary-hover: #4FC9D7;
  --sds-color-border-brand-default: var(--accent);
  --sds-color-border-brand-secondary: var(--accent);
  --sds-color-text-brand-default: #1A6D7E;                  /* deeper cyan for text-on-cream AA */
  --sds-color-text-brand-on-brand: var(--text);             /* navy on cyan = 9.1:1 AAA */
  --sds-color-icon-brand-default: var(--accent);
  --sds-color-icon-brand-on-brand: var(--text);             /* navy check/dot on cyan fill */

  --sds-color-background-default-default: var(--bg);
  --sds-color-background-default-default-hover: var(--bg-sunk);
  --sds-color-background-default-secondary: var(--bg);
  --sds-color-background-default-secondary-hover: var(--bg-sunk);
  --sds-color-background-default-tertiary: var(--bg-sunk);
  --sds-color-text-default-default: var(--text);
  --sds-color-text-default-secondary: var(--text-muted);
  --sds-color-text-default-tertiary: var(--text-muted);
  --sds-color-border-default-default: var(--line-medium);
  --sds-color-border-default-secondary: var(--line);
  --sds-color-icon-default-default: var(--text);
  --sds-color-icon-default-secondary: var(--text-muted);

  --sds-color-background-disabled-default: var(--bg-sunk);
  --sds-color-border-disabled-default: var(--line);
  --sds-color-text-disabled-default: var(--text-muted);
  --sds-color-icon-disabled-default: var(--text-muted);
  --sds-color-icon-disabled-on-disabled: var(--bg);

  --sds-color-background-danger-default: var(--error);
  --sds-color-border-danger-default: var(--error);
  --sds-color-border-danger-secondary: var(--error);
  --sds-color-text-danger-default: var(--error);
  --sds-color-text-danger-on-danger: var(--bg);

  /* Global focus ring — navy for max visibility on both cream bg and sea-filled states */
  --global-focus-ring-size: 2px;
  --global-focus-ring-color: var(--text);
  --global-line-height-paragraph: 1.55;

  /* Typography: force SDS fonts to use wedding's Instrument Sans */
  --sds-font-family-default: var(--font-sans);
  --sds-font-body-base: 400 20px/1.55 var(--font-sans);
  --sds-font-body-small: 400 17px/1.5 var(--font-sans);
  --sds-font-body-strong: 500 20px/1.55 var(--font-sans);
  --sds-font-heading-base: 400 32px/1.1 var(--font-serif);
  --sds-font-subheading-base: 400 24px/1.2 var(--font-serif);
  --sds-font-link-base: 400 20px/1.55 var(--font-sans);

  /* Radius — slight softness, editorial not plushy */
  --sds-size-radius-100: 3px;
  --sds-size-radius-200: 4px;
  --sds-size-radius-300: 6px;
}

/* ==========================================================================
   Native-state bridges — make SDS components respond to :checked, :hover,
   :focus-visible without react-aria data-attrs.
   ========================================================================== */

/* ---------- Radio ---------- */
.radio-field:has(input[type="radio"]:checked) .radio {
  --radio-background: var(--sds-color-background-brand-default);
  --radio-border: var(--radio-background);
}
.radio-field:has(input[type="radio"]:checked) .radio > .radio-check {
  display: block;
}

.radio-field:focus-within .radio::before {
  --offset: calc(var(--sds-size-stroke-border) * 2);
  content: "";
  border-radius: calc(var(--radio-border-radius) + var(--offset));
  bottom: calc(-1 * var(--offset));
  box-shadow: 0 0 0 var(--global-focus-ring-size) var(--global-focus-ring-color);
  left: calc(-1 * var(--offset));
  position: absolute;
  right: calc(-1 * var(--offset));
  top: calc(-1 * var(--offset));
}

.radio-field:hover .radio {
  --radio-border: var(--text);
}

/* ---------- Checkbox ---------- */
.checkbox-field:has(input[type="checkbox"]:checked) > .checkbox {
  --checkbox-background: var(--sds-color-background-brand-default);
  --checkbox-border: var(--checkbox-background);
}
.checkbox-field:has(input[type="checkbox"]:checked) > .checkbox > .icon-selected {
  display: block;
}
.checkbox-field:focus-within > .checkbox::before {
  --offset: calc(var(--sds-size-stroke-border) * 2);
  content: "";
  border-radius: calc(var(--checkbox-border-radius) + var(--offset));
  bottom: calc(-1 * var(--offset));
  box-shadow: 0 0 0 var(--global-focus-ring-size) var(--global-focus-ring-color);
  left: calc(-1 * var(--offset));
  position: absolute;
  right: calc(-1 * var(--offset));
  top: calc(-1 * var(--offset));
}
.checkbox-field:hover > .checkbox {
  --checkbox-border: var(--text);
}

/* ---------- Button ---------- */
.button:hover:not([data-disabled]):not(:disabled) {
  --button-background-color: var(--sds-color-background-brand-hover);
  --button-border-color: var(--sds-color-background-brand-hover);
}
.button.button-variant-neutral:hover:not([data-disabled]):not(:disabled) {
  --button-background-color: var(--sds-color-background-default-secondary-hover);
}
.button:focus-visible {
  outline: none;
}
.button:focus-visible::before {
  --offset: calc(var(--sds-size-stroke-border) * 2);
  content: "";
  border-radius: calc(var(--border-radius) + var(--offset));
  bottom: calc(-1 * var(--offset));
  box-shadow: 0 0 0 var(--global-focus-ring-size) var(--global-focus-ring-color);
  left: calc(-1 * var(--offset));
  position: absolute;
  right: calc(-1 * var(--offset));
  top: calc(-1 * var(--offset));
}

/* ---------- Input + Textarea ---------- */
.input:focus,
.input:focus-visible,
.text-area:focus,
.text-area:focus-visible {
  --input-border-color: var(--sds-color-border-brand-secondary);
  --text-area-border-color: var(--sds-color-border-brand-secondary);
  outline: none;
}

/* ---------- Hide native inputs that SDS wraps visually ---------- */
.radio-field > input[type="radio"],
.checkbox-field > input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  margin: 0;
  width: 0;
  height: 0;
}