/* =========================================================
   00–tokens.css | Samundri Theme — Central System (RTL/Urdu)
   مقصد: تمام ویری ایبلز، برانڈ رنگ، اور عالمی ری سیٹ رولز۔
   ========================================================= */

/* --- 1. Universal Reset (پوری تھیم کے لیے بنیادی صفائی) --- */
:root { 
    -webkit-text-size-adjust: 100%; 
    text-size-adjust: 100%; 
}

*, *::before, *::after { 
    box-sizing: border-box; 
}

html, body { 
    margin: 0; 
    padding: 0; 
    scrollbar-gutter: stable; 
}

/* میڈیا ایلیمنٹس کے لیے عالمی رول */
img, svg, video, canvas, iframe { 
    max-width: 100%; 
    height: auto; 
    display: block; 
}

/* =========================================================
   2. DESIGN TOKENS (Variables)
   ========================================================= */
:root {
    /* --- Brand Colors (Deep Blue) --- */
    --brand: #1D4ED8;  /* تمام لائنوں کو نیلا کرنے کے لیے */
    --brand-600: #1E40AF;
    --brand-700: #1e3a8a;

    /* --- Semantic Colors --- */
    --ok: #2ecc71;
    --info: #1e90ff;
    --warn: #ff8c00;
    --danger: #121212; /* تمام آئیکونز اور تحریر کو کالا کرنے کے لیے */

    /* --- Neutrals --- */
    --bg: #ffffff;
    --surface: #ffffff;
    --text: #121212;
    --muted: #6b7280;
    --muted-2: #9aa0a6;
    --border: #e5e7eb;

    /* --- Shadows --- */
    --shadow-xs: 0 1px 2px rgba(0,0,0,.06);
    --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
    --shadow-md: 0 6px 16px rgba(0,0,0,.12);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.16);

    /* --- Radii (Corners) --- */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-pill: 999px;

    /* --- Transitions --- */
    --t-fast: .15s ease;
    --t-norm: .18s ease;
    --t-slow: .25s ease;

    /* --- Layout Measurements --- */
    --maxw: min(1100px, 96vw);
    --pad-inline: 12px;
    --header-h: 64px;
    --menu-h: 48px;
    --newsbar-h: 48px;
    --social-h: 40px;

    /* --- Typography Scale --- */
--font-urdu: "MehrNastaliqCustom", "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;
--lh: 1.9;
    --fs-root: 16px;
    --fs-xxs: 12px;
    --fs-xs: 13px;
    --fs-sm: 14px;
    --fs-md: 16px;
    --fs-lg: 18px;
    --fs-xl: 20px;
    --fs-2xl: 22px;
    --fs-3xl: 26px;

    /* --- Z-index Hierarchy --- */
    --z-0: 0; 
    --z-1: 1; 
    --z-2: 2; 
    --z-10: 10; 
    --z-100: 100; 
    --z-1000: 1000;

    /* --- Spacing Scale --- */
    --sp-0: 0; 
    --sp-1: .25rem; 
    --sp-2: .5rem; 
    --sp-3: .75rem; 
    --sp-4: 1rem;
    --sp-5: 1.25rem; 
    --sp-6: 1.5rem; 
    --sp-8: 2rem; 
    --sp-10: 2.5rem;

    /* --- Header Specifics --- */
    --chip-fs-d: 16px;
    --chip-py-d: 6px;
    --chip-px-d: 12px;
    --newsbar-pad-x: 22px;
    --newsbar-vpad: 16px;
}

/* =========================================================
   3. DARK MODE (اوور رائیڈز)
   ========================================================= */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0f172a;           /* Deep Navy */
        --surface: #1e293b;      /* Navy Surface */
        --text: #f1f5f9;         /* Light Gray Text */
        --muted: #94a3b8;
        --border: #334155;
        --brand: #3b82f6;        /* Brighter Blue for Dark Mode */
        --shadow-sm: 0 2px 8px rgba(0,0,0,.25);
    }
}

/* =========================================================
   4. BREAKPOINT ADJUSTMENTS (موبائل ویری ایبلز)
   ========================================================= */
@media (max-width: 640px) {
    :root {
        --newsbar-h: 42px; 
        --newsbar-vpad: 14px;
    }
}