/* ══════════════════════════════════════════════════════════════
   QUDS DESIGN TOKENS v2 — Premium Editorial System
   Single source of truth. Loaded BEFORE global.css and style.css.
   Every component should reference these tokens, not hardcode values.
   ══════════════════════════════════════════════════════════════ */

:root {
    /* ═══════════════════════════════
       TYPOGRAPHY
       ═══════════════════════════════ */

    /* Font families (Arabic-first, humanist, editorial) */
    --qd-font-body:    'IBM Plex Sans Arabic', 'Tajawal', 'Cairo', system-ui, -apple-system, sans-serif;
    --qd-font-display: 'IBM Plex Sans Arabic', 'Tajawal', 'Cairo', Georgia, serif;
    --qd-font-mono:    ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;

    /* Size scale — Arabic reads denser, base is 19px not 16px */
    --qd-fs-xs:    0.875rem;    /* 14px — caption, microcopy, meta */
    --qd-fs-sm:    0.9375rem;   /* 15px — secondary body, UI labels */
    --qd-fs-base:  1.1875rem;   /* 19px — PRIMARY body text */
    --qd-fs-lg:    1.375rem;    /* 22px — article body, deck, lead */
    --qd-fs-xl:    1.625rem;    /* 26px — h4, compact card titles */
    --qd-fs-2xl:   2rem;        /* 32px — h3, section titles */
    --qd-fs-3xl:   2.5rem;      /* 40px — h2, large card titles */
    --qd-fs-4xl:   clamp(2rem, 4.2vw, 3.25rem);    /* h1, feature card hero */
    --qd-fs-5xl:   clamp(2.5rem, 6vw, 4.25rem);    /* display (homepage hero) */

    /* Line-heights — Arabic needs more breathing room */
    --qd-lh-body:     1.9;      /* Article body — generous */
    --qd-lh-heading:  1.3;      /* Headings — tighter but not cramped */
    --qd-lh-tight:    1.15;     /* Display headlines only */
    --qd-lh-ui:       1.5;      /* UI labels, buttons */

    /* Font weights */
    --qd-fw-regular:  400;
    --qd-fw-medium:   500;
    --qd-fw-semibold: 600;
    --qd-fw-bold:     700;
    --qd-fw-extra:    800;

    /* Measure — ideal Arabic reading column width */
    --qd-measure:     68ch;     /* ≈ 680–720px */

    /* Tracking — avoid in Arabic, use for Latin kickers only */
    --qd-tracking-label: 0.05em;

    /* ═══════════════════════════════
       COLOR — EDITORIAL PALETTE
       Muted, confident, NOT flashy.
       Newsprint → not Facebook.
       ═══════════════════════════════ */

    /* Ink (text) — NEVER pure black */
    --qd-ink-900: #111418;      /* Primary body text */
    --qd-ink-700: #2A2F36;      /* Secondary text, sub-headlines */
    --qd-ink-500: #5A6270;      /* Metadata, captions, bylines */
    --qd-ink-400: #8A909C;      /* Tertiary, placeholders */
    --qd-ink-300: #BEC3CC;      /* Disabled, dividers */

    /* Surface (backgrounds) — warm off-white, feels like newsprint */
    --qd-surface-0:    #FAF8F4;  /* Primary background */
    --qd-surface-50:   #F3EFE7;  /* Elevated cards, hover */
    --qd-surface-100:  #E8E3D8;  /* Dividers, borders, pressed */
    --qd-surface-200:  #D8D2C3;  /* Strong divider */
    --qd-surface-900:  #14171C;  /* Inverted sections (podcast, newsletter) */
    --qd-surface-950:  #0B0D11;  /* Footer, deepest dark */

    /* Brand — deep Palestinian red, use sparingly */
    --qd-brand-50:   #F8E8E8;
    --qd-brand-100:  #F1D4D4;
    --qd-brand-400:  #B94444;
    --qd-brand-500:  #9E2929;
    --qd-brand-600:  #8B1E1E;   /* PRIMARY brand color */
    --qd-brand-700:  #6D1616;   /* Hover / pressed */
    --qd-brand-900:  #3D0B0B;

    /* Editorial accents — one per category, rotate, never mix freely */
    --qd-accent-ochre: #A6761D;   /* Politics / reports */
    --qd-accent-teal:  #1F4E4A;   /* Analysis / economy */
    --qd-accent-plum:  #5C2A4E;   /* Culture / opinion */
    --qd-accent-sand:  #C2A77F;   /* Archive / features */
    --qd-accent-ink:   #2B3A55;   /* Investigations / files */

    /* Semantic */
    --qd-success: #2F6F4E;
    --qd-warning: #B8791A;
    --qd-error:   #A83232;

    /* Focus ring (accessibility) */
    --qd-focus: var(--qd-brand-600);

    /* ═══════════════════════════════
       SPACING — 8px base + fluid at large
       ═══════════════════════════════ */

    --qd-space-1:  4px;
    --qd-space-2:  8px;
    --qd-space-3:  12px;
    --qd-space-4:  16px;
    --qd-space-5:  24px;
    --qd-space-6:  32px;
    --qd-space-7:  48px;
    --qd-space-8:  64px;
    --qd-space-9:  96px;     /* Section breaks */
    --qd-space-10: 128px;    /* Major section breaks */

    /* Fluid section padding — adapts to viewport */
    --qd-section-y:  clamp(64px, 8vw, 128px);
    --qd-section-x:  clamp(20px, 4vw, 80px);

    /* Card/grid gaps */
    --qd-gap-sm: 16px;
    --qd-gap-md: 24px;
    --qd-gap-lg: 32px;
    --qd-gap-xl: 40px;

    /* ═══════════════════════════════
       RADIUS — minimal, editorial = sharp
       ═══════════════════════════════ */

    --qd-radius-none: 0;         /* Images, hero, cards DEFAULT */
    --qd-radius-sm:   4px;       /* Buttons, inputs, tags */
    --qd-radius-md:   6px;       /* Elevated cards (sparingly) */
    --qd-radius-lg:   10px;      /* Modals only */
    --qd-radius-full: 9999px;    /* Author photos ONLY */

    /* ═══════════════════════════════
       SHADOWS — subtle, default = NONE
       Editorial design uses borders + rules, not shadows.
       ═══════════════════════════════ */

    --qd-shadow-xs: 0 1px 2px rgba(20, 23, 28, 0.04);
    --qd-shadow-sm: 0 2px 8px rgba(20, 23, 28, 0.06);
    --qd-shadow-md: 0 8px 24px rgba(20, 23, 28, 0.08);
    --qd-shadow-lg: 0 20px 48px rgba(20, 23, 28, 0.12);

    /* ═══════════════════════════════
       RULES & BORDERS
       ═══════════════════════════════ */

    --qd-rule-hairline: 1px solid var(--qd-surface-100);
    --qd-rule-medium:   1px solid var(--qd-surface-200);
    --qd-rule-strong:   2px solid var(--qd-ink-900);     /* Masthead-style */

    /* ═══════════════════════════════
       MOTION — architectural, not playful
       ═══════════════════════════════ */

    --qd-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);     /* Decelerate */
    --qd-ease-in:     cubic-bezier(0.4, 0, 1, 1);
    --qd-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    --qd-dur-fast:    150ms;
    --qd-dur-base:    250ms;
    --qd-dur-slow:    400ms;
    --qd-dur-slower:  600ms;

    /* ═══════════════════════════════
       Z-INDEX SCALE
       ═══════════════════════════════ */

    --qd-z-dropdown: 1000;
    --qd-z-sticky:   1100;
    --qd-z-header:   1200;
    --qd-z-overlay:  1300;
    --qd-z-modal:    1400;
    --qd-z-toast:    1500;
}

/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION — globally respected
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    :root {
        --qd-dur-fast:   0ms;
        --qd-dur-base:   0ms;
        --qd-dur-slow:   0ms;
        --qd-dur-slower: 0ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}