/*
Theme Name: NILECODES
Theme URI: https://nilecodes.com
Author: NILECODES Team
Author URI: https://nilecodes.com
Description: A professional, high-performance, mobile-first sports news WordPress theme. Built for Elementor Pro Theme Builder compatibility with RTL support, dark mode, live scores, and dynamic sports content management.
Version: 1.0.0
Tested up to: 6.7
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nilecodes
Domain Path: /languages
Tags: sports, news, magazine, dark-mode, rtl-language-support, custom-colors, custom-logo, custom-menu, featured-images, theme-options, translation-ready, blog, one-column, two-columns, right-sidebar, grid-layout, footer-widgets, full-width-template
*/

/* ==========================================================================
   NILECODES Design System — CSS Custom Properties
   ========================================================================== */

:root {
	/* ── Brand Colors ──────────────────────────────────────────────────── */
	--nc-primary:         #0A1628;
	--nc-primary-rgb:     10, 22, 40;
	--nc-surface:         #FFFFFF;
	--nc-surface-alt:     #F4F6F9;
	--nc-text:            #1A2332;
	--nc-text-muted:      #6B7A8D;
	--nc-accent-green:    #00E676;
	--nc-accent-green-rgb: 0, 230, 118;
	--nc-accent-red:      #FF1744;
	--nc-accent-red-rgb:  255, 23, 68;
	--nc-border:          #E2E8F0;

	/* ── Extended Palette ──────────────────────────────────────────────── */
	--nc-accent-amber:    #FFB300;
	--nc-accent-blue:     #2979FF;
	--nc-overlay:         rgba(10, 22, 40, 0.65);

	/* ── Typography ────────────────────────────────────────────────────── */
	--nc-font-body:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
	--nc-font-mono:       'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
	--nc-font-size-xs:    0.75rem;   /* 12px */
	--nc-font-size-sm:    0.875rem;  /* 14px */
	--nc-font-size-base:  1rem;      /* 16px */
	--nc-font-size-md:    1.125rem;  /* 18px */
	--nc-font-size-lg:    1.25rem;   /* 20px */
	--nc-font-size-xl:    1.5rem;    /* 24px */
	--nc-font-size-2xl:   2rem;      /* 32px */
	--nc-font-size-3xl:   2.5rem;    /* 40px */
	--nc-font-size-4xl:   3rem;      /* 48px */
	--nc-line-height:     1.65;
	--nc-line-height-tight: 1.25;

	/* ── Spacing Scale (4px base) ──────────────────────────────────────── */
	--nc-sp-1:   0.25rem;  /*  4px */
	--nc-sp-2:   0.5rem;   /*  8px */
	--nc-sp-3:   0.75rem;  /* 12px */
	--nc-sp-4:   1rem;     /* 16px */
	--nc-sp-5:   1.25rem;  /* 20px */
	--nc-sp-6:   1.5rem;   /* 24px */
	--nc-sp-8:   2rem;     /* 32px */
	--nc-sp-10:  2.5rem;   /* 40px */
	--nc-sp-12:  3rem;     /* 48px */
	--nc-sp-16:  4rem;     /* 64px */
	--nc-sp-20:  5rem;     /* 80px */

	/* ── Border Radius ─────────────────────────────────────────────────── */
	--nc-radius-sm:   0.25rem;
	--nc-radius-md:   0.5rem;
	--nc-radius-lg:   0.75rem;
	--nc-radius-xl:   1rem;
	--nc-radius-full: 9999px;

	/* ── Shadows ───────────────────────────────────────────────────────── */
	--nc-shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
	--nc-shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
	--nc-shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
	--nc-shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
	--nc-shadow-card: 0 2px 8px rgba(10, 22, 40, 0.06);

	/* ── Z-Index Scale ─────────────────────────────────────────────────── */
	--nc-z-dropdown:  100;
	--nc-z-sticky:    200;
	--nc-z-overlay:   300;
	--nc-z-modal:     400;
	--nc-z-ticker:    500;
	--nc-z-tooltip:   600;

	/* ── Transitions ───────────────────────────────────────────────────── */
	--nc-transition-fast:   150ms ease;
	--nc-transition-base:   250ms ease;
	--nc-transition-slow:   350ms ease;
	--nc-transition-colors: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;

	/* ── Layout ────────────────────────────────────────────────────────── */
	--nc-container-max:   1280px;
	--nc-container-wide:  1536px;
	--nc-sidebar-width:   320px;
	--nc-header-height:   72px;
	--nc-ticker-height:   40px;
}

/* ==========================================================================
   Dark Mode — Variable Overrides
   ========================================================================== */

[data-theme="dark"] {
	--nc-primary:         #0A1628;
	--nc-surface:         #1A2332;
	--nc-surface-alt:     #0F1923;
	--nc-text:            #E8ECF1;
	--nc-text-muted:      #8899AA;
	--nc-border:          #2A3544;
	--nc-overlay:         rgba(0, 0, 0, 0.7);
	--nc-shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.2);
	--nc-shadow-md:       0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
	--nc-shadow-lg:       0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
	--nc-shadow-xl:       0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
	--nc-shadow-card:     0 2px 8px rgba(0, 0, 0, 0.2);
}