/**
 * ============================================================================
 * INTIMOVERA — GRAPHIC CHARTER / DESIGN TOKENS  (v1.0, official)
 * ============================================================================
 *
 * SINGLE SOURCE OF TRUTH for the visual identity. Declares every design token
 * (colors, typography, spacing, radii, elevation, layout, z-index, motion) as
 * CSS custom properties on :root, with usage rules in the comments. main.css
 * and all components CONSUME these tokens — they must not redefine raw values.
 * To re-skin the whole site, edit THIS file only.
 *
 * Loaded before main.css (functions.php → intimovera_enqueue_assets()).
 * theme.json mirrors the palette/fonts for the block editor; keep in sync.
 *
 * --- BRAND POSITIONING -------------------------------------------------------
 * Intimovera is NOT a sex shop. It is a trustworthy expert GUIDE / comparator
 * for intimate wellness — treated with the seriousness and elegance of a
 * premium skincare / parapharmacy brand. Reassuring, discreet, inclusive,
 * transparent. Aesthetic keywords: calm · premium · editorial · clean.
 *
 * --- HARD VISUAL BANS (charter §11) -----------------------------------------
 * NO bright red, NO neon/fluo pink, NO pure black. NO neon/glossy/"cheap"
 * effects. NO script/fancy hard-to-read fonts. NO explicit imagery.
 *
 * --- HOW TO USE --------------------------------------------------------------
 *   color: var(--im-text);  background: var(--im-primary);  // semantic, always
 * Do NOT hard-code hex/px in components when a token exists. Need a new value
 * repeatedly? Add a token here first, then consume it.
 *
 * Token prefix: --im-. Naming is SEMANTIC over literal so a palette change
 * never forces renaming across components.
 * ============================================================================
 */

