/* ==========================================================================
   TUNEUPX MASTER DESIGN SYSTEM & BASE CONFIGURATIONS (main.css)
   ========================================================================== */

/* --- Custom Variables & Tokens (Light Theme — Default) --- */
:root {
    --bg-black: #FFFFFF;
    --bg-charcoal: #F9FAFB;
    --bg-card: #FFFFFF;
    --bg-card-hover: #FFFFFF;

    /* Branding Accent Colors -> Amber Gold */
    --accent-orange: #F59E0B;
    --accent-amber: #F59E0B;
    --accent-gold: #D97706;

    /* Glow -> Toned down for light theme */
    --glow-orange: rgba(245, 158, 11, 0.08);
    --glow-gold: rgba(217, 119, 6, 0.05);
    --glow-ambient: rgba(0, 0, 0, 0.01);

    /* Text Layering */
    --text-primary: #1F2937;
    --text-secondary: #4B5563;
    --text-muted: #6B7280;
    --text-muted-dark: #9CA3AF;
    --border-color: rgba(0, 0, 0, 0.08);
    --border-hover: rgba(245, 158, 11, 0.4);

    /* Typography */
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-accent: 'Cairo', sans-serif;

    /* Transitions */
    --transition-smooth: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: all 0.2s ease;
    --border-radius: 12px;

    /* Header */
    --header-bg: rgba(255, 255, 255, 0.8);
    --header-border: rgba(0, 0, 0, 0.07);
    --footer-bg: #111827;
    --footer-text: #D1D5DB;
}

/* --- Dark Mode Overrides --- */
body.dark-mode {
    --bg-black: #0D1117;
    --bg-charcoal: #161B22;
    --bg-card: #1C2230;
    --bg-card-hover: #1F2840;

    --glow-orange: rgba(245, 158, 11, 0.15);
    --glow-gold: rgba(217, 119, 6, 0.1);
    --glow-ambient: rgba(0, 0, 0, 0.3);

    --text-primary: #F0F6FC;
    --text-secondary: #C9D1D9;
    --text-muted: #8B949E;
    --text-muted-dark: #6E7681;
    --border-color: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(245, 158, 11, 0.5);

    --header-bg: rgba(13, 17, 23, 0.8);
    --header-border: rgba(255, 255, 255, 0.07);
    --footer-bg: #0D1117;
    --footer-text: #8B949E;
}

/* Smooth theme transition */
body, body * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}



/* --- Base Standard Reset --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    background-color: var(--bg-black);
    color: var(--text-primary);
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    overflow-x: hidden;
    background-color: var(--bg-black);
    -webkit-font-smoothing: antialiased;
    color: var(--text-primary);
}

/* --- Scrollbar Customization --- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-black);
}

::-webkit-scrollbar-thumb {
    background: #E5E7EB;
    border-radius: 4px;
    border: 2px solid var(--bg-black);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-orange);
}

/* --- Semantic Elements Styles --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    line-height: 1.2;
}

p {
    color: var(--text-secondary);
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}

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

table {
    width: 100%;
    border-collapse: collapse;
}

ul {
    list-style: none;
}

/* --- Custom Typographic Helpers --- */
.gradient-text {
    background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-amber) 50%, var(--accent-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.glow-text {
    text-shadow: 0 0 20px rgba(255, 140, 0, 0.4);
}

.uppercase-label {
    font-family: var(--font-accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.8rem;
}

.gold-text { color: var(--accent-gold) !important; }
.orange-text { color: var(--accent-orange) !important; }
.amber-text { color: var(--accent-amber) !important; }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted) !important; }
.w-full { width: 100%; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 2rem; }
.mb-4 { margin-bottom: 1rem; }
.hidden { display: none !important; }

/* --- Shared Layout Containers --- */
.section-padding {
    padding: 6.25rem 0;
}

.section-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.section-header {
    margin-bottom: 4rem;
    max-width: 700px;
}

.section-header.text-center {
    margin-left: auto;
    margin-right: auto;
}

.section-title {
    font-size: 2.75rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    line-height: 1.15;
}

.section-desc {
    font-size: 1.125rem;
    color: var(--text-muted);
}

.subsection-title {
    font-size: 1.5rem;
    margin-top: 3rem;
}

/* Grid Frameworks */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

/* Split Column Standard Layout */
.split-hero-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
    align-items: center;
}

/* Background watermarks for Islamic patterns */
.islamic-watermark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.opacity-3 { opacity: 0.03; }
.opacity-5 { opacity: 0.05; }

/* --- Geometric SVG Background Pattern Encoded --- */
.pattern-arabesque {
    /* Sophisticated repeating octagonal stars */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 0 L38.8 8.8 L45 0 L51.2 8.8 L60 0 L51.2 11.2 L60 20 L51.2 28.8 L60 30 L51.2 31.2 L60 40 L51.2 48.8 L60 60 L48.8 51.2 L40 60 L31.2 51.2 L30 60 L28.8 51.2 L20 60 L11.2 51.2 L0 60 L8.8 48.8 L0 40 L8.8 31.2 L0 30 L8.8 28.8 L0 20 L8.8 11.2 L0 0 L11.2 8.8 L20 0 L28.8 8.8 Z' fill='none' stroke='%23C8962A' stroke-width='0.4' opacity='0.25'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

.pattern-mashrabiya {
    /* Interconnected wood carving mesh */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M 0 40 L 40 0 L 80 40 L 40 80 Z M 40 0 L 40 80 M 0 40 L 80 40' fill='none' stroke='%23E8610A' stroke-width='0.4' opacity='0.25'/%3E%3Ccircle cx='40' cy='40' r='6' fill='none' stroke='%23E8610A' stroke-width='0.5'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

/* --- Global Transition Overlay System --- */
.transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(100%);
    transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}

.transition-overlay.active {
    transform: translateY(0);
}

.transition-overlay.fade-out {
    transform: translateY(-100%);
}

.transition-pattern {
    width: 100%;
    height: 100%;
}

.pattern-path {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: drawPattern 2s infinite linear;
}

@keyframes drawPattern {
    0% { stroke-dashoffset: 200; }
    50% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -200; }
}

/* --- Master Keyframe Library --- */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes pulseGlow {
    0% { transform: scale(0.92); opacity: 0.4; }
    50% { transform: scale(1.05); opacity: 0.95; }
    100% { transform: scale(0.92); opacity: 0.4; }
}

@keyframes floatIndicator {
    0% { transform: translateY(0); }
    50% { transform: translateY(8px); }
    100% { transform: translateY(0); }
}

@keyframes dashFlow {
    to { stroke-dashoffset: -20; }
}

/* --- RTL (Right-to-Left Layout Engine) --- */
body.rtl, [dir="rtl"] body {
    direction: rtl;
    text-align: right;
    font-family: var(--font-accent), var(--font-body);
}

/* Mirrored Alignments using Logical Properties natively */
.rtl .text-center { text-align: center; }
.rtl .desktop-nav { margin-right: auto; margin-left: 0; }
.rtl .header-actions { margin-left: 0; margin-right: auto; }
.rtl .card-link i { transform: scaleX(-1); margin-right: 0.5rem; margin-left: 0; }

/* Responsive adjustments */
@media (max-width: 1024px) {
    .split-hero-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }
    
    .grid-4, .grid-3, .grid-2, .grid-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
    
    .section-padding {
        padding: 4rem 0;
    }
    
    .grid-4, .grid-3, .grid-2, .grid-5 {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .section-title {
        font-size: 2.2rem;
    }
}