/*
 * Married on Tape Design System
 * -----------------------------
 * Single source of truth for customer-facing foundations and primitives.
 * Component usage and contribution rules live in design-system/README.md.
 */

@font-face {
  font-family: "Recoleta";
  src: url("../fonts/Recoleta-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Recoleta";
  src: url("../fonts/Recoleta-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-VariableFont.ttf")
    format("truetype-variations");
  font-weight: 400 750;
  font-display: swap;
}

:root {
  /* Brand ramp */
  --ds-color-brand-100: #f5e6e2;
  --ds-color-brand-200: #ebcfca;
  --ds-color-brand-300: #dca9a2;
  --ds-color-brand-400: #ca857d;
  --ds-color-brand-500: #b76a63;
  --ds-color-brand-600: #a35c54;
  --ds-color-brand-700: #8d5247;
  --ds-color-brand-800: #713f38;
  --ds-color-brand-900: #55302b;

  /* Neutral and surface ramp */
  --ds-color-neutral-0: #fffdf8;
  --ds-color-neutral-50: #fffaf1;
  --ds-color-neutral-100: #f6efe4;
  --ds-color-neutral-200: #f1e8da;
  --ds-color-neutral-300: #e8ddca;
  --ds-color-neutral-400: #d7c8b1;
  --ds-color-neutral-600: #5e574d;
  --ds-color-neutral-700: #332e28;
  --ds-color-neutral-900: #161514;

  /* Semantic color roles */
  --ds-color-canvas: var(--ds-color-neutral-100);
  --ds-color-surface: var(--ds-color-neutral-50);
  --ds-color-surface-raised: var(--ds-color-neutral-0);
  --ds-color-surface-muted: var(--ds-color-neutral-200);
  --ds-color-surface-strong: var(--ds-color-neutral-300);
  --ds-color-text: var(--ds-color-neutral-900);
  --ds-color-text-muted: var(--ds-color-neutral-600);
  --ds-color-border: var(--ds-color-neutral-400);
  --ds-color-on-dark: #fff8e8;

  --ds-color-success: #23633f;
  --ds-color-success-surface: #edf6ee;
  --ds-color-success-border: #c9dfcd;
  --ds-color-warning: #6b5413;
  --ds-color-warning-surface: #fff2c7;
  --ds-color-warning-border: #d5c07d;
  --ds-color-error: #9f2b2b;
  --ds-color-error-surface: #fbefee;
  --ds-color-error-border: #e9c0bc;
  --ds-color-info: #355b75;
  --ds-color-info-surface: #edf4f7;
  --ds-color-info-border: #c3d7e0;

  /* Interactive roles */
  --ds-color-action-primary: var(--ds-color-neutral-900);
  --ds-color-action-primary-hover: var(--ds-color-neutral-700);
  --ds-color-action-primary-foreground: var(--ds-color-on-dark);
  --ds-color-action-secondary: color-mix(
    in srgb,
    var(--ds-color-surface) 72%,
    transparent
  );
  --ds-color-action-secondary-hover: var(--ds-color-surface-muted);
  --ds-color-action-secondary-foreground: var(--ds-color-text);
  --ds-color-focus: var(--ds-color-text);
  --ds-color-field-background: #fff;
  --ds-color-field-border: var(--ds-color-border);
  --ds-color-field-border-active: var(--ds-color-text);

  /* Type */
  --ds-font-display: "Recoleta", Georgia, serif;
  --ds-font-body: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --ds-text-xs: 0.75rem;
  --ds-text-sm: 0.875rem;
  --ds-text-md: 1rem;
  --ds-text-lg: 1.125rem;
  --ds-text-xl: 1.25rem;
  --ds-leading-tight: 1.08;
  --ds-leading-body: 1.55;
  --ds-weight-regular: 400;
  --ds-weight-medium: 600;
  --ds-weight-semibold: 700;
  --ds-weight-bold: 750;

  /* 4 px spacing scale */
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-12: 3rem;
  --ds-space-16: 4rem;
  --ds-space-20: 5rem;
  --ds-space-28: 7rem;

  /* Shape, elevation and motion */
  --ds-radius-sm: 0.5rem;
  --ds-radius-md: 0.625rem;
  --ds-radius-lg: 0.875rem;
  --ds-radius-xl: 1.125rem;
  --ds-radius-2xl: 1.25rem;
  --ds-radius-full: 999px;
  --ds-shadow-sm: 0 8px 22px rgba(34, 25, 13, 0.12);
  --ds-shadow-md: 0 18px 42px rgba(34, 25, 13, 0.09);
  --ds-duration-fast: 140ms;
  --ds-duration-normal: 180ms;
  --ds-ease-standard: ease;
  --ds-control-height-sm: 36px;
  --ds-control-height-md: 42px;
  --ds-control-height-lg: 48px;
  --ds-control-height-field: 51px;

  /* Layout */
  --ds-container: min(1160px, 92vw);

  /* Compatibility aliases for existing layout CSS. Do not use in new code. */
  --bg: var(--ds-color-canvas);
  --surface: var(--ds-color-surface);
  --surface-2: var(--ds-color-surface-strong);
  --ink: var(--ds-color-text);
  --muted: var(--ds-color-text-muted);
  --line: var(--ds-color-border);
  --accent: var(--ds-color-brand-500);
  --accent-dark: var(--ds-color-brand-700);
  --success: var(--ds-color-success);
  --error: var(--ds-color-error);
  --serif: var(--ds-font-display);
  --sans: var(--ds-font-body);
  --container: var(--ds-container);
  --radius: var(--ds-radius-2xl);
  --pill: var(--ds-radius-full);
  --shadow: var(--ds-shadow-md);
}

/* Shared interaction baseline */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--ds-color-focus);
  outline-offset: 2px;
}

