/* ════════════════════════════════════════════════════════
   QURAN ACADEMY – DESIGN SYSTEM
   Islamic-inspired premium design tokens
   Supports: Light mode, Dark mode, LTR (EN), RTL (AR)
════════════════════════════════════════════════════════ */

/* ─── Google Fonts ─────────────────────────────────── */
/* Loaded via index.html <link> tags */

/* ─── CSS Reset & Base ─────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

/* ─── Light Mode Tokens ────────────────────────────── */
:root {
    /* ── Brand Colors ── */
    --color-primary:          #0d6b52;
    --color-primary-hover:    #0a5740;
    --color-primary-active:   #084433;
    --color-primary-light:    rgba(13, 107, 82, 0.12);
    --color-primary-lighter:  rgba(13, 107, 82, 0.06);
    --color-primary-rgb:      13, 107, 82;

    --color-accent:           #c9a227;
    --color-accent-hover:     #b8901e;
    --color-accent-light:     rgba(201, 162, 39, 0.15);
    --color-accent-lighter:   rgba(201, 162, 39, 0.08);

    /* ── Semantic Colors ── */
    --color-success:          #10b981;
    --color-success-light:    rgba(16, 185, 129, 0.12);
    --color-success-dark:     #059669;

    --color-warning:          #f59e0b;
    --color-warning-light:    rgba(245, 158, 11, 0.12);
    --color-warning-dark:     #d97706;

    --color-error:            #ef4444;
    --color-error-light:      rgba(239, 68, 68, 0.12);
    --color-error-dark:       #dc2626;

    --color-info:             #3b82f6;
    --color-info-light:       rgba(59, 130, 246, 0.12);
    --color-info-dark:        #2563eb;

    /* ── Backgrounds ── */
    --color-bg:               #faf9f7;
    --color-surface:          #ffffff;
    --color-card:             #ffffff;
    --color-card-hover:       #f8f7f5;
    --color-overlay:          rgba(0, 0, 0, 0.5);

    /* ── Borders ── */
    --color-border:           #e5e7eb;
    --color-border-light:     #f3f4f6;
    --color-border-focus:     var(--color-primary);

    /* ── Text ── */
    --color-text:             #111827;
    --color-text-secondary:   #4b5563;
    --color-text-muted:       #9ca3af;
    --color-text-disabled:    #d1d5db;
    --color-text-inverse:     #ffffff;
    --color-text-on-primary:  #ffffff;
    --color-text-on-accent:   #1a1200;

    /* ── Sidebar (always dark) ── */
    --color-sidebar-bg:       #0a1628;
    --color-sidebar-border:   rgba(255,255,255,0.08);
    --color-sidebar-text:     rgba(255,255,255,0.75);
    --color-sidebar-text-active: #ffffff;
    --color-sidebar-item-hover: rgba(255,255,255,0.08);
    --color-sidebar-item-active: rgba(13, 107, 82, 0.35);

    /* ── Typography ── */
    --font-en:                'Outfit', system-ui, sans-serif;
    --font-ar:                'Cairo', 'Outfit', system-ui, sans-serif;
    --font-quran:             'Noto Naskh Arabic', 'Traditional Arabic', serif;

    /* Font Scale */
    --text-xs:    0.6875rem;   /* 11px */
    --text-sm:    0.8125rem;   /* 13px */
    --text-base:  0.9375rem;   /* 15px */
    --text-lg:    1.0625rem;   /* 17px */
    --text-xl:    1.25rem;     /* 20px */
    --text-2xl:   1.5rem;      /* 24px */
    --text-3xl:   1.875rem;    /* 30px */
    --text-4xl:   2.25rem;     /* 36px */
    --text-5xl:   3rem;        /* 48px */
    --text-6xl:   3.75rem;     /* 60px */

    /* Quran Font Scale */
    --quran-font-size:        1.75rem; /* user-adjustable via JS */

    /* Line Heights */
    --leading-tight:   1.25;
    --leading-snug:    1.375;
    --leading-normal:  1.5;
    --leading-relaxed: 1.625;
    --leading-loose:   2;
    --leading-quran:   2.2;

    /* Font Weights */
    --font-light:     300;
    --font-normal:    400;
    --font-medium:    500;
    --font-semibold:  600;
    --font-bold:      700;
    --font-extrabold: 800;

    /* ── Spacing ── */
    --sp-1:   0.25rem;   /* 4px */
    --sp-2:   0.5rem;    /* 8px */
    --sp-3:   0.75rem;   /* 12px */
    --sp-4:   1rem;      /* 16px */
    --sp-5:   1.25rem;   /* 20px */
    --sp-6:   1.5rem;    /* 24px */
    --sp-7:   1.75rem;   /* 28px */
    --sp-8:   2rem;      /* 32px */
    --sp-10:  2.5rem;    /* 40px */
    --sp-12:  3rem;      /* 48px */
    --sp-14:  3.5rem;    /* 56px */
    --sp-16:  4rem;      /* 64px */
    --sp-20:  5rem;      /* 80px */
    --sp-24:  6rem;      /* 96px */
    --sp-32:  8rem;      /* 128px */

    /* ── Border Radius ── */
    --radius-xs:   0.25rem;   /* 4px */
    --radius-sm:   0.375rem;  /* 6px */
    --radius-md:   0.5rem;    /* 8px */
    --radius-lg:   0.75rem;   /* 12px */
    --radius-xl:   1rem;      /* 16px */
    --radius-2xl:  1.5rem;    /* 24px */
    --radius-3xl:  2rem;      /* 32px */
    --radius-full: 9999px;

    /* ── Shadows ── */
    --shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
    --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
    --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.08), 0 10px 10px -5px rgba(0,0,0,0.03);
    --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.15);
    --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-card-hover: 0 8px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-primary: 0 4px 14px rgba(var(--color-primary-rgb), 0.35);
    --shadow-primary-lg: 0 8px 24px rgba(var(--color-primary-rgb), 0.4);
    --shadow-inner: inset 0 2px 4px rgba(0,0,0,0.06);

    /* ── Transitions ── */
    --transition-fast:    100ms ease;
    --transition-normal:  200ms ease;
    --transition-slow:    350ms ease;
    --transition-spring:  400ms cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-smooth:  300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Z-index Scale ── */
    --z-base:       1;
    --z-raised:     10;
    --z-dropdown:   100;
    --z-sticky:     200;
    --z-fixed:      300;
    --z-overlay:    400;
    --z-modal:      500;
    --z-toast:      600;
    --z-tooltip:    700;

    /* ── Layout ── */
    --sidebar-width:      260px;
    --sidebar-collapsed:  72px;
    --top-bar-height:     64px;
    --bottom-nav-height:  72px;
    --content-max-width:  1200px;
    --card-gap:           1.25rem;
    --page-padding:       1.5rem;
    --page-padding-sm:    1rem;
}

