/**
 * Niloofar Ghanbari Brand Design Tokens & System Styles
 * Typography: IRANSansX (Pro) Woff2 locally embedded
 * Dual Theme System: Cinematic Dark & Rose Editorial Light
 */

/* =============================================================
   1. IRANSANSX LOCAL FONT DEFINITIONS (WOFF2)
============================================================= */
@font-face {
    font-family: 'IRANSansXFaNum';
    src: url('../fonts/IRANSansXFaNum-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IRANSansXFaNum';
    src: url('../fonts/IRANSansXFaNum-UltraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IRANSansXFaNum';
    src: url('../fonts/IRANSansXFaNum-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IRANSansXFaNum';
    src: url('../fonts/IRANSansXFaNum-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IRANSansXFaNum';
    src: url('../fonts/IRANSansXFaNum-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IRANSansXFaNum';
    src: url('../fonts/IRANSansXFaNum-DemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IRANSansXFaNum';
    src: url('../fonts/IRANSansXFaNum-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IRANSansXFaNum';
    src: url('../fonts/IRANSansXFaNum-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IRANSansXFaNum';
    src: url('../fonts/IRANSansXFaNum-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* English Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* DARK THEME (PRIMARY SIGNATURE) */
    --ng-bg-main: #09090D;
    --ng-bg-secondary: #111118;
    --ng-bg-surface: #191922;
    --ng-bg-elevated: #20202C;
    
    --ng-primary-purple: #9366F5;
    --ng-hover-purple: #AB88FF;
    --ng-soft-lavender: #C8B4FF;
    
    --ng-accent: var(--ng-primary-purple);
    --ng-accent-hover: var(--ng-hover-purple);
    --ng-accent-soft: rgba(147, 102, 245, 0.14);
    --ng-accent-glow: 0 0 35px -5px rgba(147, 102, 245, 0.35);

    --ng-text-main: #F8F7FC;
    --ng-text-secondary: #A6A3B2;
    --ng-text-muted: #737082;

    --ng-border: rgba(255, 255, 255, 0.09);
    --ng-border-hover: rgba(147, 102, 245, 0.4);
    
    --ng-shadow-card: 0 16px 36px -12px rgba(0, 0, 0, 0.6);
    --ng-shadow-dropdown: 0 24px 48px -12px rgba(0, 0, 0, 0.75);

    --ng-glass-bg: rgba(9, 9, 13, 0.82);
    --ng-glass-border: rgba(255, 255, 255, 0.08);

    --ng-font-fa: 'IRANSansXFaNum', 'IRANSansX', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ng-font-en-head: 'DM Serif Display', Georgia, serif;
    --ng-font-en-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    --ng-ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
    --ng-transition-fast: 0.2s var(--ng-ease-editorial);
    --ng-transition-normal: 0.35s var(--ng-ease-editorial);
    --ng-transition-slow: 0.6s var(--ng-ease-editorial);
}

[data-theme="light"] {
    /* LIGHT THEME (EDITORIAL ROSE & CRISP WHITE) */
    --ng-bg-main: #FFFFFF;
    --ng-bg-secondary: #F8F9FC;
    --ng-bg-surface: #FFFFFF;
    --ng-bg-elevated: #F4F5FA;

    --ng-primary-purple: #BF6485; /* Primary rose accent */
    --ng-hover-purple: #A94E72;
    --ng-soft-lavender: #FBEFF4; /* Soft blush */

    --ng-accent: var(--ng-primary-purple);
    --ng-accent-hover: var(--ng-hover-purple);
    --ng-accent-soft: rgba(191, 100, 133, 0.1);
    --ng-accent-glow: 0 0 30px -5px rgba(191, 100, 133, 0.25);

    --ng-text-main: #181821;
    --ng-text-secondary: #666775;
    --ng-text-muted: #8E8F9E;

    --ng-border: #E9E9EF;
    --ng-border-hover: rgba(191, 100, 133, 0.4);

    --ng-shadow-card: 0 12px 32px -8px rgba(0, 0, 0, 0.06);
    --ng-shadow-dropdown: 0 20px 40px -10px rgba(0, 0, 0, 0.1);

    --ng-glass-bg: rgba(255, 255, 255, 0.88);
    --ng-glass-border: rgba(0, 0, 0, 0.07);
}

/* Base Body Styling */
html, body {
    background-color: var(--ng-bg-main) !important;
    color: var(--ng-text-main) !important;
    font-family: var(--ng-font-fa) !important;
    margin: 0;
    padding: 0;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--ng-transition-normal), color var(--ng-transition-normal);
}

/* Global suppression of auto-generated WordPress page titles */
.page-header, 
.entry-title, 
.post-title, 
header.page-header,
.site-main > header {
    display: none !important;
}

/* LTR English mode typography */
html[dir="ltr"] body,
[lang="en"] body {
    font-family: var(--ng-font-en-body) !important;
}

html[dir="ltr"] h1, html[dir="ltr"] h2, html[dir="ltr"] h3,
[lang="en"] h1, [lang="en"] h2, [lang="en"] h3 {
    font-family: var(--ng-font-en-head);
    letter-spacing: -0.02em;
}

/* Fluid Typography */
.ng-hero-title {
    font-size: clamp(2.2rem, 5.2vw, 4rem);
    line-height: 1.25;
    font-weight: 800;
    color: var(--ng-text-main);
    letter-spacing: -0.025em;
    font-family: var(--ng-font-fa);
}

.ng-section-title {
    font-size: clamp(1.8rem, 3.8vw, 2.7rem);
    line-height: 1.3;
    font-weight: 700;
    color: var(--ng-text-main);
    letter-spacing: -0.02em;
    font-family: var(--ng-font-fa);
}

.ng-section-subtitle {
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    color: var(--ng-text-secondary);
    max-width: 620px;
    margin: 0.6rem auto 0 auto;
    font-weight: 400;
}

.ng-card-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ng-text-main);
    margin-bottom: 0.6rem;
    font-family: var(--ng-font-fa);
}

/* Brand Buttons */
.ng-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.85rem 1.8rem;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
    transition: all var(--ng-transition-fast);
    border: 1px solid transparent;
    user-select: none;
    font-family: var(--ng-font-fa);
}

.ng-btn-primary {
    background: var(--ng-accent);
    color: #FFFFFF !important;
    box-shadow: 0 4px 20px -4px var(--ng-accent-glow);
}

.ng-btn-primary:hover {
    background: var(--ng-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -4px var(--ng-accent-glow);
}

.ng-btn-secondary {
    background: var(--ng-bg-surface);
    color: var(--ng-text-main) !important;
    border: 1px solid var(--ng-border);
}

.ng-btn-secondary:hover {
    border-color: var(--ng-border-hover);
    background: var(--ng-bg-elevated);
    transform: translateY(-2px);
}

.ng-btn-ghost {
    background: transparent;
    color: var(--ng-text-main) !important;
    border: 1px solid var(--ng-border);
}

.ng-btn-ghost:hover {
    background: var(--ng-accent-soft);
    color: var(--ng-accent) !important;
    border-color: var(--ng-accent);
}

/* Badge / Eyebrow */
.ng-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 600;
    background: var(--ng-accent-soft);
    color: var(--ng-accent);
    border: 1px solid var(--ng-border);
    margin-bottom: 1.2rem;
    letter-spacing: 0.02em;
    font-family: var(--ng-font-fa);
}

/* Universal Card */
.ng-card {
    background: var(--ng-bg-surface);
    border: 1px solid var(--ng-border);
    border-radius: 24px;
    padding: 2.2rem 2rem;
    box-shadow: var(--ng-shadow-card);
    transition: transform var(--ng-transition-normal), border-color var(--ng-transition-normal), box-shadow var(--ng-transition-normal);
    position: relative;
    overflow: hidden;
}

.ng-card:hover {
    transform: translateY(-6px);
    border-color: var(--ng-border-hover);
    box-shadow: 0 20px 40px -10px var(--ng-accent-soft);
}

/* Micro-animations */
@keyframes ngFadeInUp {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ngPulseGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 var(--ng-accent-soft);
    }
    50% {
        box-shadow: 0 0 0 12px transparent;
    }
}

.ng-animate-fadein {
    animation: ngFadeInUp 0.7s var(--ng-ease-editorial) forwards;
}