/**
 * Sarkar SEO Core — Design Tokens
 *
 * CSS Custom Properties for the Sarkar Healings design system.
 * This file contains ONLY design tokens (CSS variables).
 * Component styles belong in the child theme's style.css.
 *
 * Loaded via wp_enqueue_style( 'sarkar-seo-tokens' ) at priority 1.
 *
 * @package Sarkar_SEO_Core
 * @since 1.0.0
 */

:root {
	/* ==========================================================================
	   COLOR PALETTE — Islamic Spiritual Healing Theme
	   Emerald (primary) + Gold (accent) on Vellum/parchment background
	   ========================================================================== */

	/* Primary Emerald Scale */
	--sarkar-emerald:        #0A3D2E;  /* Deep emerald - primary brand */
	--sarkar-emerald-2:      #0D4D3A;  /* Lighter emerald */
	--sarkar-emerald-deep:   #05241B;  /* Darkest - headings, footer bg */
	--sarkar-emerald-soft:   #E8F0EA;  /* Very light - subtle backgrounds */

	/* Gold/Amber Accent Scale */
	--sarkar-gold:           #D4A017;  /* Primary gold - CTAs, accents */
	--sarkar-gold-soft:      #E5C869;  /* Hover states */
	--sarkar-gold-light:     #F2E3B6;  /* Subtle highlights */
	--sarkar-gold-deep:      #7A5D0B;  /* Dark gold - text on gold bg */

	/* Vellum/Parchment Neutrals */
	--sarkar-vellum:         #FAF6EE;  /* Page background */
	--sarkar-vellum-2:       #F5E6C8;  /* Card backgrounds */
	--sarkar-parchment-dim:  #FCF9F2;  /* Slightly darker vellum */

	/* Ink/Text Colors */
	--sarkar-ink:            #1A1610;  /* Primary text - near black */
	--sarkar-ink-soft:       #4A443A;  /* Secondary text */
	--sarkar-line:           #E8DEC3;  /* Borders, dividers */

	/* Semantic Colors */
	--sarkar-verdigris:      #1B4D6E;  /* Link color - teal-green */
	--sarkar-verdigris-strong: #123A54; /* Link hover */
	--sarkar-madder:         #8C3A2B;  /* Sale/error - deep red */

	/* Evidence Tier Backgrounds (for grading) */
	--sarkar-tier-a-bg:      #DDEEDD;  /* Authentic - green tint */
	--sarkar-tier-a-ink:     #1E4D2B;
	--sarkar-tier-b-bg:      #CBE6FF;  /* Classical - blue tint */
	--sarkar-tier-b-ink:     #003957;
	--sarkar-tier-c-bg:      #F5E6C3;  /* Traditional - amber tint */
	--sarkar-tier-c-ink:     #6B4E10;
	--sarkar-tier-d-bg:      #EAE6DD;  /* Weak/Unverified - neutral */
	--sarkar-tier-d-ink:     #4A443A;

	/* White */
	--sarkar-white:          #FFFFFF;

	/* ==========================================================================
	   TYPOGRAPHY
	   ========================================================================== */

	/* Font Families */
	--sarkar-font-display:   "Playfair Display", "Lora", Georgia, serif;
	--sarkar-font-body:      "Source Serif 4", Georgia, serif;
	--sarkar-font-arabic:    "Amiri", "Traditional Arabic", serif;
	--sarkar-font-ui:        "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Fluid Type Scale (clamp-based) */
	--sarkar-step--1:        clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);    /* 13-14px */
	--sarkar-step-0:         clamp(1rem, 0.95rem + 0.3vw, 1.125rem);      /* 16-18px base */
	--sarkar-step-1:         clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);       /* 19-22px */
	--sarkar-step-2:         clamp(1.5rem, 1.3rem + 0.9vw, 1.9rem);       /* 24-30px */
	--sarkar-step-3:         clamp(1.9rem, 1.55rem + 1.6vw, 2.6rem);      /* 30-42px */
	--sarkar-step-4:         clamp(2.3rem, 1.8rem + 2.6vw, 3.6rem);       /* 37-58px */

	/* Measure & Spacing */
	--sarkar-measure:        70ch;       /* Optimal line length */
	--sarkar-gutter:         clamp(1rem, 4vw, 2.5rem);  /* Container padding */

	/* ==========================================================================
	   LAYOUT & SHAPES
	   ========================================================================== */

	--sarkar-radius:         10px;
	--sarkar-radius-sm:      6px;
	--sarkar-radius-lg:      16px;
	--sarkar-arch:           999px 999px var(--sarkar-radius) var(--sarkar-radius); /* Arch top corners */

	/* Shadows */
	--sarkar-shadow:         0 1px 2px rgba(34,30,23,0.08), 0 8px 24px rgba(34,30,23,0.07);
	--sarkar-shadow-lift:    0 20px 60px -20px rgba(34,30,23,0.35);
	--sarkar-shadow-card:    0 1px 2px rgba(15,61,46,0.06), 0 8px 24px -12px rgba(15,61,46,0.18);

	/* Khatam (Islamic geometric pattern) - for backgrounds */
	--sarkar-khatam:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23C2A14D' d='M12 0l2.4 5.8L20.5 3.5 18.2 9.6 24 12l-5.8 2.4 2.3 6.1-6.1-2.3L12 24l-2.4-5.8-6.1 2.3 2.3-6.1L0 12l5.8-2.4L3.5 3.5l6.1 2.3z'/%3E%3C/svg%3E");
	--sarkar-khatam-dim:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' fill-opacity='.05' d='M12 0l2.4 5.8L20.5 3.5 18.2 9.6 24 12l-5.8 2.4 2.3 6.1-6.1-2.3L12 24l-2.4-5.8-6.1 2.3 2.3-6.1L0 12l5.8-2.4L3.5 3.5l6.1 2.3z'/%3E%3C/svg%3E");

	/* ==========================================================================
	   Z-INDEX SCALE
	   ========================================================================== */

	--sarkar-z-dropdown:     100;
	--sarkar-z-sticky:       200;
	--sarkar-z-modal:        300;
	--sarkar-z-drawer:       400;
	--sarkar-z-toast:        500;
	--sarkar-z-tooltip:      600;

	/* ==========================================================================
	   TRANSITIONS
	   ========================================================================== */

	--sarkar-transition-fast:    150ms ease;
	--sarkar-transition-normal:  250ms ease;
	--sarkar-transition-slow:    350ms ease;
}

