/**
 * Plush Toys Storefront Child Theme — Layout
 *
 * Centered containers, generous section padding, and a small utility scale
 * for margin/padding. The page wraps products, text, and forms in a calm
 * off-white field; the cards and pills supply the playful rhythm.
 *
 * Dependencies: variables.css, typography.css
 */

/* ========================================
   PAGE SURFACE
   ======================================== */

html, body {
	background-color: var(--color-bg-primary);
}

/* Storefront's parent theme sets `overflow-x: hidden` on both `body` and
   `.site` to guard against horizontal bleed. Any non-`visible` overflow
   on an ancestor of a sticky element makes that ancestor the sticky
   containing block, and because these ancestors don't actually scroll
   (the viewport does), `.site-header` never detaches on scroll.
   `overflow-x: clip` clips the same horizontal overflow without turning
   the element into a scroll container, so sticky works again. */
body,
.site {
	overflow-x: clip;
}

/* Storefront sets a background on .site-content; reset so our page
   colour shows through consistently across shop, cart, and checkout. */
.site-content {
	background-color: transparent;
}

/* ========================================
   CONTAINERS
   ======================================== */

.container {
	max-width: var(--container-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-padding-x);
	padding-right: var(--container-padding-x);
}

.container-narrow {
	max-width: var(--content-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-padding-x);
	padding-right: var(--container-padding-x);
}

.section-fullwidth {
	width: 100%;
}

/* ========================================
   SECTIONS
   ======================================== */

section,
.section {
	padding-top: var(--section-padding-y-sm);
	padding-bottom: var(--section-padding-y-sm);
}

@media (min-width: 768px) {
	section,
	.section {
		padding-top: var(--section-padding-y);
		padding-bottom: var(--section-padding-y);
	}
}

.section-hero {
	padding-top: var(--space-12);
	padding-bottom: var(--space-12);
}

@media (min-width: 768px) {
	.section-hero {
		padding-top: var(--space-24);
		padding-bottom: var(--space-24);
	}
}

.section-compact {
	padding-top: var(--space-8);
	padding-bottom: var(--space-8);
}

@media (min-width: 768px) {
	.section-compact {
		padding-top: var(--space-12);
		padding-bottom: var(--space-12);
	}
}

/* ========================================
   SPACING UTILITIES
   ======================================== */

.m-0 { margin: 0 !important; }
.m-2 { margin: var(--space-2) !important; }
.m-4 { margin: var(--space-4) !important; }
.m-6 { margin: var(--space-6) !important; }
.m-8 { margin: var(--space-8) !important; }
.m-12 { margin: var(--space-12) !important; }

.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.mt-8 { margin-top: var(--space-8) !important; }
.mt-12 { margin-top: var(--space-12) !important; }
.mt-16 { margin-top: var(--space-16) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.mb-8 { margin-bottom: var(--space-8) !important; }
.mb-12 { margin-bottom: var(--space-12) !important; }
.mb-16 { margin-bottom: var(--space-16) !important; }

.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.p-0 { padding: 0 !important; }
.p-2 { padding: var(--space-2) !important; }
.p-4 { padding: var(--space-4) !important; }
.p-6 { padding: var(--space-6) !important; }
.p-8 { padding: var(--space-8) !important; }

.py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.py-8 { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }
.py-12 { padding-top: var(--space-12) !important; padding-bottom: var(--space-12) !important; }
.py-16 { padding-top: var(--space-16) !important; padding-bottom: var(--space-16) !important; }

.px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.px-8 { padding-left: var(--space-8) !important; padding-right: var(--space-8) !important; }

/* ========================================
   STOREFRONT CONTAINER + CHROME OVERRIDES
   Full-bleed: Storefront parent caps .col-full at ~66.7em; override that
   so content fills the viewport with only the gutter as breathing room.
   ======================================== */

.col-full {
	max-width: none !important;
	width: auto;
	margin-left: 0;
	margin-right: 0;
	padding-left: var(--container-padding-x);
	padding-right: var(--container-padding-x);
}

@media (min-width: 768px) {
	.col-full {
		padding-left: var(--space-8);
		padding-right: var(--space-8);
	}
}

/* Primary archive/cart/checkout vertical rhythm */
.site-content {
	padding-top: var(--space-8);
	padding-bottom: 0;
}

@media (min-width: 768px) {
	.site-content {
		padding-top: var(--space-12);
		padding-bottom: 0;
	}
}

/* The sidebar widget area is unregistered (see functions.php), so
   Storefront's sidebar.php still renders an empty <aside id="secondary">
   that occupies ~25% of the content width via the parent's grid. Hide
   it and let #primary span the full container. */
.site-content #secondary.widget-area {
	display: none;
}