:root {

	/* ========================================================================
	 * 1. COLOR — BRAND
	 * The brand accent is Muted Gold (premium, "brushed gold"), used for CTAs,
	 * fine borders and highlights. Pair gold backgrounds with SLATE text
	 * (white-on-gold fails contrast). Intimo Blush is the soft skin-tone fill.
	 * ===================================================================== */

	/* Primary — Muted Gold. Use for: CTA/button backgrounds, active states,
	 * premium accents, fine borders. Text on it must be --im-on-primary. */
	--im-primary:        #c5a065;   /* Muted Gold */

	/* Primary (dark) — "gold ink". Dark enough for AA text on white (~5:1).
	 * Use for: links, button hover, prices, hover of primary. */
	--im-primary-dark:   #846a2b;

	/* Primary (soft) — Intimo Blush. Decorative soft fills (hero glow, CTA
	 * band, badges background). Never for text. */
	--im-primary-soft:   #f4d7d4;   /* Intimo Blush */

	/* Gold wash — soft gold tints for highlights (featured comparison column,
	 * wells). Decorative only; never behind body text. */
	--im-primary-tint:   rgba(197, 160, 101, 0.10);
	--im-primary-tint-2: rgba(197, 160, 101, 0.18);

	/* Accent — muted rose (skin family, NOT red/fluo). "Oferta" / sale badge. */
	--im-accent:         #cf9088;

	/* Soft Mint — hygiene / care / freshness accents (badges, icons). */
	--im-mint:           #b8d8d8;

	/* ========================================================================
	 * 2. COLOR — NEUTRALS & SURFACES
	 * White base (charter §4.3) with a very light grey for product grids and
	 * Intimo Blush for soft sections / footer.
	 * ===================================================================== */

	--im-bg:             #ffffff;   /* page background (pure white) */
	--im-surface:        #ffffff;   /* cards, header, panels */
	--im-surface-2:      #fbf8f6;   /* elevated/warm sections (skin-warm off-white) */
	--im-surface-alt:    #f6f3f0;   /* warm off-white — product grids, zebra rows, table heads, nav hover */
	--im-blush:          #f4d7d4;   /* Intimo Blush — soft sections, footer bg */
	--im-blush-soft:     #faece9;   /* lighter blush for gradient ends */
	--im-blush-border:   #e8c6c2;   /* hairline on blush surfaces */
	--im-border:         #ece7e3;   /* neutral hairline borders, dividers */
	--im-border-gold:    #dcc7a0;   /* premium fine borders (comparison table) */

	/* ========================================================================
	 * 3. COLOR — TEXT
	 * Vera Deep Slate (off-black, softer & more premium than #000).
	 * ===================================================================== */

	--im-text:           #2d3436;   /* Vera Deep Slate — body text, headings, logo */
	--im-ink:            #20262a;   /* deeper display ink — large/hero headings only (off-black, never #000) */
	--im-muted:          #6f7679;   /* secondary text: captions, meta, counts */
	--im-muted-2:        #565c5e;   /* stronger secondary — ledes, on warm surfaces (AA on white) */
	--im-disclosure:     #8a8f91;   /* legal/affiliate disclosure (discreet grey) */
	--im-on-primary:     #2d3436;   /* text on Muted Gold (slate, for contrast) */
	--im-on-dark:        #ffffff;   /* text on the dark slate zone (age-gate) */

	/* ========================================================================
	 * 4. COLOR — FEEDBACK / STATE  (muted, never alarming — no bright red)
	 * ===================================================================== */

	--im-success:        #3f7d6b;   /* in stock, validated criteria (✓) */
	--im-success-tint:   rgba(63, 125, 107, 0.12);
	--im-danger:         #b06a6a;   /* out of stock (muted brick, not bright red) */
	--im-danger-tint:    rgba(176, 106, 106, 0.12);

	/* ========================================================================
	 * 5. COLOR — DARK ZONE (age-gate interstitial)
	 * Full-screen Vera Deep Slate with white text (charter §8.1).
	 * ===================================================================== */

	--im-dark:           #2d3436;   /* age-gate background */
	--im-dark-text:      #f1efec;   /* text on dark */
	--im-dark-text-soft: #c9c6c2;   /* secondary text on dark */
	--im-overlay:        rgba(45, 52, 54, 0.97); /* near-solid slate scrim */

	/* ========================================================================
	 * 6. TYPOGRAPHY  (charter §5)
	 * Headings: Playfair Display (serif) — premium magazine / cosmetics feel,
	 * weight 400-500, slight negative tracking. Body/UI: Inter (sans) — highly
	 * legible on screens, line-height 1.6 for restful reading (anti-thin).
	 * The logo wordmark is a separate geometric sans (lowercase).
	 * Fonts are enqueued from Google Fonts with system fallbacks.
	 * ===================================================================== */

	--im-font:        "Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--im-font-head:   "Playfair Display", Georgia, "Times New Roman", serif;
	--im-font-logo:   "Poppins", "Montserrat", "Inter", -apple-system, sans-serif;

	/* Type scale (fluid where it matters). Body base 17px. */
	--im-fs-base:     17px;
	--im-fs-sm:       0.85rem;                        /* captions, meta, badges, disclosure */
	--im-fs-lg:       1.15rem;                        /* lead paragraph, card price */
	--im-fs-h3:       clamp(1.05rem, 2vw, 1.3rem);    /* sub-section / card titles */
	--im-fs-h2:       clamp(1.65rem, 3.6vw, 2.4rem);  /* section titles */
	--im-fs-h1:       clamp(2rem, 5vw, 3.15rem);      /* page H1 */
	--im-fs-hero:     clamp(2.9rem, 8vw, 5.4rem);     /* home hero title (Apple-scale display) */

	--im-lh-body:     1.7;     /* generous, restful (editorial luxury) */
	--im-lh-heading:  1.06;    /* tight display leading */
	--im-track-head:  -0.03em; /* refined negative tracking on serif display */
	--im-track-display: -0.04em; /* tighter still on the largest hero/display type */
	--im-fw-heading:  400;     /* light Playfair — elegant, never heavy */
	--im-fw-bold:     600;     /* "bold" for UI emphasis (buttons, labels) */
	--im-fw-medium:   500;     /* editorial medium (primary nav, refined labels) */

	/* ========================================================================
	 * 7. SPACING  (4px base rhythm)
	 * ===================================================================== */

	--im-space-2xs:  0.25rem;  /*  4px */
	--im-space-xs:   0.5rem;   /*  8px */
	--im-space-sm:   0.75rem;  /* 12px */
	--im-space-md:   1rem;     /* 16px — default gap */
	--im-space-lg:   1.5rem;   /* 24px */
	--im-space-xl:   2rem;     /* 32px */
	--im-space-2xl:  3rem;     /* 48px — between major sections */
	--im-section-y:  clamp(2.5rem, 4.5vw, 4.25rem);
	--im-flow:       clamp(2.25rem, 4vw, 3.25rem); /* rhythm between editorial blocks (archive / single) */

	/* ========================================================================
	 * 8. RADII — rounded, soft, friendly (wellness, not techy/sharp).
	 * ===================================================================== */

	--im-radius-sm:  12px;     /* inputs, small cards, FAQ items */
	--im-radius:     18px;     /* default: cards, panels, images, wells */
	--im-radius-lg:  26px;     /* large bento tiles, hero panels, feature blocks */
	--im-radius-pill: 999px;   /* buttons, chips, badges, stock pills */

	/* ========================================================================
	 * 9. ELEVATION — very soft, low-contrast (charter §6.1: 0 4px 6px /.05).
	 * ===================================================================== */

	/* Soft, diffuse, multi-layer elevation (Apple-like): a tight contact shadow
	 * + a wide ambient one. Low opacity, slate-tinted — premium, never harsh. */
	--im-shadow-xs:  0 1px 2px rgba(45, 52, 54, 0.05);   /* hairline lift (sticky header) */
	--im-shadow:     0 2px 6px rgba(45, 52, 54, 0.05), 0 12px 26px -10px rgba(45, 52, 54, 0.12);   /* resting cards */
	--im-shadow-md:  0 4px 12px rgba(45, 52, 54, 0.06), 0 26px 50px -16px rgba(45, 52, 54, 0.20);  /* raised on hover */
	--im-shadow-lg:  0 8px 20px rgba(45, 52, 54, 0.08), 0 42px 72px -20px rgba(45, 52, 54, 0.28);  /* modals, drawers, popovers */
	--im-shadow-gold: 0 10px 26px -6px rgba(197, 160, 101, 0.42); /* primary CTA lift (warm gold glow) */

	/* Decorative gradients — derived from brand tokens, declared once so hero,
	 * CTA bands and accents stay in sync. Never used behind body text. */
	--im-gradient-hero:  radial-gradient(46% 52% at 86% 6%, var(--im-mint), transparent 56%), radial-gradient(60% 66% at 4% 104%, var(--im-blush), transparent 60%), linear-gradient(168deg, var(--im-blush-soft) 0%, #fbf2ee 52%, var(--im-blush-soft) 100%);
	--im-gradient-warm:  linear-gradient(150deg, var(--im-mint) 0%, var(--im-blush-soft) 55%, var(--im-blush) 100%);
	--im-gradient-cta:   linear-gradient(135deg, var(--im-blush-soft) 0%, var(--im-primary-soft) 100%);
	--im-gradient-gold:  linear-gradient(140deg, #dcba80 0%, #cba56a 46%, #bd975c 100%);
	/* Frosted-glass surfaces (modern chrome): translucent base + heavy blur. */
	--im-glass-bg:       rgba(255, 255, 255, 0.7);
	--im-glass-blur:     saturate(180%) blur(20px);

	/* Intimate "boudoir" dark zone — WARM deep espresso/aubergine, never cold
	 * black: the philosophy band and luxe pauses. Feminine, candle-lit, premium.
	 * (A deliberate, tasteful exception to the light manifesto — see CLAUDE.md.) */
	--im-noir:           #241b1f;   /* warm deep base (off-black, never #000) */
	--im-noir-2:         #32242a;   /* lifted warm tone */
	--im-noir-text:      #f4ebe6;   /* warm off-white on noir (AA) */
	--im-noir-muted:     #cbb6ad;   /* secondary text on noir */
	--im-noir-border:    rgba(255, 255, 255, 0.10);
	--im-gradient-noir:  radial-gradient(90% 130% at 50% -20%, #3c2b32 0%, var(--im-noir) 56%, #1c1417 100%);

	/* Whisper grain — a tiny tiled SVG noise for tactile, premium depth. Used at
	 * very low opacity over gradients (charter: subtle, never heavy). */
	--im-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

	/* ── CANDLELIT LUXE accents (richer register — fights the "pale on pale"). ──
	 * Luminous golds for glow + metallic text, a deep sensual wine/rose for
	 * depth, and a dramatic warm-dark hero gradient. */
	--im-gold-bright:   #e6c585;   /* luminous gold — accents/icons on dark */
	--im-gold-glow:     #f1d6a0;   /* candle-glow gold — highlights, hero accent */
	--im-gradient-gold-lux: linear-gradient(135deg, #f1d6a0 0%, #d9b36e 46%, #b88f52 100%); /* polished metallic */
	--im-wine:          #7c3b46;   /* deep sensual rose-wine — depth accent */
	--im-wine-soft:     #a8616b;   /* lifted rose */
	--im-wine-tint:     rgba(124, 59, 70, 0.10);
	/* Dramatic candle-lit hero/section ground (warm aubergine → espresso). */
	--im-gradient-hero-lux: radial-gradient(130% 100% at 50% -8%, #3c2731 0%, #2a1d23 46%, #1c1418 100%);

	/* ========================================================================
	 * 10. LAYOUT & BREAKPOINTS
	 * @media cannot read custom properties; the px below are the canonical
	 * breakpoints, hard-coded in main.css @media. Keep in sync.
	 *   sm 600px · md 782px · lg 1024px
	 * Touch targets ≥ 48px (charter §10.1).
	 * ===================================================================== */

	--im-maxw:       1320px;   /* content container max width */
	--im-maxw-prose: 70ch;     /* editorial text column */
	--im-tap:        48px;     /* minimum touch target */
	--im-header-h:   72px;     /* sticky header height (kept in sync with main.css) */

	/* ========================================================================
	 * 11. Z-INDEX SCALE
	 * ===================================================================== */

	--im-z-header:    50;
	--im-z-skiplink:  100000;
	--im-z-modal:     99999;

	/* ========================================================================
	 * 12. MOTION — subtle and quick (no heavy animations, charter §10.2).
	 * Respect prefers-reduced-motion (handled in main.css).
	 * ===================================================================== */

	--im-transition: 0.18s ease;
	--im-transition-slow: 0.42s cubic-bezier(0.22, 0.61, 0.36, 1); /* panels, drawers */
	--im-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);  /* smooth Apple-like deceleration (reveals, lifts) */

	/* ========================================================================
	 * 13. ACCESSIBILITY CONTRACT
	 * - Body text ≥ 4.5:1, large/UI ≥ 3:1 (WCAG AA). Verified pairs:
	 *   --im-text on white/blush; --im-primary-dark (gold ink) on white ≈ 5:1;
	 *   --im-on-primary (slate) on --im-primary (gold) ≈ 5.3:1;
	 *   white on --im-dark (slate) for the age-gate.
	 * - NEVER put white text on Muted Gold, and never use plain --im-primary
	 *   (gold) for small text on white — use --im-primary-dark.
	 * - Focus always visible: 3px --im-primary outline (main.css). Keep it.
	 * - Touch targets ≥ --im-tap. Don't signal meaning by color alone.
	 * ===================================================================== */
}