/* ==========================================================================
   BASE HTML ELEMENTS (using tokens)
   ========================================================================== */

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

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

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

body {
	margin: 0;
	background: var(--sarkar-vellum);
	color: var(--sarkar-ink);
	font-family: var(--sarkar-font-body);
	font-size: var(--sarkar-step-0);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: var(--sarkar-verdigris);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--sarkar-transition-fast);
}

a:hover {
	color: var(--sarkar-verdigris-strong);
}

:focus-visible {
	outline: 2px solid var(--sarkar-gold);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Headings */
h1, h2, h3, .wp-block-heading {
	font-family: var(--sarkar-font-display);
	font-weight: 600;
	color: var(--sarkar-emerald);
	letter-spacing: 0.01em;
	line-height: 1.15;
}

h1 { font-size: var(--sarkar-step-4); margin: 0 0 0.5em; }
h2 { font-size: var(--sarkar-step-3); margin: 2.2em 0 0.6em; }
h3 { font-size: var(--sarkar-step-2); margin: 1.8em 0 0.5em; }
h4 { font-family: var(--sarkar-font-ui); font-size: var(--sarkar-step-0); text-transform: uppercase; letter-spacing: 0.08em; color: var(--sarkar-ink-soft); margin: 1.6em 0 0.4em; }

/* Arabic Typography */
.ar, [lang="ar"], .sarkar-arabic {
	font-family: var(--sarkar-font-arabic);
	font-size: 1.35em;
	line-height: 1.9;
	color: var(--sarkar-emerald);
	direction: rtl;
	unicode-bidi: isolate;
}

/* Container */
.sarkar-wrap {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--sarkar-gutter);
}