/* ─── Dark Mode Tokens ─────────────────────────────── */
[data-theme="dark"] {
    /* Backgrounds */
    --color-bg:               #0c111d;
    --color-surface:          #131b2e;
    --color-card:             #1a2540;
    --color-card-hover:       #1f2e4e;
    --color-overlay:          rgba(0, 0, 0, 0.7);

    /* Borders */
    --color-border:           #2a3553;
    --color-border-light:     #1a2540;

    /* Text */
    --color-text:             #f1f5f9;
    --color-text-secondary:   #94a3b8;
    --color-text-muted:       #64748b;
    --color-text-disabled:    #475569;

    /* Shadows */
    --shadow-xs:  0 1px 2px rgba(0,0,0,0.3);
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -1px rgba(0,0,0,0.3);
    --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -2px rgba(0,0,0,0.3);
    --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.5), 0 10px 10px -5px rgba(0,0,0,0.3);
    --shadow-card: 0 2px 4px rgba(0,0,0,0.4);
    --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.5);
    --shadow-primary: 0 4px 14px rgba(var(--color-primary-rgb), 0.45);
}

/* ─── Base Typography ───────────────────────────────── */
body {
    font-family: var(--font-en);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    transition: background-color var(--transition-slow), color var(--transition-slow);
}

/* RTL body uses Arabic font as base */
[lang="ar"] body,
body[dir="rtl"] {
    font-family: var(--font-ar);
}

/* Arabic text within any element */
[lang="ar"], .arabic-text {
    font-family: var(--font-ar);
    direction: rtl;
}

/* Quran text always uses dedicated Quran font */
.quran-text {
    font-family: var(--font-quran);
    direction: rtl;
    text-align: center;
    font-size: var(--quran-font-size);
    line-height: var(--leading-quran);
    color: var(--color-text);
    font-feature-settings: "calt" 1, "kern" 1;
}

/* ─── Focus Styles ─────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ─── Selection ────────────────────────────────────── */
::selection {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
}

/* ─── Scrollbars ─────────────────────────────────────*/
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--color-border-light);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

/* ─── Utility Classes ───────────────────────────────── */
.hidden { display: none !important; }
.invisible { visibility: hidden !important; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Flex utilities */
.flex         { display: flex; }
.flex-col     { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }

/* Text utilities */
.text-center { text-align: center; }
.text-primary { color: var(--color-primary); }
.text-accent  { color: var(--color-accent); }
.text-muted   { color: var(--color-text-muted); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error   { color: var(--color-error); }

/* Width/Height */
.w-full { width: 100%; }
.h-full { height: 100%; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* Truncation */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Grid */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--card-gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--card-gap); }
@media (max-width: 768px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ─── Islamic Geometric Pattern (CSS) ──────────────── */
.islamic-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230d6b52' fill-opacity='0.06'%3E%3Cpath d='M30 0l8.66 15H21.34L30 0zm0 60l-8.66-15h17.32L30 60zM0 30l15-8.66v17.32L0 30zm60 0l-15 8.66V21.34L60 30z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.islamic-pattern-gold {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c9a227' fill-opacity='0.08'%3E%3Cpath d='M30 0l8.66 15H21.34L30 0zm0 60l-8.66-15h17.32L30 60zM0 30l15-8.66v17.32L0 30zm60 0l-15 8.66V21.34L60 30z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}