/* ════════════════════════════════════════════════════════════
   TERAN ILDIZ — css/tokens.css   (v33 · YANGI ARXITEKTURA · 1/7)
   ────────────────────────────────────────────────────────────
   BBC News GEL uslubidagi dizayn tokenlar tizimi.
   TARTIB:  1 tokens → 2 base → 3 layout → 4 components
            → 5 reader → 6 player → 7 intro
   • Barcha 9 mavzu (data-theme) shu yerda
   • Kategoriya ranglari (--cc/--cd/--cg) shu yerda
   • ESKI o'zgaruvchi nomlari ham saqlangan (moslik ko'prigi) —
     JS ichiga singdirilgan style'lar buzilmaydi.
   ════════════════════════════════════════════════════════════ */

:root {
  /* ── FONLAR (dark — standart) ── */
  --bg:      #141619;
  --bg-1:    #17191d;
  --bg-2:    #1b1e23;
  --surf:    #1d2025;
  --surf-1:  #22262c;
  --surf-2:  #282d34;
  --surf-hi: #323944;

  /* ── CHIZIQLAR (BBC: qattiq 1px qoidalar) ── */
  --rule:        #2b3037;   /* asosiy bo'linma chizig'i */
  --rule-strong: #3d434c;   /* qalinroq urg'u chizig'i  */
  --bdr:     rgba(255,255,255,.08);
  --bdr-1:   rgba(255,255,255,.13);
  --bdr-2:   rgba(255,255,255,.22);
  --bdr-cool:rgba(255,255,255,.07);

  /* ── MATN ── */
  --ink:     #ffffff;
  --txt:     #d6dade;
  --muted:   #979da6;
  --dim:     #61676f;

  /* ── BREND (BBC qizil + Teran oltin/zumrad) ── */
  --brand:     #bb1919;              /* BBC-red: blok, chiziq, LIVE     */
  --brand-hi:  #ff6b6b;              /* qorong'i fonda o'qiladigan qizil */
  --brand-dim: rgba(187,25,25,.16);
  --live:      #eb0000;              /* JONLI nuqta                      */
  --gold:      #c9a96a;
  --gold-hi:   #e3c98f;
  --gold-dim:  rgba(201,169,106,.14);
  --emerald:      #2f6b54;
  --emerald-hi:   #46a37e;
  --emerald-glow: rgba(61,138,109,.22);
  --acc:   rgba(201,169,106,.08);
  --acc-1: rgba(201,169,106,.15);

  /* ── MASTHEAD (barcha mavzularda QORA — BBC imzosi) ── */
  --chrome-bg:    #101214;
  --chrome-bg-2:  #16181c;
  --chrome-bdr:   #2a2e35;
  --chrome-ink:   #ffffff;
  --chrome-txt:   #b9bfc7;
  --chrome-hover: rgba(255,255,255,.09);

  /* ── SOYA (BBC yassi — juda kam) ── */
  --sh-sm:  0 1px 2px rgba(0,0,0,.30);
  --sh-md:  0 4px 14px rgba(0,0,0,.35);
  --sh-lg:  0 14px 44px rgba(0,0,0,.55);
  --sh-gold:0 6px 24px rgba(201,169,106,.14);

  /* ── SHAKL (BBC: deyarli to'g'ri burchak) ── */
  --r-sm:  3px;
  --r:     6px;
  --r-lg:  10px;
  --r-pill:999px;

  /* ── HARAKAT ── */
  --dur:    .18s;
  --dur-lg: .34s;
  --ease:   cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --spring: cubic-bezier(.3,1.2,.5,1);

  /* ── O'LCHAM ── */
  --nav-h:  56px;
  --cat-h:  46px;
  --tab-h:  58px;                      /* mobil pastki nav */
  --top:    calc(var(--nav-h) + var(--cat-h));
  --maxw:   1280px;

  /* ── SHRIFT ROLLARI (BBC: sarlavha ham sans) ── */
  --ff-body:   'Outfit','Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --ff-display:'Outfit','Plus Jakarta Sans',system-ui,sans-serif;
  --ff-serif:  'Fraunces','Cormorant Garamond',Georgia,serif;
  --ff-brand:  'Outfit',system-ui,sans-serif;

  /* ── ESKI NOMLAR (moslik ko'prigi — JS-injected CSS uchun) ── */
  --accent:  var(--gold-hi);
  --text:    var(--txt);
  --border:  var(--bdr-1);
  --card:    var(--surf);
  --bg-card: var(--surf-1);
  --ff-disp: var(--ff-display);
  --aqua:    #0abab5;
  --aqua-g:  rgba(10,186,181,.30);

  color-scheme: dark;
}

@media (min-width: 769px) {
  :root { --nav-h: 62px; --cat-h: 48px; }
}