:where(button, input, select, textarea) {
  font: inherit;
}

/* Button component */
.btn {
  display: inline-flex;
  min-height: var(--ds-control-height-md);
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  padding: 0.72rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-full);
  cursor: pointer;
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: 0;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  transition:
    background-color var(--ds-duration-normal) var(--ds-ease-standard),
    border-color var(--ds-duration-normal) var(--ds-ease-standard),
    color var(--ds-duration-normal) var(--ds-ease-standard),
    transform var(--ds-duration-fast) var(--ds-ease-standard);
  -webkit-tap-highlight-color: transparent;
}

.btn-primary {
  border-color: var(--ds-color-action-primary);
  background: var(--ds-color-action-primary);
  color: var(--ds-color-action-primary-foreground);
}

.btn-primary:hover {
  border-color: var(--ds-color-action-primary-hover);
  background: var(--ds-color-action-primary-hover);
}

.btn-secondary,
.nav-cta {
  border-color: var(--ds-color-border);
  background: var(--ds-color-action-secondary);
  color: var(--ds-color-action-secondary-foreground);
}

.btn-secondary:hover,
.nav-cta:hover {
  border-color: var(--ds-color-text-muted);
  background: var(--ds-color-action-secondary-hover);
}

.btn-inverse {
  border-color: var(--ds-color-on-dark);
  background: transparent;
  color: var(--ds-color-on-dark);
}

.btn-inverse:hover {
  background: var(--ds-color-on-dark);
  color: var(--ds-color-text);
}

.btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--ds-color-text);
}

.btn-ghost:hover {
  background: var(--ds-color-surface-muted);
}

.btn-destructive {
  border-color: var(--ds-color-error);
  background: var(--ds-color-error);
  color: #fff;
}

.btn-destructive:hover {
  border-color: #7e2222;
  background: #7e2222;
}

