/*!
Theme Name: Certified Bling
Theme URI: https://certifiedbling.com
Author: Certified Bling
Author URI: https://certifiedbling.com
Description: Custom editorial theme for Certified Bling — premium custom jewelry. Dark-first luxury fashion / streetwear direction: near-black canvas, high-contrast monochrome, oversized grotesk typography, cinematic imagery, Apple-level restraint. Classic PHP templates, theme.json design tokens, WooCommerce compatible, lightweight custom CSS and minimal vanilla JS. Homepage complete: hero, lifestyle gallery, certified favorites, create custom, FAQ, footer.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: certified-bling
Tags: custom-menu, featured-images, translation-ready, e-commerce
*/

/* ==========================================================================
   Certified Bling — base layer / global design system
   Tokens are declared in theme.json and surfaced by WordPress as
   --wp--preset--* custom properties; this file maps them to short semantic
   aliases and sets the reset + base element styles. Component, layout and
   section rules live in assets/css/*. Keep this file lightweight.
   ========================================================================== */

:root {
	/* ---- Palette (monochrome, dark-first) --------------------------- */
	--cb-black:  var(--wp--preset--color--black, #050505);   /* page canvas */
	--cb-ink:    var(--wp--preset--color--ink, #0d0d0f);     /* raised surface / solid header */
	--cb-white:  var(--wp--preset--color--white, #f5f5f5);   /* primary text */
	--cb-mute:   var(--wp--preset--color--mute, #8a8c92);    /* secondary text, cool gray */
	--cb-paper:  var(--wp--preset--color--paper, #f4f2ec);   /* optional light section */
	--cb-line:   var(--wp--preset--color--line, #26262a);    /* hairline on dark */

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

	/* On the warm-white sections */
	--cb-ink-mute:  #625d55;                                 /* muted dark secondary text (AA on --cb-paper) */
	--cb-line-dark: color-mix(in srgb, var(--cb-black) 16%, transparent);

	/* ---- Typography ---------------------------------------------------
	   No web-font dependency. A premium grotesk system stack: Helvetica /
	   Neue Haas lineage first for the editorial streetwear voice, with
	   platform grotesks (SF Pro, Segoe) as capable fallbacks. */
	--cb-font-display: var(--wp--preset--font-family--display,
		"Helvetica Neue", "Helvetica", "Arimo", "Arial", "SF Pro Display",
		-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	--cb-font-body: var(--wp--preset--font-family--body,
		-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
		"Helvetica", Roboto, Arial, sans-serif);
	--cb-font-mono: var(--wp--preset--font-family--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;                                      /* 11px labels */
	--cb-text-xs:   0.75rem;                                        /* 12px */
	--cb-text-sm:   clamp(0.8125rem, 0.78rem + 0.15vw, 0.9rem);
	--cb-text-base: clamp(0.95rem, 0.9rem + 0.22vw, 1.0625rem);
	--cb-text-lg:   clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
	--cb-text-xl:   clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
	--cb-text-2xl:  clamp(2rem, 1.35rem + 3vw, 3.75rem);
	--cb-text-3xl:  clamp(2.5rem, 1.2rem + 6vw, 5.5rem);
	--cb-display:   clamp(2.85rem, 1rem + 9vw, 9rem);

	--cb-tracking-tight: -0.022em;
	--cb-tracking-label: 0.16em;

	/* ---- Spacing scale --------------------------------------------- */
	--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-content: 46rem;
	--cb-wide: 84rem;
	--cb-gutter: clamp(1.25rem, 0.6rem + 3vw, 4.5rem);

	--cb-header-h: 68px;

	--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;

	color-scheme: dark;
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	background: var(--cb-black);
}

body {
	background: var(--cb-black);
	color: var(--cb-white);
	font-family: var(--cb-font-body);
	font-size: var(--cb-text-base);
	line-height: 1.6;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.18em; }

h1, h2, h3, h4 {
	font-family: var(--cb-font-display);
	font-weight: 700;
	line-height: 1.0;
	letter-spacing: var(--cb-tracking-tight);
	text-transform: uppercase;
	text-wrap: balance;
}

h1 { font-size: var(--cb-text-2xl); }
h2 { font-size: var(--cb-text-xl); }
h3 { font-size: var(--cb-text-lg); }

p { text-wrap: pretty; }
strong, b { font-weight: 700; }

hr { border: 0; border-top: 1px solid var(--cb-line-soft); }

::selection { background: var(--cb-white); color: var(--cb-black); }

:focus-visible {
	outline: 2px solid var(--cb-white);
	outline-offset: 3px;
	border-radius: 1px;
}

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

/* ---- Utilities ---------------------------------------------------- */

.cb-eyebrow {
	display: inline-block;
	font-family: var(--cb-font-mono);
	font-size: var(--cb-text-2xs);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--cb-tracking-label);
	color: var(--cb-mute);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px; width: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}

.skip-link {
	position: fixed;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: var(--cb-white);
	color: var(--cb-black);
	padding: 0.75rem 1.25rem;
	font-family: var(--cb-font-mono);
	font-size: var(--cb-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.skip-link:focus { left: 1rem; top: 1rem; text-decoration: none; }

[hidden] { display: none !important; }