/* Screen reader only */
.sarkar-sr-only {
	position: absolute;
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   SEO CORE COMPONENT TOKENS
   ========================================================================== */

/* Entity Links */
.sarkar-entity-link {
	border-bottom: 1px dotted var(--sarkar-gold);
	text-decoration: none;
	font-weight: 500;
	color: var(--sarkar-emerald);
	transition: border-color var(--sarkar-transition-fast), color var(--sarkar-transition-fast);
}

.sarkar-entity-link:hover {
	border-bottom-style: solid;
	color: var(--sarkar-gold);
}

.sarkar-entity-link--surah { --entity-color: var(--sarkar-emerald); }
.sarkar-entity-link--divine_name { --entity-color: var(--sarkar-gold); }
.sarkar-entity-link--spiritual_concept { --entity-color: var(--sarkar-verdigris); }

/* Internal Links */
.sarkar-internal-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-inline-start: 0.5rem;
	font-family: var(--sarkar-font-ui);
	font-size: var(--sarkar-step--1);
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	border-radius: var(--sarkar-radius-sm);
	background: var(--sarkar-vellum-2);
	border: 1px solid var(--sarkar-line);
	color: var(--sarkar-emerald);
	text-decoration: none;
	transition: all var(--sarkar-transition-fast);
}

.sarkar-internal-link:hover {
	background: var(--sarkar-emerald-soft);
	border-color: var(--sarkar-gold);
	color: var(--sarkar-gold);
}

.sarkar-internal-link--hub { border-color: var(--sarkar-gold); }
.sarkar-internal-link--category { border-color: var(--sarkar-verdigris); }
.sarkar-internal-link--spoke { border-color: var(--sarkar-emerald); }

/* FAQ / HowTo structured data indicators */
.sarkar-faq-item,
.sarkar-howto-step {
	border: 1px solid var(--sarkar-line);
	border-radius: var(--sarkar-radius);
	margin-block: 1rem;
	background: var(--sarkar-white);
}

.sarkar-faq-item summary {
	font-family: var(--sarkar-font-display);
	font-size: var(--sarkar-step-1);
	color: var(--sarkar-emerald);
	padding: 1.25rem 1.5rem;
	cursor: pointer;
	list-style: none;
	position: relative;
}

.sarkar-faq-item summary::-webkit-details-marker { display: none; }
.sarkar-faq-item summary::after {
	content: '+';
	position: absolute;
	right: 1.5rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--sarkar-gold);
	font-size: 1.5rem;
	font-family: var(--sarkar-font-ui);
}

.sarkar-faq-item[open] summary::after { content: '−'; }

.sarkar-faq-item p {
	padding: 0 1.5rem 1.5rem;
	margin: 0;
	color: var(--sarkar-ink-soft);
	font-size: var(--sarkar-step-0);
	line-height: 1.6;
}

/* Evidence tier badges */
.sarkar-tier-badge {
	display: inline-block;
	font-family: var(--sarkar-font-ui);
	font-size: var(--sarkar-step--1);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
}

.sarkar-tier-badge--a { background: var(--sarkar-tier-a-bg); color: var(--sarkar-tier-a-ink); }
.sarkar-tier-badge--b { background: var(--sarkar-tier-b-bg); color: var(--sarkar-tier-b-ink); }
.sarkar-tier-badge--c { background: var(--sarkar-tier-c-bg); color: var(--sarkar-tier-c-ink); }
.sarkar-tier-badge--d { background: var(--sarkar-tier-d-bg); color: var(--sarkar-tier-d-ink); }

/* AEO Answer element */
.sarkar-aeo-answer {
	/* Hidden visually, available for TTS/AI */
}

/* Speakable content markers */
[data-speakable] {
	/* Marker for TTS engines - no visual style */
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
	.sarkar-entity-link,
	.sarkar-internal-link,
	.sarkar-faq-item summary::after,
	.sarkar-tier-badge {
		border-color: transparent !important;
		background: none !important;
		color: var(--sarkar-ink) !important;
	}
}