/*
Theme Name:   AI News Lite
Theme URI:    https://example.com/ai-news-lite
Author:       Sirous Dadashnejad
Author URI:   https://example.com
Description:  A lightweight, professional Persian news theme built for AI-focused publications. Ships with AI API Gateway. Full light/dark mode, RTL-first design, and a header/footer shared with the plugin's own Home/About/Contact pages.
Version:      1.2.9
Requires at least: 5.8
Requires PHP: 7.4
Tested up to: 6.6
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  ai-news-lite
Tags:         news, blog, one-column, two-columns, right-sidebar, custom-colors, dark-mode, rtl-language-support, translation-ready, featured-images, threaded-comments, theme-options

AI News Lite is a lightweight WordPress theme for AI / tech news sites,
designed as the companion theme for the AI API Gateway plugin.
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root{
	--ains-bg:            #f6f7f9;
	--ains-surface:       #ffffff;
	--ains-surface-2:     #f0f1f4;
	--ains-border:        #e4e6eb;
	--ains-text:          #14161a;
	--ains-text-muted:    #5b6270;
	--ains-text-faint:    #8a90a0;
	--ains-primary:       #4f46e5;
	--ains-primary-ink:   #ffffff;
	--ains-primary-hover: #4338ca;
	--ains-accent:        #06b6d4;
	--ains-danger:        #e11d48;
	--ains-success:       #16a34a;
	--ains-shadow:        0 1px 2px rgba(20,22,26,.04), 0 8px 24px rgba(20,22,26,.06);
	--ains-shadow-sm:     0 1px 2px rgba(20,22,26,.06);
	--ains-radius-sm:     8px;
	--ains-radius:        14px;
	--ains-radius-lg:     20px;
	--ains-font:          'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, Arial, sans-serif;
	--ains-font-en:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	--ains-container:     1240px;
	--ains-gap:           28px;
	color-scheme: light;
}

[data-ains-theme="dark"]{
	--ains-bg:            #0d0f13;
	--ains-surface:       #15181e;
	--ains-surface-2:     #1b1f27;
	--ains-border:        #262b35;
	--ains-text:          #eef0f4;
	--ains-text-muted:    #a6acbb;
	--ains-text-faint:    #6f7688;
	--ains-primary:       #818cf8;
	--ains-primary-ink:   #0d0f13;
	--ains-primary-hover: #a5b0fb;
	--ains-accent:        #22d3ee;
	--ains-shadow:        0 1px 2px rgba(0,0,0,.3), 0 12px 28px rgba(0,0,0,.35);
	--ains-shadow-sm:     0 1px 2px rgba(0,0,0,.35);
	color-scheme: dark;
}

/* Respect the OS preference the very first time (no saved choice yet). The
   no-flash inline script in header.php sets data-ains-theme before paint
   once a choice exists, so this media query only matters on first visit. */
@media (prefers-color-scheme: dark){
	:root:not([data-ains-theme="light"]):not([data-ains-theme="dark"]){
		color-scheme: dark;
	}
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
	margin: 0;
	background: var(--ains-bg);
	color: var(--ains-text);
	font-family: var(--ains-font);
	font-size: 16px;
	line-height: 1.8;
	transition: background-color .2s ease, color .2s ease;
}
body:not(.rtl){ font-family: var(--ains-font-en); }
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,h5,h6{ margin: 0 0 .5em; line-height: 1.35; font-weight: 800; }
p{ margin: 0 0 1em; }
button, input, select, textarea{ font-family: inherit; }
.screen-reader-text{
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px,1px,1px,1px); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
::selection{ background: var(--ains-primary); color: var(--ains-primary-ink); }

.ains-container{
	max-width: var(--ains-container);
	margin-inline: auto;
	padding-inline: 20px;
}

/* ==========================================================================
   3. Layout skeleton (kept intentionally minimal here — full component
      styles live in assets/css/theme.css so this file stays a clean,
      spec-compliant "Theme Name" stylesheet WordPress reads metadata from).
   ========================================================================== */
.ains-skip-link{
	position: absolute; inset-inline-start: -9999px; top: 0; z-index: 999999;
	background: var(--ains-primary); color: var(--ains-primary-ink);
	padding: 10px 18px; border-radius: 0 0 var(--ains-radius-sm) var(--ains-radius-sm);
}
.ains-skip-link:focus{ inset-inline-start: 10px; }