/* Design tokens — colors, type, spacing, radii, shadows. */

:root {
    /* Brand colors */
    --color-brand-deep:     #2A5184;
    --color-brand:          #82B6DC;
    --color-brand-soft:     #E5EEF7;

    --color-primary:        var(--color-brand-deep);
    --color-primary-dark:   #1B3D69;
    --color-primary-light:  var(--color-brand);
    --color-primary-soft:   var(--color-brand-soft);

    --color-accent:         #C8932E;
    --color-accent-dark:    #A37722;
    --color-accent-soft:    #F7E8C7;

    /* Neutrals */
    --color-text:           #0F1B2A;
    --color-text-muted:     #5C6878;
    --color-text-subtle:    #8A95A3;
    --color-text-on-dark:   #FFFFFF;

    --color-bg:             #FFFFFF;
    --color-bg-soft:        #F5F7FA;
    --color-bg-tinted:      #EEF3F9;
    --color-bg-dark:        #0F1B2A;

    --color-border:         #E2E6EC;
    --color-border-strong:  #C5CCD6;

    /* Semantic */
    --color-success:        #2F8C5C;
    --color-success-soft:   #D4F0DF;
    --color-danger:         #C03A3A;
    --color-danger-soft:    #FBDDDD;
    --color-warning:        #C8932E;
    --color-warning-soft:   #F7E8C7;

    --color-focus-ring:     rgba(42, 81, 132, 0.35);

    /* Legacy blue aliases */
    --legacy-blue-1: var(--color-brand);
    --legacy-blue-2: var(--color-primary);
    --legacy-blue-3: var(--color-primary-dark);

    /* ---------- Typography ---------- */
    --font-en:      'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    
    /* Jameel Noori Nastaleeq is the visually preferred Urdu face — calligraphic,
       traditional. The woff2 (~6.7 MB) loads asynchronously via @font-face with
       `font-display: swap`, so initial paint uses the lighter Noto fallback and
       text upgrades to Jameel when the file arrives. */
    --font-ur:      'Jameel', 'Noori Nastaleeq', 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif;
    --font-quran:   'Amiri Quran', 'quranic', serif;

    --fs-display:   clamp(2.75rem, 5vw, 4.5rem);
    --fs-h1:        clamp(2.25rem, 4vw, 3.25rem);
    --fs-h2:        clamp(1.75rem, 3vw, 2.5rem);
    --fs-h3:        1.625rem;
    --fs-body:      1.15rem;     /* was 1.05 — bumped for readability */
    --fs-body-sm:   1rem;
    --fs-meta:      0.95rem;

    --fs-ur-display: clamp(3.5rem, 7vw, 6rem);
    --fs-ur-h1:      clamp(3rem,   6vw, 5rem);
    --fs-ur-body:    clamp(2rem,   3vw, 2.5rem);

    --lh-tight:     1.2;
    --lh-base:      1.6;
    --lh-loose:     1.85;
    --lh-jameel:    2.6;

    --fw-regular:   400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;
    --fw-black:     900;

    /* Spacing — 8px grid */
    --space-1:  0.5rem;
    --space-2:  1rem;
    --space-3:  1.5rem;
    --space-4:  2rem;
    --space-6:  3rem;
    --space-8:  4rem;
    --space-12: 6rem;
    --space-16: 8rem;

    /* ---------- Radii & shadow ---------- */
    --radius-sm: 4px;
    --radius:    8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    --shadow-sm:   0 1px 2px rgba(15, 27, 42, 0.06);
    --shadow:      0 4px 14px rgba(15, 27, 42, 0.09);
    --shadow-lg:   0 16px 40px rgba(15, 27, 42, 0.14);
    --shadow-ring: 0 0 0 3px var(--color-focus-ring);

    /* ---------- Motion ---------- */
    --transition-fast: 0.12s ease-out;
    --transition:      0.2s  ease-out;
    --transition-slow: 0.4s  ease-out;
}

html { scroll-behavior: smooth; }

body {
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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

:focus-visible {
    outline: none;
    box-shadow: var(--shadow-ring);
    border-radius: var(--radius-sm);
}

::selection { background: var(--color-primary); color: #fff; }