/* ─────────────────────────────────────────────
   MAVZULAR — har biri faqat fon/matn/chiziqlarni almashtiradi.
   Masthead hamma joyda qora qoladi (BBC imzosi).
───────────────────────────────────────────── */

/* — Yorug' oila — */
[data-theme="white"] {
  --bg:#ffffff; --bg-1:#fafbfb; --bg-2:#f4f5f6;
  --surf:#ffffff; --surf-1:#f6f7f8; --surf-2:#edeff1; --surf-hi:#e2e5e9;
  --rule:#e3e6ea; --rule-strong:#c9ced4;
  --bdr:rgba(0,0,0,.08); --bdr-1:rgba(0,0,0,.13); --bdr-2:rgba(0,0,0,.24); --bdr-cool:rgba(0,0,0,.07);
  --ink:#141619; --txt:#33383e; --muted:#6d747c; --dim:#a4aab1;
  --brand-hi:#a11212; --brand-dim:rgba(187,25,25,.10);
  --gold:#a4854a; --gold-hi:#8a6d38; --gold-dim:rgba(164,133,74,.14);
  --emerald-hi:#25755a;
  --sh-sm:0 1px 2px rgba(20,25,30,.10);
  --sh-md:0 4px 14px rgba(20,25,30,.12);
  --sh-lg:0 14px 44px rgba(20,25,30,.18);
  color-scheme: light;
}
[data-theme="silver"] {
  --bg:#ced2d8; --bg-1:#d5d9de; --bg-2:#dcdfe4;
  --surf:#e4e7eb; --surf-1:#eceef1; --surf-2:#f3f4f6; --surf-hi:#ffffff;
  --rule:#b4bac2; --rule-strong:#99a1ab;
  --bdr:rgba(30,38,48,.10); --bdr-1:rgba(30,38,48,.16); --bdr-2:rgba(30,38,48,.28); --bdr-cool:rgba(30,38,48,.08);
  --ink:#171b20; --txt:#363c44; --muted:#5f6772; --dim:#8d949e;
  --brand-hi:#9c1212; --brand-dim:rgba(187,25,25,.10);
  --gold:#96793f; --gold-hi:#7d6432; --gold-dim:rgba(150,121,63,.16);
  --emerald-hi:#227055;
  --sh-sm:0 1px 2px rgba(23,27,32,.12);
  --sh-md:0 4px 14px rgba(23,27,32,.14);
  --sh-lg:0 14px 44px rgba(23,27,32,.20);
  color-scheme: light;
}
[data-theme="tiffany"] {
  --bg:#eef8f6; --bg-1:#f3faf9; --bg-2:#f8fcfb;
  --surf:#ffffff; --surf-1:#f2f9f7; --surf-2:#e6f3f0; --surf-hi:#d9ece8;
  --rule:#d3e6e1; --rule-strong:#b2d3cc;
  --bdr:rgba(6,90,84,.10); --bdr-1:rgba(6,90,84,.16); --bdr-2:rgba(6,90,84,.26); --bdr-cool:rgba(6,90,84,.08);
  --ink:#0f2b27; --txt:#2c4a45; --muted:#5f7d77; --dim:#93aca7;
  --brand-hi:#a11212; --brand-dim:rgba(187,25,25,.10);
  --gold:#9d7e42; --gold-hi:#82672f; --gold-dim:rgba(157,126,66,.14);
  --emerald:#0a8a76; --emerald-hi:#067e6c;
  --sh-sm:0 1px 2px rgba(10,60,54,.10);
  --sh-md:0 4px 14px rgba(10,60,54,.12);
  --sh-lg:0 14px 44px rgba(10,60,54,.18);
  color-scheme: light;
}

