/* ==========================================================================
   Certified Bling — design tokens (Phase 1)

   Dark-canvas-first, same foundation as the current certified-bling theme
   (--cb-black/--cb-white/--cb-paper are unchanged hex values — brand colors
   preserved, not reinvented) plus the additions this phase asks for:
   champagne gold + chrome accents, a third surface tier, formalized semantic
   colors, and a context-aware focus ring.

   Breakpoint scale (documented here, used literally in every file below —
   the old theme accumulated 9 uncoordinated breakpoints; this phase fixes
   that by having exactly one scale, used consistently):
     375   --bp-xs   small phones
     430   --bp-sm   large phones
     768   --bp-md   tablets
     1024  --bp-lg   small desktop / tablet landscape
     1280  --bp-xl   desktop
     1440  --bp-2xl  large desktop
   CSS custom properties can't be used inside @media conditions, so these are
   written as literal px in every media query — this comment is the single
   source of truth for which six numbers exist.
   ========================================================================== */

:root {
	/* ---- Core palette (unchanged from the current site) -------------- */
	--cb-black:  #050505;   /* primary dark canvas */
	--cb-ink:    #0d0d0f;   /* raised dark surface — cards, inputs on dark */
	--cb-charcoal: #19181a; /* NEW — a third, slightly lighter dark surface for
	                           nested panels (e.g. a card inside a dark section) */
	--cb-white:  #f5f5f5;   /* primary text/icon on dark */
	--cb-paper:  #f4f2ec;   /* warm-ivory section background */
	--cb-paper-2: #ece7da;  /* NEW — a second, slightly deeper warm surface for
	                           nested panels on a paper section */
	--cb-mute:   #8a8c92;   /* secondary text on dark — 6.1:1 on --cb-black */
	--cb-ink-mute: #625d55; /* secondary text on paper — 5.8:1 on --cb-paper */
	--cb-line:   #26262a;   /* literal hairline color */

	--cb-line-soft:  color-mix(in srgb, var(--cb-white) 14%, transparent);
	--cb-line-faint: color-mix(in srgb, var(--cb-white) 8%, transparent);
	--cb-line-dark:  color-mix(in srgb, var(--cb-black) 16%, transparent);

	/* ---- NEW: champagne gold — the one accent, spent deliberately ---- */
	--cb-gold:      #b4935a; /* text/icon/border on dark — 7.1:1 on --cb-black */
	--cb-gold-ink:  #5c4524; /* text/icon on paper — 8.0:1 on --cb-paper */
	--cb-gold-soft: #e8dcc0; /* pale gold tint — badges, subtle fills only */
	--cb-gold-line: color-mix(in srgb, var(--cb-gold) 45%, transparent);

	/* NEW: chrome/metallic — rare, decorative only (a badge edge, a single
	   premium micro-detail). Never a background for text or a button fill. */
	--cb-chrome: linear-gradient(135deg, #9aa0a6 0%, #eceeef 45%, #7f848a 100%);

	/* ---- NEW: semantic — accessibility-checked on both canvases ------ */
	--cb-success:     #4fa06c; /* on dark — 6.4:1 */
	--cb-success-ink: #2f6b45; /* on paper — 5.7:1 */
	--cb-error:         #b32d2e; /* on paper — 5.6:1 (existing, from the WC Blocks work) */
	--cb-error-on-dark: #e5534b; /* on dark — 5.5:1 (existing) */
	--cb-notice:      var(--cb-gold);     /* on dark — reuses gold, 7.1:1 */
	--cb-notice-ink:  #7a5a1f;            /* on paper — 5.7:1 */

	/* ---- NEW: context-aware focus ring --------------------------------
	   Fixes a real latent bug: the site-wide focus outline was hardcoded to
	   --cb-white everywhere, including on light/paper sections, where white
	   on --cb-paper measures ~1:1 — effectively invisible. --cb-focus now
	   resolves per canvas; .cb-section--light (and any --cb-paper surface)
	   overrides it below. */
	--cb-focus: var(--cb-white);

	/* ---- Typography ---------------------------------------------------
	   Approved typeface direction (Phase 1 lock): Canela for display,
	   Suisse Int'l for everything else. NEITHER is licensed/embedded yet —
	   both are paid commercial faces and we do not embed or distribute
	   unlicensed font files. Naming them first in each stack is deliberate:
	   the instant assets/css/fonts.css's @font-face blocks are uncommented
	   (see that file — it's the whole activation step), every element using
	   these tokens picks the real face up with ZERO other changes anywhere
	   in the system. Until then each stack's fallback chain is chosen to
	   *approximate* the real face's character so the hierarchy reads
	   correctly today: Georgia/Palatino for Canela's editorial serif
	   warmth, Helvetica Neue for Suisse's neutral grotesk (the two already
	   share a lineage, so this fallback is close, not just "a safe sans"). */
	--cb-font-display: "Canela", Georgia, "Iowan Old Style", "Palatino Linotype",
		"Book Antiqua", "Times New Roman", serif;
	--cb-font-body: "Suisse Intl", "Helvetica Neue", Helvetica, Arial,
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--cb-font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;

	/* Fluid type scale (mobile-first; clamp handles the desktop jump) */
	--cb-text-2xs:  0.6875rem;                                  /* labels, nav, utility */
	--cb-text-xs:   0.75rem;                                    /* buttons, captions */
	--cb-text-sm:   clamp(0.8125rem, 0.78rem + 0.15vw, 0.9rem); /* product names */
	--cb-text-base: clamp(0.95rem, 0.9rem + 0.22vw, 1.0625rem); /* body */
	--cb-text-lg:   clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
	--cb-text-xl:   clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);     /* subheadline */
	--cb-text-2xl:  clamp(2rem, 1.35rem + 3vw, 3.75rem);        /* section headline */
	--cb-text-3xl:  clamp(2.5rem, 1.2rem + 6vw, 5.5rem);
	--cb-display:   clamp(2.85rem, 1rem + 9vw, 9rem);           /* hero headline */

	--cb-tracking-tight: -0.022em;
	--cb-tracking-label: 0.16em;
	--cb-leading-tight: 1.0;
	--cb-leading-body:  1.6;

	/* ---- Spacing scale (unchanged — already proven) ------------------- */
	--cb-space-3xs: 0.25rem;
	--cb-space-2xs: 0.5rem;
	--cb-space-xs:  0.75rem;
	--cb-space-s:   1rem;
	--cb-space-m:   1.5rem;
	--cb-space-l:   2.5rem;
	--cb-space-xl:  4rem;
	--cb-space-2xl: 6rem;
	--cb-space-3xl: clamp(5rem, 3rem + 10vw, 11rem);

	/* ---- Layout -------------------------------------------------------- */
	--cb-wide: 84rem;      /* 1344px — editorial/wide sections, collection grids */
	--cb-content: 46rem;   /* 736px — reading-width copy */
	--cb-commerce: 80rem;  /* 1280px — cart/checkout/account (from the WC Blocks fix) */
	--cb-gutter: clamp(1.25rem, 0.6rem + 3vw, 4.5rem);
	--cb-grid-gap: clamp(0.75rem, 0.4rem + 1.5vw, 1.5rem); /* product-grid gaps */

	--cb-header-h: 68px;
	--cb-touch-min: 44px; /* minimum touch target, both axes */

	--cb-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
	--cb-transition-slow: 480ms cubic-bezier(0.16, 1, 0.3, 1);

	--cb-z-header: 100;
	--cb-z-nav: 200;
	--cb-z-overlay: 150;
	--cb-z-sticky-cta: 90;
	--cb-z-concierge: 300;

	/* ---- Liquid Glass ---------------------------------------------------
	   An interaction-surface language, not a page skin — used only where
	   content genuinely floats above other content (see liquid-glass.css for
	   the gated component list). */
	--glass-bg:        rgba(255, 255, 255, 0.08);
	--glass-bg-strong: rgba(255, 255, 255, 0.14);
	--glass-border:    rgba(255, 255, 255, 0.28);
	--glass-blur:      18px;
	--glass-saturate:  140%;
	--glass-radius:    14px; /* the one place gentle rounding is intentional —
	                            glass-as-material implies a soft edge; nothing
	                            else in the system rounds like this */
	--glass-shadow:    0 12px 30px -10px rgba(0, 0, 0, 0.5);

	color-scheme: dark;
}

/* Light/paper sections flip the handful of tokens that must not stay
   dark-canvas values. Apply .cb-section--light (existing convention) or
   .cb-surface--paper (new, for nested panels) to get the correct focus ring,
   border tone, and muted-text color automatically. */
.cb-section--light,
.cb-surface--paper {
	--cb-focus: var(--cb-black);
}