.site-content #primary.content-area {
	width: 100%;
	max-width: none;
	float: none;
	margin-right: 0;
	margin-left: 0;
}

/* Product grid breathing room */
.woocommerce ul.products {
	margin-top: var(--space-8);
	margin-bottom: var(--space-8);
}

@media (min-width: 768px) {
	.woocommerce ul.products {
		margin-top: var(--space-12);
		margin-bottom: var(--space-16);
	}
}

.woocommerce ul.products li.product {
	margin-bottom: var(--space-8);
}

/* ========================================
   SITE HEADER
   Storefront splits the header into two children:
     #masthead > .col-full              -> branding
     #masthead > .storefront-primary-navigation > .col-full -> nav + cart
   We flatten those into a single horizontal row by making #masthead
   the flex container and neutralising the inner .col-full padding/widths.
   ======================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	/* Frosted glass: --color-bg-primary (#F5F5F7) at 72% opacity so the
	   page field shows through just enough for the blur to register.
	   `backdrop-filter` here promotes .site-header to a containing block
	   for fixed-position descendants — the mobile drawer + backdrop
	   compensate by sizing with viewport units instead of inset:0. */
	background-color: rgba(245, 245, 247, 0.72);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid rgba(20, 20, 50, 0.06);
	box-shadow: none;
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: var(--space-5) var(--container-padding-x);
	display: flex;
	align-items: center;
	gap: var(--space-8);
	flex-wrap: wrap;
}

/* Fallback for browsers without backdrop-filter support: tighten the
   opacity so the header stays legible without a blur layer. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.site-header {
		background-color: rgba(245, 245, 247, 0.96);
	}
}

@media (min-width: 768px) {
	.site-header {
		padding-left: var(--space-8);
		padding-right: var(--space-8);
	}
}

/* Branding wrapper becomes a fixed-width flex item on the left. */
.site-header > .col-full {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

/* Primary navigation wrapper fills the remaining space. */
.site-header .storefront-primary-navigation {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
}

.site-header .storefront-primary-navigation > .col-full {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	max-width: none;
	margin: 0;
	padding: 0;
}

/* ----- Branding ----- */

.site-header .site-branding {
	margin: 0;
	padding: 0;
	width: auto;
	max-width: none;
	min-width: 0;
	flex: 0 0 auto;
	float: none;
}

.site-header .site-logo-anchor,
.site-header .site-logo-link {
	display: inline-flex;
	align-items: center;
}

.site-header .site-logo-anchor img,
.site-header .site-logo-link img,
.site-header .custom-logo {
	max-height: 40px;
	width: auto;
}

.site-header .site-title {
	font-family: var(--font-display);
	font-size: var(--text-size-xl);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--tracking-tight);
	line-height: 1.1;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

.site-header .site-title a {
	color: var(--color-text-primary);
	text-decoration: none;
	white-space: nowrap;
}

.site-header .site-title a:hover,
.site-header .site-title a:focus {
	color: var(--color-accent);
}

.site-header .site-description {
	font-size: var(--text-size-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-accent);
	margin: var(--space-1) 0 0;
	display: block;
}

/* ----- Primary navigation ----- */

.site-header .main-navigation {
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
}

.site-header .main-navigation ul.menu,
.site-header .main-navigation ul.nav-menu,
.site-header .main-navigation div.menu > ul {
	display: flex;
	justify-content: center;
	gap: var(--space-8);
	list-style: none;
	margin: 0;
	padding: 0;
	background: transparent;
}

.site-header .main-navigation li {
	margin: 0;
	padding: 0;
}

.site-header .main-navigation a {
	font-family: var(--font-display);
	font-size: var(--text-size-base);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-primary);
	text-decoration: none;
	padding: var(--space-2) 0;
	transition: color var(--transition-base);
}

