/*
Theme Name: TAGinn
Theme URI: https://coma.lv
Author: COMA.LV
Author URI: https://coma.lv
Description: Custom WooCommerce theme for the TAGinn US store (taginn-usa.com).
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: taginn
*/

/* ====================================================================
   DESIGN TOKENS

   Plain CSS custom properties on purpose: no preprocessor, no build
   step, no framework lock-in (see docs/01-architecture.md).

   Every name below must mirror Figma's own variable name 1:1, so that
   updating a value when the design changes is a lookup and not a guess.
   Write the Figma node ID the values came from in this comment when you
   fill them in.

   Source nodes: TBD — homepage desktop 16:543, mobile 141:419 on
   https://www.figma.com/design/1t4ydb58IdfmC5VuBWKBlp/
   ==================================================================== */

:root {
	/* --- Color ------------------------------------------------------
	   Pull from Figma. Do not invent values. */

	/* --- Typography -------------------------------------------------
	   Self-hosted woff2 only (assets/fonts/), never a font CDN.
	   @font-face declarations go directly above this block. */

	/* --- Spacing / radii / layout ----------------------------------- */
	--container-max: 1440px;
}

/* Mobile token overrides go here — SAME custom property names, different
   values, so no other rule in this stylesheet needs to know a breakpoint
   exists. Breakpoint value comes from the mobile Figma frame.

@media (max-width: 768px) {
	:root { }
}
*/

/* ====================================================================
   BASE
   ==================================================================== */

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

body {
	margin: 0;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* Keyboard users must always be able to see where they are. Replace with
   the design's own focus treatment once Figma shows one — do not delete. */
:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	padding: 0.75rem 1rem;
	background: #fff;
	color: #000;
	z-index: 999;
}

.skip-link:focus {
	left: 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ====================================================================
   LAYOUT
   ==================================================================== */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: 1rem;
}

/* ====================================================================
   SECTIONS
   Add one commented block per component, named after the template part
   it styles (template-parts/home/hero.php -> "HOME / HERO").
   ==================================================================== */