/**
 * Aqua Studio Theme — style.css — v1.1.0 — Job 2026-07-04-egfs-launch wave 2 — WP child-theme header + base typography/reset
 *
Theme Name: Aqua Studio
Theme URI: https://egfishstore.com
Description: Aqua Studio — bilingual AR/EN WooCommerce child theme for egfishstore.com (Aqua Studio brand, Egypt-based aquarium e-commerce). Built on Storefront (see README.md for parent-theme justification). Implements the G2-approved design-token system (build/tokens.json) and the UX-spec structural requirements (lead-time-honesty at 5 checkpoints, single header/footer system, CPL 181/2018 disclosure blocks).
Author: Aqua Studio / Ali (Claude Code build lane)
Author URI: https://egfishstore.com
Template: storefront
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Requires Plugins: woocommerce
Text Domain: aqua-studio
Domain Path: /languages
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
 */

/* ==========================================================================
   1. Token import
   All color/type/spacing/radii/elevation/surface/badge values come from
   assets/css/tokens.css (compiled from build/tokens.json). Nothing in this
   file or any other theme CSS file should hardcode a hex/px value that
   already exists as a token — reference var(--token-name) instead.
   ========================================================================== */
@import url("assets/css/tokens.css");
/* assets/css/rtl.css is NOT imported here — it is enqueued conditionally
   only on is_rtl()/lang=ar contexts by aqua_studio_enqueue_assets() in
   functions.php, so LTR pageloads never pay for RTL-only CSS. */

/* ==========================================================================
   2. Reset / base box model
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--surfaces-lifted-tint);
	color: var(--color-ink-text-primary);
	font-family: var(--type-text-en), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: var(--type-body-en-px);
	line-height: 1.55;
}

body[lang="ar"],
body.rtl {
	font-family: var(--type-text-ar), Tahoma, sans-serif;
	font-size: var(--type-body-ar-px);
}

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

a {
	color: var(--color-base-clear-mid);
	text-decoration: none;
}

a:hover,
a:focus {
	text-decoration: underline;
}

/* ==========================================================================
   3. Typography scale
   Display faces (Fraunces / Lalezar) are reserved for hero H1 and section
   titles only — never body copy, never buttons, per token set + brand rule.
   ========================================================================== */
h1,
h2,
h3,
.aqua-display {
	font-family: var(--type-display-en), Georgia, serif;
	color: var(--color-ink-text-primary);
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 0.5em;
}

body[lang="ar"] h1,
body[lang="ar"] h2,
body[lang="ar"] h3,
body.rtl .aqua-display {
	font-family: var(--type-display-ar), Tahoma, sans-serif;
	font-weight: 400; /* Lalezar only ships a single display weight */
}

.aqua-hero-h1 {
	font-size: var(--type-hero-h1-en-px);
}

body[lang="ar"] .aqua-hero-h1 {
	font-size: var(--type-hero-h1-ar-px);
}

.aqua-section-title {
	font-size: var(--type-section-title-en-px);
}

body[lang="ar"] .aqua-section-title {
	font-size: var(--type-section-title-ar-px);
}

.aqua-price {
	font-size: var(--type-price-px);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--color-ink-text-primary);
}

.aqua-badge-label {
	font-size: var(--type-badge-label-px);
	font-weight: 500;
	letter-spacing: 0.01em;
}

/* ==========================================================================
   4. Layout primitives
   ========================================================================== */
.aqua-board {
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--spacing-board-padding-x);
	padding-right: var(--spacing-board-padding-x);
}

.aqua-nav {
	height: var(--spacing-nav-height);
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--elevation-hairline);
	background: var(--surfaces-lifted-opaque);
}

.aqua-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--spacing-card-gap);
}

.aqua-card {
	background: var(--surfaces-lifted-opaque);
	border-radius: var(--radii-card);
	box-shadow: var(--elevation-card-shadow);
	overflow: hidden;
}

.aqua-card-small {
	border-radius: var(--radii-card-small);
}

.aqua-card__img {
	height: var(--spacing-card-img-height);
	width: 100%;
	object-fit: cover;
	background: var(--surfaces-lifted-tint);
}

.aqua-card__body {
	padding: var(--spacing-card-body-padding);
}