/* — Qorong'i oila (rangli tuslar) — */
[data-theme="charcoal-violet"] {
  --bg:#16141c; --bg-1:#191720; --bg-2:#1d1b25;
  --surf:#201d29; --surf-1:#25222f; --surf-2:#2b2837; --surf-hi:#363247;
  --rule:#302c3d; --rule-strong:#443f55;
  --ink:#f4f2fa; --txt:#d3d0dd; --muted:#96919f; --dim:#615c6c;
}
[data-theme="cyber-silver"] {
  --bg:#111419; --bg-1:#14171d; --bg-2:#181c22;
  --surf:#1b1f26; --surf-1:#20252d; --surf-2:#262c35; --surf-hi:#313945;
  --rule:#2a3038; --rule-strong:#3c444f;
  --ink:#f2f6fa; --txt:#ccd4dc; --muted:#8d97a2; --dim:#5a636d;
}
[data-theme="luminous-moss"] {
  --bg:#121711; --bg-1:#151a14; --bg-2:#191f17;
  --surf:#1b221a; --surf-1:#20281e; --surf-2:#262f24; --surf-hi:#303c2d;
  --rule:#2a3428; --rule-strong:#3b4838;
  --ink:#f2f7ef; --txt:#d0dbcb; --muted:#91a08b; --dim:#5c6857;
  --emerald-hi:#66c194;
}
[data-theme="vulcanico"] {
  --bg:#191210; --bg-1:#1d1512; --bg-2:#221915;
  --surf:#241b17; --surf-1:#2a201b; --surf-2:#312620; --surf-hi:#3d2f27;
  --rule:#372a23; --rule-strong:#4b3a30;
  --ink:#faf3ee; --txt:#e0d3ca; --muted:#a4948a; --dim:#6d6058;
  --brand-hi:#ff7d5f;
}
[data-theme="notturno"] {
  --bg:#10131c; --bg-1:#131620; --bg-2:#171b26;
  --surf:#191d29; --surf-1:#1e2330; --surf-2:#242938; --surf-hi:#2f3547;
  --rule:#282e3d; --rule-strong:#3a4154;
  --ink:#f1f4fb; --txt:#ccd2e0; --muted:#8c94a8; --dim:#596177;
}
/* dark = :root standart */

/* ─────────────────────────────────────────────
   KATEGORIYA RANGLARI
   --cc (asosiy) · --cd (to'q juft) · --cg (nur)
   Ikonlar HAR DOIM cc→cd gradiyent chipda oq glif bilan
   turadi — shu sabab BARCHA mavzularda aniq ko'rinadi.
───────────────────────────────────────────── */
[data-cat], [data-side], [data-nav] { --cc:#0abab5; --cd:#067e7a; --cg:rgba(10,186,181,.30); }
[data-cat="all"],[data-side="all"],[data-nav="all"],.cov-all                            { --cc:#c9a96a; --cd:#7d6234; --cg:rgba(201,169,106,.30); }
[data-cat="tabanniy"],[data-side="tabanniy"],[data-nav="tabanniy"],.cov-tabanniy             { --cc:#0abab5; --cd:#056561; --cg:rgba(10,186,181,.30); }
[data-cat="nontabanniy"],[data-side="nontabanniy"],[data-nav="nontabanniy"],.cov-nontabanniy    { --cc:#6e7bdb; --cd:#343179; --cg:rgba(110,123,219,.30); }
[data-cat="quron-audio"],[data-side="quron-audio"],[data-nav="quron-audio"],.cov-quron-audio    { --cc:#57b06a; --cd:#2c5a38; --cg:rgba(126,201,138,.30); }
[data-cat="quron"],[data-side="quron"],[data-nav="quron"],.cov-quron                      { --cc:#57b06a; --cd:#2c5a38; --cg:rgba(126,201,138,.30); }
[data-cat="audio"],[data-side="audio"],[data-nav="audio"],.cov-audio                      { --cc:#8b6fd6; --cd:#42307e; --cg:rgba(139,111,214,.30); }
[data-cat="savol-javob"],[data-side="savol-javob"],[data-nav="savol-javob"],.cov-savol-javob    { --cc:#0abab5; --cd:#056561; --cg:rgba(10,186,181,.30); }
[data-cat="ar-roya"],[data-side="ar-roya"],[data-nav="ar-roya"],.cov-ar-roya                { --cc:#e0a458; --cd:#8c5218; --cg:rgba(224,164,88,.28); }
[data-cat="alvay"],[data-side="alvay"],[data-nav="alvay"],.cov-alvay                      { --cc:#d65a6e; --cd:#7c2635; --cg:rgba(214,90,110,.28); }
[data-cat="konstitutsiya"],[data-side="konstitutsiya"],[data-nav="konstitutsiya"]{ --cc:#8b98aa; --cd:#4a5566; --cg:rgba(168,180,196,.30); }
[data-cat="burana"],[data-side="burana"],[data-nav="burana"],.cov-burana                   { --cc:#e0925a; --cd:#8c4319; --cg:rgba(224,146,90,.28); }
[data-cat="najot"],[data-side="najot"],[data-nav="najot"],.cov-najot                      { --cc:#4fa7e0; --cd:#1a4f80; --cg:rgba(79,167,224,.30); }
[data-cat="hizb-uz"],[data-side="hizb-uz"],[data-nav="hizb-uz"],.cov-hizb-uz                { --cc:#3fae79; --cd:#1c5a3d; --cg:rgba(82,201,140,.28); }
[data-cat^="yt-"],[data-side^="yt-"],[data-nav^="yt-"]                         { --cc:#e0384e; --cd:#7e1626; --cg:rgba(226,60,80,.26); }