/*
 * CupsByAA public site, shadcn skin
 * The public theme (cups-ui.css) is driven by --cups-* tokens. This sheet loads
 * after it and gives those tokens the shadcn/ui values: white and neutral
 * surfaces, hairline borders, small radii, quiet shadows, one brand pink.
 * No selector in cups-ui.css changes, so every page moves together.
 * Shared tokens and .ui-* components: /css/shadcn.css.
 */

:root {
  --cups-ink: #0a0a0a;
  --cups-ink-soft: #525252;
  --cups-canvas: #ffffff;
  --cups-surface: #ffffff;
  --cups-surface-soft: #fafafa;
  --cups-line: #e5e5e5;
  --cups-line-strong: #d4d4d4;
  --cups-sky-50: #fafafa;
  --cups-sky-100: #f5f5f5;
  --cups-blush-50: #fdf2f7;
  --cups-blush-100: #fbe1ed;
  --cups-public-ink: #0a0a0a;
  --cups-public-muted: #525252;
  --cups-public-line: #e5e5e5;
  --cups-surface-emphasis: #fafafa;
  --cups-shadow-tint: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --cups-radius-sm: 8px;
  --cups-radius-md: 10px;
  --cups-radius-lg: 14px;
  --cups-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --cups-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

body[data-surface]:not([data-surface="admin"]) {
  background: var(--background) !important;
  color: var(--foreground);
}

/* Surfaces that painted their own gradient instead of reading a token. The
   cup proof stage (.cpr-*) keeps its studio backdrop: it is product imagery. */
.cups-custom-seo,
body[data-page="product"] main,
.cups-track-page,
.cups-base-color {
  background: var(--background);
}

.cups-custom-seo__cta,
.cups-base-color__option.is-selected {
  background: var(--primary-soft);
}

.cups-track-card::before { display: none; }

.cups-track-icon,
.cups-track-button {
  background: var(--primary);
  box-shadow: var(--shadow-xs);
}

.cups-track-button:hover { background: var(--primary-hover); }

/* The blurred colour blobs behind the tracking card. */
.cups-track-page::before,
.cups-track-page::after { display: none; }

/* Cart and checkout painted a sky-to-blush band behind the card. */
body[data-page="cart"] main,
body[data-page="checkout"] main { background: var(--background); }

/* Pill-shaped controls take the shadcn medium radius. Round icon buttons,
   colour swatches and number badges stay round. */
.cups-home-path__cta,
.cups-desktop-nav a,
.cups-shop-filters a,
.cups-segmented-control > a,
.cups-mobile-currency a,
.cups-public-footer a.cups-footer-location { border-radius: var(--cups-radius-sm); }

.cups-desktop-nav { border-radius: var(--cups-radius-md); }

body[data-surface]:not([data-surface="admin"]) :where(main, header) :where(a, button)[class*="rounded-full"][class*="px-"] {
  border-radius: var(--cups-radius-sm);
}

/* ---------------------------------------------------------------------------
   Consistency pass (17 Oct 2026, FU-2628). Measured on the live site with
   scripts/public-consistency-audit.mjs: two pinks, pill and square buttons side
   by side, gradient CTA bands, 24-30px card radii and 8-25px shadows on /custom,
   11px labels. Everything below maps those back to the shadcn tokens.
   ------------------------------------------------------------------------- */

/* One pink. Tailwind's primary-600 was #db2777 while --primary is #c83f7d, so
   the home, landing and careers buttons were a different pink from /custom and
   /track. Tailwind v4 reads these through var(), and this unlayered :root
   beats its theme layer. Public layouts only: the admin is not touched. */
:root {
  --color-primary-500: #d9578f;
  --color-primary-600: var(--primary);
  --color-primary-700: var(--primary-hover);
}

/* Radii: shadcn cards are --radius + 4px at most. */
.cups-order-hero,
.cups-track-card,
.cups-custom-seo__card,
body[data-surface]:not([data-surface="admin"]) :where(.rounded-3xl) { border-radius: 14px; }

.cups-step-rail,
.cups-track-input-wrap,
.cups-track-button,
.cups-track-icon,
.cups-shop-facts,
body[data-surface]:not([data-surface="admin"]) :where(.rounded-2xl):not(canvas) { border-radius: var(--cups-radius-md); }

/* Shadows: cards sit on a hairline border with shadow-xs. Hover lift and
   dialogs keep their own. */
.cups-step-rail,
.cups-order-panel,
.cups-checkout {
  box-shadow: var(--shadow-xs) !important;
}
body[data-surface]:not([data-surface="admin"]) .cups-order-choice,
body[data-surface]:not([data-surface="admin"]) button.border-2 { box-shadow: none; }
.cups-custom-cta__action { box-shadow: var(--shadow-xs); }

/* Page-level CTAs and eyebrows written with their own pill and gradient:
   cup-printing-prices (.pp-*), the guides (.gd-*), careers (.cj-*, .jb-*). */
body[data-surface] :is(.pp-btn, .gd-btn, .jb-cta) {
  border-radius: var(--cups-radius-sm);
  background: var(--primary);
}
body[data-surface] :is(.pp-btn, .gd-btn, .jb-cta):hover { background: var(--primary-hover); }
body[data-surface] :is(.pp-eyebrow, .gd-eyebrow, .pp-key, .cj-tag, .cj-eyebrow, .jb-eyebrow) {
  border-radius: var(--cups-radius-sm);
}
body[data-surface] :is(.pp-cta, .gd-cta, .jb-aside) {
  background: var(--primary-soft);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.cups-apple-pay-accepted {
  background: var(--card);
  border-color: var(--border);
  border-radius: var(--cups-radius-md);
  box-shadow: none;
}

/* Order-form notes painted as two-tone gradients: flat soft tones, same meaning. */
body[data-surface] [style*="linear-gradient(to right, #eff6ff"],
body[data-surface] [style*="linear-gradient(to right, #f0f9ff"] { background: var(--info-soft) !important; border-color: #bfdbfe !important; }
body[data-surface] [style*="linear-gradient(to right, #fef3c7"] { background: var(--warning-soft) !important; border-color: #fde68a !important; }
body[data-surface] [style*="linear-gradient(to right, #fdf2f8"] { background: var(--primary-soft) !important; }
body[data-surface]:not([data-surface="admin"]) :is(.bg-gradient-to-r, .bg-gradient-to-br):not([id*="Progress"]) { background-image: none; background-color: var(--primary-soft); }

/* Text floor: shadcn's smallest type is 12px (text-xs). */
body[data-surface]:not([data-surface="admin"]) :is(.pp-eyebrow, .pp-per, .gd-eyebrow, .jb-eyebrow, .cj-eyebrow, .cups-client-wall__title, .cups-price-card__tag),
body[data-surface]:not([data-surface="admin"]) main :where(.text-\[10px\], .text-\[11px\]) { font-size: 12px; }