/* ==========================================================================
   5. CTA buttons — fill is ALWAYS the signal-primary token. Never the
   livestock pip color, never yellow/amber (refused zone, see tokens.json).
   ========================================================================== */
.aqua-cta,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button,
.woocommerce-page a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	background-color: var(--cta-signal-primary);
	color: var(--color-ink-text-inverse);
	border: none;
	border-radius: var(--radii-cta-button);
	padding: 0.85em 1.4em;
	font-weight: 600;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.aqua-cta:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce input.button:hover {
	filter: brightness(0.92);
	color: var(--color-ink-text-inverse);
}

/* ==========================================================================
   6. Badge pills (lead-time / trust) — see template-parts/leadtime-badge-partial.php
   Colors below are consumed as var() only; the plugin decides copy/state,
   the theme decides presentation.
   ========================================================================== */
.aqua-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	border-radius: var(--radii-badge-pill);
	padding: 0.3em 0.85em;
}

.aqua-badge__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex: none;
}

.aqua-badge--in-region {
	background: var(--badge-in-region-lagoon-bg);
	color: var(--badge-in-region-lagoon-text);
}
.aqua-badge--in-region .aqua-badge__dot {
	background: var(--badge-in-region-lagoon-dot);
}

.aqua-badge--sourced {
	background: var(--badge-sourced-to-order-lagoon-bg);
	color: var(--badge-sourced-to-order-lagoon-text);
}
.aqua-badge--sourced .aqua-badge__dot {
	background: var(--badge-sourced-to-order-lagoon-dot);
}

.aqua-badge--import {
	background: var(--badge-import-sourced-to-order-lagoon-bg);
	color: var(--badge-import-sourced-to-order-lagoon-text);
	border: 1px solid var(--badge-import-sourced-to-order-lagoon-border);
}
.aqua-badge--import .aqua-badge__dot {
	background: var(--badge-import-sourced-to-order-lagoon-dot);
}

/* ==========================================================================
   7. Category-key theming
   Body classes added by aqua_studio_body_class_category_key() in
   functions.php. Each node gets a distinct accent used for header rules,
   nav-chip active state, and category-page hero tint. Green
   (--color-semantic-success-eco) must NEVER appear as a category accent —
   it is reserved solely for success/eco semantic states.
   ========================================================================== */
.cat-key-marine .aqua-category-accent,
.cat-key-automation .aqua-category-accent {
	background-color: var(--color-category-keys-marine);
}

.cat-key-coral-reef .aqua-category-accent {
	background-color: var(--color-category-keys-coral-reef-blue);
}
.cat-key-coral-reef .aqua-category-accent--pip {
	background-color: var(--color-category-keys-coral-reef-orange);
}
.cat-key-coral-reef .aqua-category-accent--tag {
	background-color: var(--color-category-keys-coral-reef-magenta);
}

.cat-key-planted .aqua-category-accent {
	background-color: var(--color-category-keys-planted-hightech-blue);
}
.cat-key-planted .aqua-category-accent--pip {
	background-color: var(--color-category-keys-planted-hightech-red);
}

.cat-key-freshwater .aqua-category-accent,
.cat-key-accessories .aqua-category-accent {
	background-color: var(--color-category-keys-main-brand);
}

/* v1.1.0: livestock gets its own cat-key (not folded into coral-reef) —
   token already existed (--color-category-keys-livestock, #F1663B) but had
   no .cat-key-livestock rule wired up; this closes that gap. */
.cat-key-livestock .aqua-category-accent {
	background-color: var(--color-category-keys-livestock);
}

/* Livestock-only pip (never a button fill, never the CTA color). */
.aqua-livestock-pip {
	background-color: var(--cta-pip-livestock);
}

/* Success/eco semantic state — the ONLY place --color-semantic-success-eco may appear. */
.aqua-state-success {
	color: var(--color-semantic-success-eco);
}

/* ==========================================================================
   8. Reef (dark) register surfaces
   ========================================================================== */
.aqua-surface-reef {
	background-color: var(--surfaces-reef-darkest-gutter);
	color: var(--color-ink-text-inverse);
}

.aqua-surface-reef a {
	color: var(--color-ink-text-inverse);
}