/* Generated by scripts/sync-site.mjs from src/components/gift-card-face.css (sha256 16eb6b489c8a5d606fc726dc0b2dbc515df7d4172e5f3a82870cd393e2697bfa). Do not edit: change the source, then run `node scripts/sync-site.mjs`. */
/*
 * The gift card face (docs/design-and-brand.md section 12). Plain CSS on the
 * design variables only, because it ships in two builds: the app imports it,
 * and scripts/sync-site.mjs copies it verbatim into the static site. Sizes use
 * the section 4 scale; spacing uses the section 6 steps; radius is --radius.
 *
 * Portrait, 5:8 (CTO, 2026-09-26). The card is a size container with two
 * sizes, each made only of named steps (section 4 allows nothing fluid): the
 * fan's (a content box below 16rem) and the page's and the dialog's (16rem and up; container queries measure the content box, inside the padding).
 */
.gcf {
  /* The fill and the secondary text colour, which a decorative tone changes
     together: the muted-foreground fails AA on gold, sea and coral. */
  --gcf-fill: var(--card);
  --gcf-subtle: var(--muted-foreground);
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  aspect-ratio: 5 / 8;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 1rem;
  background-color: var(--gcf-fill);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* One small, offset shadow on the hairline: the elevated-surface token of
     section 6, not a wide halo. */
  box-shadow:
    0 1px 2px color-mix(in oklch, var(--foreground) 6%, transparent),
    0 4px 8px -4px color-mix(in oklch, var(--foreground) 12%, transparent);
  font-family: var(--font-geist-sans), system-ui, sans-serif;
}

.gcf :where(p) {
  margin: 0;
}

/* The index: the business named in the top-left corner, as a playing card
   carries its rank, so a fanned hand reads at rest. It wraps only between
   words. */
.gcf-business {
  min-width: 0;
  /* It wraps only between words; in a fanned hand it is narrowed further
     (coming-soon.css). */
  overflow-wrap: normal;
  hyphens: none;
  font-size: 1.125rem;
  line-height: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.gcf-preview {
  flex: none;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  color: var(--muted-foreground);
  background: var(--background);
}

.gcf-issuer {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--gcf-subtle);
}

.gcf-amount {
  margin-top: 0.75rem;
  overflow-wrap: anywhere;
  font-family: var(--font-geist-mono), ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
}

.gcf-message {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* The code at the bottom, like an opened Wallet pass: scannable at the fan's
   size, and large in the dialog. */
.gcf-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

.gcf-bottom .gcf-preview {
  margin-bottom: 0.25rem;
}

/* 4.5rem: 72px for a 21-module code, over 3px a module, which a phone at
   the till reads. */
.gcf-qr {
  width: 4.5rem;
  height: 4.5rem;
}

.gcf-code {
  font-family: var(--font-geist-mono), ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
}

@container (min-width: 16rem) {
  .gcf-business {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .gcf-issuer {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .gcf-amount {
    margin-top: 1.5rem;
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .gcf-message {
    margin-top: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .gcf-bottom {
    gap: 0.5rem;
  }

  .gcf-qr {
    width: 8rem;
    height: 8rem;
  }

  .gcf-code {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

/* Decorative tones (section 5): marketing surface only, solid fills, never
   text. Text on every fill is the foreground (9.25:1 or better). */
.gcf--gold,
.gcf--sea,
.gcf--coral,
.gcf--sand {
  --gcf-subtle: var(--card-foreground);
}

.gcf--gold {
  --gcf-fill: var(--deco-gold);
}

.gcf--sea {
  --gcf-fill: var(--deco-sea);
}

.gcf--coral {
  --gcf-fill: var(--deco-coral);
}

.gcf--sand {
  --gcf-fill: var(--deco-sand);
}

/* One small same-origin tile per card, drawn in the foreground at about a
   tenth of its strength: texture, not imagery. */
.gcf--pattern-stripes {
  background-image: url("/patterns/stripes.svg");
}

.gcf--pattern-waves {
  background-image: url("/patterns/waves.svg");
}

.gcf--pattern-dots {
  background-image: url("/patterns/dots.svg");
}

.gcf--pattern-grid {
  background-image: url("/patterns/grid.svg");
}

.gcf--pattern-chevrons {
  background-image: url("/patterns/chevrons.svg");
}