/* «Sukunat» dizayn tili — docs/superpowers/specs/2026-09-07-yangi-sukunat-dizayn-tili-design.md §2.
   Rang faqat shu faylda. Komponentga hex yozilmaydi (test buni tekshiradi).
   Faol holat — har doim --accent; boshqa joyda accent ishlatilmaydi. */

/* Kontrast qiymatlari o'lchangan, taxmin qilinmagan (WCAG 2.1):
   matn 4.5:1, bosiladigan element chegarasi 3:1. Testda tekshiriladi —
   `tools/test-next-yangi-foundation.mjs` har rolni hisoblab ko'radi. */
[data-theme="light"], :root {
  color-scheme: light;
  --canvas: #ffffff;
  --canvas-raised: #f6f6f6;
  --text-primary: #141414;      /* 18.4:1 */
  --text-body: #262626;         /* 15.1:1 */
  --text-secondary: #585858;    /* 7.1:1  */
  --text-tertiary: #757575;     /* 4.6:1 — eng och matn, shundan pastga tushilmaydi */
  --border-subtle: #e6e6e6;     /* ajratish chizig'i, matn emas */
  --border-strong: #7d919e;     /* 3.3:1 — bosiladigan element chegarasi, ko'kimtir */
  --accent: #0a7fae;            /* 4.5:1 — havola matni sifatida ham ishlatiladi */
  --text-on-accent: #ffffff;
  --accent-soft: #e6f4fa;
  --button: #141414;
  --text-on-button: #ffffff;
  --success: #1f7a4d;
  --warning: #9a6200;
  --danger: #c0392b;
  --info: #078fc4;
  --focus-ring: #078fc4;
  --shadow-float: 0 6px 24px rgba(0, 0, 0, .06);
  /* Ko'tarilgan yuza: ikonka konteyneri va bosh sahifadagi blok. Ikki qavat —
     birinchisi (1px) chekkani chizadi, ikkinchisi (3px) yuzani fondan uzadi.
     Chegara o'rniga ishlatiladi: chiziq qo'shsak yana «karta» bo'lib qolardi. */
  --shadow-raised: 0 1px 2px rgba(20, 20, 20, .05), 0 3px 10px rgba(20, 20, 20, .05);
  --shadow-raised-hover: 0 2px 4px rgba(20, 20, 20, .06), 0 8px 20px rgba(20, 20, 20, .07);
  --backdrop: rgba(20, 20, 20, .32);
  --image-opacity: 1;
  /* Sticky panel foni: matn to'liq o'qiladigan darajada qalin, lekin
     ostidan o'tayotgan kontent harakati sezilib turadi. */
  --panel-veil: rgba(255, 255, 255, .82);
  /* Brend belgisi — rang fayl ichida, shu sababli tema bo'yicha fayl almashadi.
     Manba: next/yangi/brand/pediatriccare/qur.mjs */
  --brand-mark: url(/yangi/brand/pediatriccare/pediatriccare-belgi-rangli.svg);
}

/* Temaga bog'liq bo'lmagan tokenlar: shakl, o'lcham, shrift. */
:root {
  --radius-control: 12px;
  --radius-card: 14px;
  --radius-panel: 14px;
  --radius-pill: 999px;
  --content-width: 1040px;
  --reading-width: 640px;
  --search-width: 680px;
  --header-height: 80px;
  --bottom-nav-height: 58px;
  --font-sans: Onest, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, "Courier New", monospace;

  /* Ko'chish davri aliaslari. Eski sahifalar shu nomlarni ishlatadi; var()
     orqali har temada o'zi yechiladi. Sahifa yangi tilga o'tgach undan
     foydalanmaydi va oxirida o'chiriladi. */
  --surface-structural: var(--canvas);
  --surface-interactive: var(--canvas);
  --surface-hover: var(--canvas-raised);
  --surface-selected: var(--accent-soft);
  --accent-strong: var(--accent);
  --accent-secondary: var(--accent);
  --shadow-card: none;
}

[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0f1011;
  --canvas-raised: #1a1b1d;
  --text-primary: #f2f2f2;      /* 17.0:1 */
  --text-body: #d6d6d6;         /* 13.1:1 */
  --text-secondary: #b4b4b4;    /* 9.2:1  */
  --text-tertiary: #8f8f8f;     /* 5.9:1  */
  --border-subtle: #282a2c;
  --border-strong: #69777e;     /* 4.1:1 — bosiladigan chegara, ko'kimtir */
  --accent: #5ec8ee;            /* 10.0:1 */
  --text-on-accent: #0f1011;
  --accent-soft: #10303c;
  --button: #f2f2f2;
  --text-on-button: #111111;
  --success: #5fc78f;
  --warning: #e0a83a;
  --danger: #ef7b7b;
  --info: #5ec8ee;
  --focus-ring: #5ec8ee;
  --shadow-float: 0 6px 24px rgba(0, 0, 0, .55);
  /* Qorong'ida soya fondan ajratmaydi — u allaqachon qora. Shuning uchun
     chuqurlik `--canvas-raised` ning ochroq bo'lishidan keladi, soya esa
     faqat chekkani biroz cho'ktiradi. */
  --shadow-raised: 0 1px 2px rgba(0, 0, 0, .5), 0 3px 12px rgba(0, 0, 0, .3);
  --shadow-raised-hover: 0 2px 4px rgba(0, 0, 0, .55), 0 8px 22px rgba(0, 0, 0, .38);
  --backdrop: rgba(0, 0, 0, .6);
  --image-opacity: .9;
  --panel-veil: rgba(15, 16, 17, .82);
  /* To'q yashil qora fonda 2.6:1 — tungi variantda kichik barg ochroq. */
  --brand-mark: url(/yangi/brand/pediatriccare/pediatriccare-belgi-tungi.svg);
}

/* Kitob o'quvchisi (Task 10): sepiya — sayt temasidan mustaqil uchinchi to'plam.
   Faqat o'quvchi subtree'sida. */
[data-reader-theme="sepia"] {
  color-scheme: light;
  --canvas: #f3ead6;
  --canvas-raised: #eadfc5;
  --text-primary: #43321c;
  --text-body: #4f3d26;
  --text-secondary: #6d5738;  /* 5.7:1 */
  --text-tertiary: #7a6446;   /* 4.7:1 — iliq fon och matnni yutadi, to'qroq kerak */
  --border-subtle: #e0d3b4;
  --border-strong: #917c50;   /* 3.2:1 — bosiladigan chegara */
  --accent: #8a5a12;
  --text-on-accent: #fbf5e8;
  --accent-soft: #eadcbc;
  --button: #43321c;
  --text-on-button: #fbf5e8;
  --success: #4f7a2a;
  --warning: #a35e0a;
  --danger: #a8403c;
  --info: #4b6b8f;
  --focus-ring: #8a5a12;
  --shadow-float: 0 6px 24px rgba(84, 60, 20, .16);
  --shadow-raised: 0 1px 2px rgba(84, 60, 20, .07), 0 3px 10px rgba(84, 60, 20, .07);
  --shadow-raised-hover: 0 2px 4px rgba(84, 60, 20, .09), 0 8px 20px rgba(84, 60, 20, .1);
  --panel-veil: rgba(243, 234, 214, .84);
  --image-opacity: 1;
}

* { box-sizing: border-box; }
html { background: var(--canvas); }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text-primary);
  background: var(--canvas);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
img { max-width: 100%; height: auto; opacity: var(--image-opacity); }
::selection { background: var(--accent-soft); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  :root { --header-height: 52px; }
}