.site-header .main-navigation a:hover,
.site-header .main-navigation a:focus,
.site-header .main-navigation .current-menu-item > a,
.site-header .main-navigation .current_page_item > a {
	color: var(--color-accent);
}

/* Below tablet, collapse the header to a single row (brand + cart + hamburger)
   and replace the expanded menu with a right-anchored slide-out drawer plus a
   dimmed backdrop. The backdrop is a fixed pseudo-element on .main-navigation,
   so a backdrop click (handled in custom.js) can close the drawer. */
@media (max-width: 767px) {
	.site-header {
		flex-wrap: nowrap;
		gap: var(--space-3);
	}

	.site-header > .col-full {
		flex: 1 1 auto;
		min-width: 0;
	}

	.site-header .storefront-primary-navigation {
		flex: 0 0 auto;
		flex-basis: auto;
	}

	.site-header .storefront-primary-navigation > .col-full {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: var(--space-2);
	}

	.site-header-cart {
		order: 1;
		margin: 0;
	}

	.site-header .main-navigation {
		order: 2;
		flex: 0 0 auto;
	}

	/* ---- Hamburger / close toggle ----
	   A 44px icon button. Swaps to an X glyph when .toggled is applied so the
	   same button opens and closes the drawer. Kept above the drawer panel
	   (z-index) so it's always tappable. Storefront's default paints hamburger
	   bars via a transparent-border button + inner <span>::before/::after
	   pseudos; we neutralise all of that and draw our own SVG. */
	.site-header .menu-toggle {
		position: relative;
		z-index: 1001;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: none !important;
		background-color: transparent !important;
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E300FF' stroke-width='2.25' stroke-linecap='round'><path d='M3 6h18'/><path d='M3 12h18'/><path d='M3 18h18'/></svg>") !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
		background-size: 24px 24px !important;
		color: transparent;
		font-size: 0;
		line-height: 0;
		overflow: hidden;
		box-shadow: none;
		border-radius: var(--radius-md);
	}

	.site-header .main-navigation.toggled .menu-toggle {
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E300FF' stroke-width='2.25' stroke-linecap='round'><path d='M6 6 L18 18'/><path d='M18 6 L6 18'/></svg>") !important;
	}

	.site-header .menu-toggle:hover,
	.site-header .menu-toggle:focus {
		background-color: var(--color-accent-soft) !important;
	}

	.site-header .menu-toggle::after,
	.site-header .menu-toggle::before {
		content: none !important;
		display: none !important;
	}

	.site-header .menu-toggle > *:not(.screen-reader-text) {
		display: none !important;
	}

	.site-header .menu-toggle > *::before,
	.site-header .menu-toggle > *::after {
		content: none !important;
		display: none !important;
	}

	.site-header .menu-toggle .screen-reader-text {
		position: absolute !important;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	/* ---- Dimmed backdrop ----
	   A fixed pseudo-element behind the drawer that fades in with .toggled.
	   `.site-header` has `backdrop-filter`, which makes it the containing
	   block for fixed descendants — so `inset: 0` would shrink this to the
	   header's box. Size with viewport units and anchor from the CB's
	   top-left (which equals the viewport's 0,0 while the sticky header
	   is pinned) to cover the whole screen. */
	.site-header .main-navigation::before {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		background-color: rgba(20, 20, 50, 0.45);
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--transition-base);
		z-index: 998;
	}

	.site-header .main-navigation.toggled::before {
		opacity: 1;
		pointer-events: auto;
	}

	/* ---- Slide-out drawer ----
	   Storefront emits two menu containers inside .main-navigation: .primary-navigation
	   (or, when the primary falls back to wp_page_menu, a bare <div class="menu">)
	   and .handheld-navigation. We hide the handheld duplicate and promote the
	   primary wrapper to a fixed-position panel that slides in from the right.
	   !important is needed to defeat Storefront's default display:none and
	   max-height:0 on these wrappers. */
	.site-header .main-navigation .handheld-navigation {
		display: none !important;
	}

	.site-header .main-navigation .primary-navigation,
	.site-header .main-navigation > div.menu {
		position: fixed !important;
		top: 0;
		right: 0;
		/* No `bottom: 0` — the header is the containing block (due to its
		   `backdrop-filter`), so bottom:0 would clip the drawer to header
		   height. Use viewport height instead. */
		width: min(80vw, 320px);
		height: 100vh;
		height: 100dvh;
		max-height: none !important;
		overflow: hidden auto !important;
		background-color: var(--color-bg-primary);
		padding: calc(var(--space-16) + var(--space-4)) var(--space-6) var(--space-6);
		box-shadow: -12px 0 32px rgba(20, 20, 50, 0.12);
		transform: translateX(100%);
		transition: transform var(--transition-base);
		z-index: 999;
		display: block !important;
	}

	.site-header .main-navigation.toggled .primary-navigation,
	.site-header .main-navigation.toggled > div.menu {
		transform: translateX(0);
	}

	.site-header .main-navigation ul.menu,
	.site-header .main-navigation ul.nav-menu,
	.site-header .main-navigation div.menu > ul {
		display: flex !important;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: var(--space-1);
		max-height: none !important;
		overflow: visible !important;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.site-header .main-navigation li {
		display: block;
		width: 100%;
		text-align: left;
	}

	.site-header .main-navigation a {
		display: block;
		padding: var(--space-3) 0;
		font-family: var(--font-display);
		font-size: var(--text-size-lg);
		font-weight: var(--font-weight-semibold);
		color: var(--color-text-primary);
		text-decoration: none;
	}

	.site-header .main-navigation a:hover,
	.site-header .main-navigation a:focus,
	.site-header .main-navigation .current-menu-item > a,
	.site-header .main-navigation .current_page_item > a {
		color: var(--color-accent);
	}

	/* Lock body scroll while the drawer is open. :has() is supported in
	   every modern mobile browser; older browsers simply allow scrolling. */
	body:has(.main-navigation.toggled) {
		overflow: hidden;
	}
}

/* ----- Cart icon + bubble -----
   Written defensively so it looks right with either our override markup
   (SVG + .cart-count) or Storefront's default (.amount + .count + dashicon).
   Strategy: hide every child of .cart-contents, draw the bag via a
   background-image, then re-show only our .cart-count so the bubble
   sits on top of the icon. */

.site-header-cart {
	flex: 0 0 auto;
	list-style: none;
	margin: 0 0 0 auto;
	padding: 0;
	background: transparent;
	border: none;
	box-shadow: none;
}

.site-header-cart li {
	margin: 0;
	padding: 0;
	list-style: none;
	display: inline-block;
}

/* Storefront also renders a WC_Widget_Cart dropdown as a second <li>; hide it. */
.site-header-cart > li + li {
	display: none;
}

.site-header-cart a.cart-contents {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: var(--radius-md);
	background-color: transparent;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E300FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/><path d='M3 6h18'/><path d='M16 10a4 4 0 0 1-8 0'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
	color: var(--color-accent);
	text-decoration: none;
	font-size: 0;
	line-height: 0;
	transition: background-color var(--transition-base);
}

.site-header-cart a.cart-contents:hover,
.site-header-cart a.cart-contents:focus {
	background-color: var(--color-accent-soft);
}

/* Suppress Storefront's text children (".amount", ".count", ".woocommerce-Price-*", etc.) */
.site-header-cart a.cart-contents > * {
	display: none;
}

/* Keep the SR-only label available to assistive tech */
.site-header-cart a.cart-contents .screen-reader-text {
	display: block;
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Our override supplies an inline SVG — show it and suppress the background fallback. */
.site-header-cart a.cart-contents .cart-icon {
	display: block;
	width: 24px;
	height: 24px;
}

.site-header-cart a.cart-contents:has(.cart-icon) {
	background-image: none;
}

/* Suppress Storefront's default ".count" span — it contains "N items" text,
   not just the number, so it can't be reused as a tidy bubble. Only our
   own .cart-count (emitted by plush_toys_cart_link) renders the badge. */
.site-header-cart a.cart-contents .count {
	display: none !important;
}

/* Count bubble — flex-centered circle/pill at the top-right of the icon. */
.site-header-cart a.cart-contents .cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: var(--radius-pill);
	background-color: var(--color-accent);
	color: var(--color-text-inverse);
	font-size: 11px;
	font-weight: var(--font-weight-bold);
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(227, 0, 255, 0.35);
}

/* ========================================
   SITE FOOTER
   Pill-shaped trust badge + centered copyright line. Sits on the same
   off-white page surface; no boxed band.
   ======================================== */

.site-footer {
	background-color: transparent;
	color: var(--color-text-secondary);
	padding: var(--space-12) 0 var(--space-16);
	border-top: none;
	box-shadow: none;
}

.site-footer a {
	color: var(--color-text-primary);
}

.site-footer a:hover,
.site-footer a:focus {
	color: var(--color-accent);
}

/* Hide any Storefront-default remnants that might still render. */
.site-footer .site-info {
	display: none;
}

.plush-footer {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-6);
}