.btn-link {
  min-height: var(--ds-control-height-md);
  padding-inline: var(--ds-space-2);
  border-color: transparent;
  background: transparent;
  color: var(--ds-color-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.btn-link:hover {
  color: var(--ds-color-brand-700);
}

.btn-icon {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
}

.btn-sm {
  min-height: var(--ds-control-height-sm);
  padding: 0.5rem 0.75rem;
  border-radius: var(--ds-radius-full);
  font-size: var(--ds-text-xs);
}

.btn-lg {
  min-height: var(--ds-control-height-lg);
  padding: 0.85rem 1.25rem;
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
}

.btn[aria-busy="true"] {
  cursor: wait;
}

.btn[aria-busy="true"]::after {
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  animation: ds-spin 0.7s linear infinite;
}

/* The navigation menu toggle is a compound icon button, not a new CTA. */
.menu-toggle {
  position: relative;
  display: none;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--ds-color-border);
  border-radius: 50%;
  background: transparent;
  color: var(--ds-color-text);
  cursor: pointer;
}

.menu-toggle:hover {
  background: var(--ds-color-surface-muted);
}

.menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  background: currentColor;
  transition:
    transform var(--ds-duration-normal) var(--ds-ease-standard),
    opacity var(--ds-duration-normal) var(--ds-ease-standard);
}

.menu-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(3px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-3px) rotate(-45deg);
}

/* Reusable surface, field and feedback primitives for new customer UI. */
.ds-card {
  padding: clamp(var(--ds-space-6), 4vw, var(--ds-space-12));
  border: 0;
  border-radius: var(--ds-radius-2xl);
  background: var(--ds-color-surface-raised);
  box-shadow: none;
}

.ds-card-outlined {
  border: 1px solid var(--ds-color-border);
}

.ds-card-raised {
  box-shadow: var(--ds-shadow-md);
}

.ds-form-grid {
  display: grid;
  gap: var(--ds-space-4);
}

.ds-form-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ds-field {
  display: grid;
  gap: var(--ds-space-2);
}

.ds-label {
  color: var(--ds-color-text);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
}

.ds-input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: var(--ds-control-height-field);
  padding: 0.76rem 0.85rem;
  border: 1px solid var(--ds-color-field-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-field-background);
  color: var(--ds-color-text);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  line-height: 1.35;
  transition: border-color var(--ds-duration-fast) var(--ds-ease-standard);
}

.ds-input:hover {
  border-color: var(--ds-color-text-muted);
}

.ds-input:focus,
.ds-input:focus-visible,
.ds-input:user-invalid,
.ds-input[aria-invalid="true"] {
  border-color: var(--ds-color-field-border-active);
  outline: none;
  box-shadow: none;
}

.ds-input:disabled {
  cursor: not-allowed;
  background: var(--ds-color-surface-muted);
  color: var(--ds-color-text-muted);
  opacity: 0.7;
}

.ds-help,
.ds-error {
  margin: 0;
  font-size: var(--ds-text-xs);
  line-height: 1.45;
}

.ds-help {
  color: var(--ds-color-text-muted);
}

.ds-error {
  color: var(--ds-color-error);
}

.ds-alert {
  padding: var(--ds-space-3) var(--ds-space-4);
  border: 1px solid var(--ds-color-info-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-info-surface);
  color: var(--ds-color-info);
}

.ds-alert-success {
  border-color: var(--ds-color-success-border);
  background: var(--ds-color-success-surface);
  color: var(--ds-color-success);
}

.ds-alert-warning {
  border-color: var(--ds-color-warning-border);
  background: var(--ds-color-warning-surface);
  color: var(--ds-color-warning);
}

.ds-alert-error {
  border-color: var(--ds-color-error-border);
  background: var(--ds-color-error-surface);
  color: var(--ds-color-error);
}

@keyframes ds-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .menu-toggle span {
    transition: none;
  }

  .btn[aria-busy="true"]::after {
    animation-duration: 1.4s;
  }
}

@media (max-width: 640px) {
  .ds-form-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}