/**
 * Go Mina design tokens — v2 (Phase 3 art-direction correction).
 *
 * v1 leaned on pure black (#000000) as the dominant surface (hero,
 * header, mobile nav all full-black) plus a chamfer on nearly every
 * card/badge/button. Real feedback: that read as gaming/esports, not
 * "serious B2B automotive supplier." This version keeps the evidenced
 * brand marks — black, #F8E800, white, chamfered logo geometry — but
 * demotes pure black to a *strategic* color (nav, footer, one CTA band)
 * instead of the default surface, adds a warm charcoal/graphite pair for
 * dark sections that don't need to be #000, and limits the chamfer motif
 * to primary CTAs and the logo instead of every card and badge. A
 * B2B/automotive color-system query against the ui-ux-pro-max skill's
 * database (colors.csv) independently converged on the same shape —
 * dark near-black primary + neutral grey secondary + light neutral
 * background, single accent — which is the structure this follows,
 * built on Go Mina's own verified black/yellow rather than the
 * database's generic corporate-blue hexes.
 *
 * Breakpoints are not expressed as custom properties (plain CSS can't use
 * var() inside @media conditions) — the three values used consistently
 * across the CSS files are 560px (small/mobile-to-large-phone), 768px
 * (tablet) and 1080px (desktop). Keep any new media query on one of
 * these three.
 */

:root {
	/* ---- Brand ---- */
	--color-black: #000000;      /* strategic only: nav, footer, one CTA band — never the default surface */
	--color-charcoal: #1C1B18;   /* warm near-black — the new default "dark surface" (hero, dark sections) */
	--color-graphite: #33322D;   /* secondary dark — raised surfaces/cards sitting on charcoal */
	--color-ink: #17160F;        /* body text on light surfaces — warm near-black, not pure #000 */
	--color-yellow: #F8E800;
	--color-white: #FFFFFF;
	--color-paper: #FAF9F5;      /* page background — warm off-white, the dominant surface site-wide */

	/* ---- Neutrals (warm, not cool slate) ---- */
	--color-gray-100: #F1EFE9;
	--color-gray-200: #E4E1D8;
	--color-gray-300: #CBC7B9;
	--color-gray-500: #8C876F;
	--color-gray-700: #57533F;
	--color-gray-900: #26241A;

	/* ---- Semantic ---- */
	--color-bg: var(--color-paper);
	--color-surface: var(--color-white);
	--color-surface-dark: var(--color-charcoal);
	--color-surface-inverted: var(--color-black);
	--color-text: var(--color-ink);
	--color-text-muted: var(--color-gray-700);
	--color-text-inverted: var(--color-white);
	--color-border: var(--color-gray-200);
	--color-accent: var(--color-yellow);
	--color-accent-ink: var(--color-black); /* text/icon color when sitting on --color-accent */

	--color-status-in-stock: #1B7A3D;
	--color-status-out-of-stock: var(--color-gray-700); /* gray-500 measured under 4.5:1 on --color-paper — gray-700 clears WCAG AA */

	/* ---- Typography ---- */
	--font-display: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
	--font-body: 'IBM Plex Sans', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;

	--fs-h1: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
	--fs-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
	--fs-h3: clamp(1.15rem, 1.05rem + 0.5vw, 1.375rem);
	--fs-body-lg: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
	--fs-body: 1rem;
	--fs-small: 0.875rem;
	--fs-kicker: 0.8125rem;

	--lh-tight: 1.1;
	--lh-heading: 1.25;
	--lh-body: 1.6;

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-black: 800;

	/* ---- Spacing (4px base scale) ---- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem;
	--space-10: 8rem;

	/* ---- Layout ---- */
	--container-max: 1280px;
	--container-padding: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);

	/* ---- Shape ----
	 * v1 chamfered nearly everything (every card, badge, button) via
	 * clip-path — repeated on every surface, it read as decorative
	 * rather than a signature. Now reserved for exactly two places: the
	 * primary CTA button and the logo itself (unchanged, real artwork).
	 * Everything else — cards, secondary buttons, badges, inputs — uses
	 * a quiet, consistent border-radius instead, so the chamfer still
	 * reads as *the* Go Mina cut, not just "this theme's corner style."
	 */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--chamfer: 10px; /* primary-CTA-only corner cut, via clip-path */

	/* ---- Elevation ----
	 * No soft blurred drop-shadows — a flat, hard-offset "stamped plate"
	 * shadow instead, used sparingly (hover/active states only).
	 */
	--shadow-sharp: 5px 5px 0 rgba(0, 0, 0, 0.92);
	--shadow-sharp-sm: 3px 3px 0 rgba(0, 0, 0, 0.9);

	/* ---- Motion ---- */
	--transition-fast: 120ms ease;
	--transition-base: 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--transition-fast: 0ms;
		--transition-base: 0ms;
	}
}