.plush-footer-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-pill);
	background-color: var(--color-accent-soft);
	font-family: var(--font-display);
	font-size: var(--text-size-xs);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.plush-footer-badge-icon {
	color: var(--color-accent);
	flex-shrink: 0;
}

.plush-footer-copyright {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-size-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.plush-footer-payments {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
}

.plush-pay {
	display: inline-flex;
	width: 52px;
	height: 32px;
	margin: 0;
	padding: 0;
}

.plush-pay svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ========================================
   BUTTONS (global)
   Storefront uses .button across WC and non-WC surfaces.
   ======================================== */

.button,
button,
input[type="submit"],
input[type="button"],
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-accent);
	background-image: none;
	color: var(--color-text-inverse);
	font-family: var(--font-display);
	font-size: var(--text-size-base);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0;
	text-transform: none;
	text-shadow: none;
	padding: var(--space-3) var(--space-6);
	border: none;
	border-radius: var(--radius-pill);
	box-shadow: none;
	cursor: pointer;
	transition: background-color var(--transition-base), transform var(--transition-base);
	text-decoration: none;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background-color: var(--color-accent-hover);
	color: var(--color-text-inverse);
	transform: translateY(-1px);
}

.button:disabled,
button:disabled,
.woocommerce .button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

/* Secondary / ghost buttons */
.button.alt,
.button.secondary,
.woocommerce button.button.alt,
.woocommerce .cart .button[name="update_cart"] {
	background-color: transparent;
	color: var(--color-accent);
	box-shadow: inset 0 0 0 2px var(--color-accent);
}

.button.alt:hover,
.button.secondary:hover,
.woocommerce button.button.alt:hover,
.woocommerce .cart .button[name="update_cart"]:hover {
	background-color: var(--color-accent);
	color: var(--color-text-inverse);
}

/* ========================================
   FORM CONTROLS (global)
   ======================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
select,
textarea {
	font-family: var(--font-body);
	font-size: var(--text-size-base);
	color: var(--color-text-primary);
	background-color: var(--color-bg-card);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: var(--shadow-focus);
}