/* ==========================================================================
   Certified Bling — button system (Phase 1, hierarchy clarified Phase 2)
   A real 3-tier hierarchy, not five competing styles:

     PRIMARY    .cb-btn--primary   High-contrast, one per view at most.
                                   Build Yours, Create Custom, Design With AI.
     SECONDARY  .cb-btn--secondary Understated, a parallel action.
                                   View Collection, Learn More.
     TERTIARY   .cb-btn--text      Directional text link, no fill/border.
                                   See the full piece →, View all FAQ →.

   --glass and --utility are NOT a 4th/5th tier competing with the three
   above — they're context-specific skins for places the hierarchy doesn't
   reach: --glass only inside a genuinely floating surface (the AI Concierge
   trigger, a sticky mobile CTA), --utility only for compact in-row controls
   (quantity steppers, "Copy Link"). A view never has to choose between
   "primary" and "glass" — the context already decided that.

   Rectangular (no pills except --glass, which gets a soft radius because
   it's glass), mono-uppercase labels, clear hover/focus/disabled states,
   44px+ touch targets throughout.
   ========================================================================== */

.cb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	min-height: var(--cb-touch-min);
	padding: 1.05rem 2rem;
	/* Suisse Int'l per the Phase 1 typography lock — buttons are UI, not a
	   technical/eyebrow label. Weight 500 keeps the same confident presence
	   mono's even rhythm gave it. */
	font-family: var(--cb-font-body);
	font-size: var(--cb-text-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	line-height: 1;
	white-space: nowrap;
	border-radius: 0;
	cursor: pointer;
	transition: background var(--cb-transition), color var(--cb-transition), border-color var(--cb-transition), opacity var(--cb-transition);
}
.cb-btn:hover { text-decoration: none; }
.cb-btn:disabled, .cb-btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .cb-btn { transition: none; } }

/* 1. Primary — solid, the one high-commitment action per view
      (Build Yours, Create With AI, Start Designing). */
.cb-btn--primary {
	background: var(--cb-white);
	color: var(--cb-black);
	border: 1px solid var(--cb-white);
}
.cb-btn--primary:hover { background: transparent; color: var(--cb-white); }
.cb-section--light .cb-btn--primary { background: var(--cb-black); color: var(--cb-white); border-color: var(--cb-black); }
.cb-section--light .cb-btn--primary:hover { background: transparent; color: var(--cb-black); }

/* 2. Secondary — outline, a parallel but quieter action
      (Try It On beside Build Yours, View Collection). */
.cb-btn--secondary {
	background: transparent;
	color: var(--cb-white);
	border: 1px solid color-mix(in srgb, var(--cb-white) 45%, transparent);
}
.cb-btn--secondary:hover { background: var(--cb-white); color: var(--cb-black); border-color: var(--cb-white); }
.cb-section--light .cb-btn--secondary { color: var(--cb-black); border-color: color-mix(in srgb, var(--cb-black) 35%, transparent); }
.cb-section--light .cb-btn--secondary:hover { background: var(--cb-black); color: var(--cb-white); border-color: var(--cb-black); }

/* 3. Text / arrow link — the quietest CTA (Explore, "View all FAQ →"),
      no border or fill, just type + a hover shift on the arrow glyph. */
.cb-btn--text {
	padding: 0.2rem 0;
	min-height: 0;
	background: none;
	border: 0;
	color: var(--cb-white);
	text-underline-offset: 0.3em;
}
.cb-btn--text:hover { text-decoration: underline; }
.cb-btn--text .cb-btn__arrow { display: inline-block; transition: transform var(--cb-transition); }
.cb-btn--text:hover .cb-btn__arrow { transform: translateX(3px); }
.cb-section--light .cb-btn--text { color: var(--cb-black); }

/* 4. Glass action — floating/overlay contexts only: the AI Concierge
      trigger, a sticky mobile "Build Yours", a configurator-step action.
      The one place a soft radius is correct (see liquid-glass.css). */
.cb-btn--glass {
	background: var(--glass-bg);
	backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
	border: 1px solid var(--glass-border);
	border-radius: 10px;
	color: var(--cb-white);
}
.cb-btn--glass:hover { background: var(--glass-bg-strong); }
@media (prefers-reduced-transparency: reduce) {
	.cb-btn--glass { background: var(--cb-ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* 5. Small utility action — compact, in-card/in-row actions (quantity
      stepper buttons, "Copy Link", a filter chip's clear icon). Square-ish,
      icon-first; still meets the touch-target minimum via padding, not
      visual size, on an icon-only button (wrap the icon with this class and
      keep a visually-hidden label for the accessible name). */
.cb-btn--utility {
	min-width: var(--cb-touch-min);
	min-height: var(--cb-touch-min);
	padding: 0.5rem 0.75rem;
	background: transparent;
	color: var(--cb-mute);
	border: 1px solid var(--cb-line-soft);
	font-size: var(--cb-text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.cb-btn--utility:hover { color: var(--cb-white); border-color: var(--cb-white); }
.cb-section--light .cb-btn--utility { color: var(--cb-ink-mute); border-color: var(--cb-line-dark); }
.cb-section--light .cb-btn--utility:hover { color: var(--cb-black); border-color: var(--cb-black); }

/* Size modifier — a compact primary/secondary for tight rows (e.g. two CTAs
   on a narrow product card). */
.cb-btn--small { padding: 0.65rem 1.1rem; min-height: 2.25rem; font-size: 0.6875rem; }