/*
Theme Name:        Kojira
Theme URI:         https://kojira.example
Author:            Kojira Studio
Description:       Kojira — ثيم صفحة هبوط واحدة بنمط Pixel Art عالي الدقة لمتاجر WooCommerce. ثلاث هويات بصرية: الذكاء الاصطناعي (أزرق سيبراني)، الهوايات (بنفسجي)، الخيال (ماجنتا). تمرير ناعم بـ Lenis، حركات GSAP ScrollTrigger، قائمة ملء الشاشة بأسلوب Awwwards، وتذكرة مرور رقمية للتسجيل والدخول.
Version:           1.0.0
Requires at least: 6.3
Tested up to:      6.8
Requires PHP:      7.4
WC requires at least: 7.0
WC tested up to:   9.6
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       kojira
Tags:              e-commerce, one-column, dark, custom-menu, rtl-language-support, translation-ready, full-width-template
*/

/* ==========================================================================
   1. Design tokens — Tri-Color System
   ========================================================================== */
:root {
	/* الأركان الثلاثة */
	--kj-ai: #22d3ff;      /* الذكاء الاصطناعي — أزرق سيبراني: الدقة، التقنية، الأنظمة */
	--kj-hobby: #9d5cff;   /* الهوايات — بنفسجي: الشغف، الإبداع، التركيز */
	--kj-dream: #ff3ea5;   /* الخيال — ماجنتا: الابتكار، الإلهام، العوالم المفتوحة */

	--kj-ai-rgb: 34, 211, 255;
	--kj-hobby-rgb: 157, 92, 255;
	--kj-dream-rgb: 255, 62, 165;

	--kj-grad: linear-gradient(90deg, var(--kj-ai) 0%, var(--kj-hobby) 50%, var(--kj-dream) 100%);
	--kj-grad-diag: linear-gradient(135deg, var(--kj-ai) 0%, var(--kj-hobby) 52%, var(--kj-dream) 100%);

	/* Dark mode surfaces */
	--kj-bg: #06050d;
	--kj-bg-2: #0b0918;
	--kj-surface: #110e22;
	--kj-surface-2: #181433;
	--kj-line: rgba(236, 235, 255, 0.09);
	--kj-line-strong: rgba(236, 235, 255, 0.18);
	--kj-text: #eeedff;
	--kj-muted: #9b98bb;

	/* Pixel grid unit */
	--kj-px: 4px;
	--kj-notch: 8px;

	--kj-font: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
	--kj-font-px: "Silkscreen", "IBM Plex Sans Arabic", ui-monospace, monospace;
	--kj-font-px2: "Press Start 2P", "IBM Plex Sans Arabic", ui-monospace, monospace;

	--kj-ease: cubic-bezier(0.19, 1, 0.22, 1);
	--kj-gutter: 16px;
	--kj-max: 1320px;
	--kj-header-h: 64px;
	--kj-admin-bar: var(--wp-admin--admin-bar--height, 0px);

	color-scheme: dark;
}

@media (min-width: 768px) {
	:root {
		--kj-gutter: 32px;
		--kj-header-h: 76px;
		--kj-notch: 10px;
	}
}

@media (min-width: 1200px) {
	:root { --kj-gutter: 48px; }
}

/* Pillar scoping — any element can carry data-pillar to inherit its accent */
[data-pillar="ai"]    { --accent: var(--kj-ai);    --accent-rgb: var(--kj-ai-rgb); }
[data-pillar="hobby"] { --accent: var(--kj-hobby); --accent-rgb: var(--kj-hobby-rgb); }
[data-pillar="dream"] { --accent: var(--kj-dream); --accent-rgb: var(--kj-dream-rgb); }

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

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

body {
	margin: 0;
	background: var(--kj-bg);
	color: var(--kj-text);
	font-family: var(--kj-font);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
	-webkit-tap-highlight-color: transparent;
}

/* Pixel Art: كل الصور والرسومات تُعرض بحواف بكسلية حادة */
img,
canvas,
svg,
video,
.kj-pixel,
.kj-pixelated {
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

svg.kj-icon rect { shape-rendering: crispEdges; }

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

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.15; font-weight: 700; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }

::selection { background: var(--kj-dream); color: #fff; }

:focus-visible {
	outline: 2px dashed var(--kj-ai);
	outline-offset: 3px;
}

/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

.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;
}

.skip-link:focus {
	position: fixed;
	inset-block-start: 8px;
	inset-inline-start: 8px;
	z-index: 10000;
	width: auto; height: auto;
	clip: auto;
	padding: 12px 18px;
	background: var(--kj-ai);
	color: #000;
	font-family: var(--kj-font-px);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}