/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.22_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.22_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/globals.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * GiftDrop design tokens. See BRAND.md for rationale and contrast verification.
 *
 * Light and dark are both first-class. Every colour pairing used here meets
 * WCAG 2.2 AA — re-verify before introducing a new one.
 */

:root {
  /* Brand — teal reads institutional rather than startup. */
  --gd-primary: #0f6e64;
  --gd-primary-hover: #0b564e;
  --gd-primary-subtle: #e6f4f2;
  --gd-on-primary: #ffffff;

  /* Accent is reserved for money. Using it decoratively breaks the signal. */
  --gd-accent: #c2571f;

  --gd-success: #1b7a44;
  --gd-warning: #8a5a00;
  --gd-danger: #a32b23;
  --gd-info: #1f5c94;

  --gd-bg: #fbfaf8;
  --gd-surface: #ffffff;
  --gd-surface-raised: #f5f3f0;
  --gd-border: #e2dfda;
  --gd-text: #1a1f1e;
  --gd-text-muted: #5b6664;

  /* Type */
  --gd-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --gd-text-display: clamp(2rem, 5vw, 2.75rem);
  --gd-text-title: 1.5rem;
  --gd-text-heading: 1.125rem;
  --gd-text-body: 1rem;
  --gd-text-small: 0.875rem;
  --gd-text-caption: 0.8125rem;

  /* 4px scale */
  --gd-1: 4px;
  --gd-2: 8px;
  --gd-3: 12px;
  --gd-4: 16px;
  --gd-6: 24px;
  --gd-8: 32px;
  --gd-12: 48px;
  --gd-16: 64px;

  --gd-radius-sm: 6px;
  --gd-radius-md: 10px;
  --gd-radius-lg: 16px;

  --gd-shadow-sm: 0 1px 2px rgb(26 31 30 / 6%), 0 1px 3px rgb(26 31 30 / 4%);
  --gd-shadow-md: 0 4px 12px rgb(26 31 30 / 8%), 0 2px 4px rgb(26 31 30 / 4%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --gd-primary: #3dbfae;
    --gd-primary-hover: #5fd3c3;
    --gd-primary-subtle: #12302d;
    --gd-on-primary: #0e1413;

    --gd-accent: #f0955c;

    --gd-success: #4ecb80;
    --gd-warning: #e0a93b;
    --gd-danger: #f0796f;
    --gd-info: #6bb3ee;

    --gd-bg: #0e1413;
    --gd-surface: #161d1c;
    --gd-surface-raised: #1e2726;
    --gd-border: #2c3634;
    --gd-text: #edefee;
    --gd-text-muted: #9aa6a3;

    --gd-shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --gd-shadow-md: 0 4px 12px rgb(0 0 0 / 45%);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--gd-bg);
  color: var(--gd-text);
  font-family: var(--gd-font);
  font-size: var(--gd-text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Focus is never removed — only restyled. */
:focus-visible {
  outline: 2px solid var(--gd-primary);
  outline-offset: 2px;
  border-radius: var(--gd-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

main {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--gd-12) var(--gd-4) var(--gd-16);
}

h1 {
  font-size: var(--gd-text-display);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--gd-4);
  /* Capped measure keeps long headlines readable. */
  max-width: 20ch;
}

h2 {
  font-size: var(--gd-text-title);
  font-weight: 600;
  line-height: 1.25;
  margin: var(--gd-12) 0 var(--gd-4);
}

h3 {
  font-size: var(--gd-text-heading);
  font-weight: 600;
  margin: 0 0 var(--gd-2);
}

p {
  margin: 0 0 var(--gd-4);
  max-width: 68ch;
}

.lede {
  font-size: 1.0625rem;
  color: var(--gd-text-muted);
}

code {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: 0.9em;
  background: var(--gd-surface-raised);
  border: 1px solid var(--gd-border);
  border-radius: var(--gd-radius-sm);
  padding: 0.1em 0.35em;
}

.card {
  background: var(--gd-surface);
  border: 1px solid var(--gd-border);
  border-radius: var(--gd-radius-md);
  box-shadow: var(--gd-shadow-sm);
  padding: var(--gd-6);
  margin-bottom: var(--gd-3);
}

.badge {
  display: inline-block;
  font-size: var(--gd-text-caption);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: var(--gd-1) var(--gd-2);
  border-radius: 999px;
  background: var(--gd-primary-subtle);
  color: var(--gd-primary);
  margin-bottom: var(--gd-4);
}

/* Money. Largest element on any screen that shows it, always tabular. */
.amount {
  font-size: 2rem;
  font-weight: 650;
  color: var(--gd-accent);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.amount-sm {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* States always pair colour with an icon and a text label — never colour alone. */
.notice {
  display: flex;
  gap: var(--gd-3);
  padding: var(--gd-4);
  border-radius: var(--gd-radius-md);
  border: 1px solid var(--gd-border);
  background: var(--gd-surface-raised);
  font-size: var(--gd-text-small);
  color: var(--gd-text-muted);
  margin-bottom: var(--gd-3);
}

.notice-icon {
  flex: 0 0 auto;
  line-height: 1.6;
}

.notice > div {
  min-width: 0;
}

.notice-warning {
  border-color: color-mix(in srgb, var(--gd-warning) 40%, var(--gd-border));
}

.notice-info {
  border-color: color-mix(in srgb, var(--gd-info) 40%, var(--gd-border));
}

dl.status {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-gap: var(--gd-2) var(--gd-6);
  gap: var(--gd-2) var(--gd-6);
  margin: var(--gd-3) 0 0;
  font-size: var(--gd-text-small);
}

dt {
  color: var(--gd-text-muted);
}

dd {
  margin: 0;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

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

/* Minimum 44px target — thumbs, on a phone, in a hurry. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--gd-6);
  border: 1px solid transparent;
  border-radius: var(--gd-radius-md);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 150ms ease;
}

.btn-primary {
  background: var(--gd-primary);
  color: var(--gd-on-primary);
}

.btn-primary:hover {
  background: var(--gd-primary-hover);
}

.btn-secondary {
  background: var(--gd-surface);
  border-color: var(--gd-border);
  color: var(--gd-text);
}

.btn-secondary:hover {
  background: var(--gd-surface-raised);
}

a {
  color: var(--gd-primary);
  text-underline-offset: 0.15em;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  white-space: nowrap;
}