/* TestUp dizayn tizimi — yagona manba.
   Bu faylni src/tokens.css sifatida qo'ying va src/index.css dagi
   barcha eski rang/shrift/radius e'lonlarini O'CHIRIB, faqat shunga tayaning. */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..600&family=Manrope:wght@400..800&display=swap');

:root {
  /* Sirtlar — och qog'oz. Sof oq (#fff) ISHLATILMAYDI: yaltiraydi. */
  --paper:        #FCFAF5;  /* sahifa foni */
  --surface:      #F4F1E9;  /* ikkilamchi sirt, chip, bo'sh holat */
  --card:         #FFFDF9;  /* karta foni */
  --track:        #EFEBE2;  /* progress bar bo'sh qismi */

  /* Matn */
  --ink:          #1E2547;  /* sarlavha, asosiy matn, kuchli urg'u */
  --muted:        #5A5F76;  /* tavsif matni */
  --label:        #6F6B5E;  /* UPPERCASE yorliq (kontrast 4.6) */

  /* Harakat — FAQAT harakat uchun: asosiy tugma, to'g'ri javob, faol holat.
     Hech qachon katta fon, hech qachon bezak. */
  --action:       #0E7C5A;
  --action-soft:  rgba(14,124,90,.10);
  --action-dark:  #12B583;  /* faqat to'q siyoh blok ustida */

  /* Diqqat talab qiladi (past ball, takrorlash kerak). Xato = qizil emas. */
  --gold:         #B8923E;

  /* To'q siyoh blok — butun saytda FAQAT Domla Boyqush uchun */
  --night:        #1E2547;
  --night-text:   #FCFAF5;
  --night-muted:  #B6BCD4;
  --night-dim:    #8A93B4;
  --night-fill:   rgba(255,255,255,.07);
  --night-line:   rgba(255,255,255,.10);

  /* Chiziq va soya — bittadan, boshqasi yo'q */
  --hairline:     1px solid rgba(30,37,71,.07);
  --hairline-str: 1px solid rgba(30,37,71,.11);  /* ikkilamchi tugma chegarasi */
  --shadow:       0 1px 2px rgba(30,37,71,.04), 0 8px 22px rgba(30,37,71,.05);

  /* Radius — faqat shu to'rttasi */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Shrift — faqat ikkita oila.
     Unbounded, Zilla Slab, Cinzel BUTUNLAY o'chiriladi
     (Cinzel o'zbek 'okinasini yoza olmaydi). */
  --font-display: 'EB Garamond', Georgia, serif;
  --font-ui:      'Manrope', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a       { color: var(--action); text-decoration: none; }
a:hover { color: #0a5f45; }

/* ── Tipografiya: 6 pog'ona, boshqasi yo'q ───────────────────── */
.t-hero    { font-family: var(--font-display); font-weight: 600; font-size: clamp(36px, 6vw, 76px); line-height: 1.03; color: var(--ink); }
.t-title   { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 4vw, 60px); line-height: 1.04; color: var(--ink); }
.t-section { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.15; color: var(--ink); }
.t-card    { font: 800 15px var(--font-ui); color: var(--ink); }
.t-body    { font: 400 15px/1.68 var(--font-ui); color: var(--muted); text-wrap: pretty; }
.t-help    { font: 700 12.5px var(--font-ui); color: var(--muted); }
.t-label   { font: 700 11.5px var(--font-ui); letter-spacing: .13em; text-transform: uppercase; color: var(--label); }

/* Savol matni serifda — uzoq o'qishga qulay */
.t-question { font-family: var(--font-display); font-weight: 500; font-size: clamp(23px, 2.4vw, 32px); line-height: 1.33; color: var(--ink); }

/* Har qanday raqam — tabular */
.num, [class*="ball"], [class*="score"] { font-variant-numeric: tabular-nums; }

/* ── Karta ───────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: var(--hairline);
  border-radius: var(--r-lg);
  padding: 24px;
}
.card--raised  { box-shadow: var(--shadow); }
.card--primary { border: 1.5px solid var(--action); box-shadow: var(--shadow); }

/* ── Tugma. Bir ekranda BITTA .btn--primary. ─────────────────── */
.btn {
  display: grid; place-items: center;
  min-height: 48px; padding: 0 26px;
  border-radius: var(--r-pill);
  font: 800 15px var(--font-ui);
  white-space: nowrap; cursor: pointer; border: none;
  transition: background .15s ease, border-color .15s ease;
}
.btn--primary   { background: var(--action); color: #fff; }
.btn--primary:hover { background: #0a5f45; }
.btn--secondary { background: transparent; color: var(--ink); border: var(--hairline-str); }
.btn--secondary:hover { border-color: rgba(30,37,71,.22); }
.btn--block     { width: 100%; }

/* ── Chip ────────────────────────────────────────────────────── */
.chip        { font: 700 11.5px var(--font-ui); color: var(--muted); background: var(--surface); border-radius: var(--r-pill); padding: 7px 13px; }
.chip--good  { color: var(--action); background: var(--action-soft); }

/* ── Progress ────────────────────────────────────────────────── */
.bar      { height: 6px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; }
.bar > i  { display: block; height: 100%; background: var(--action); }
.bar--warn > i { background: var(--gold); }   /* takrorlash kerak */

/* ── Javob varianti ──────────────────────────────────────────── */
.opt            { background: var(--card); border: var(--hairline-str); border-radius: var(--r-md); padding: 16px 18px; display: flex; gap: 14px; align-items: center; min-height: 56px; font: 700 15px var(--font-ui); color: var(--ink); cursor: pointer; }
.opt[data-state="selected"] { border: 1.5px solid var(--ink); font-weight: 800; }
.opt[data-state="correct"]  { border: 1.5px solid var(--action); background: var(--action-soft); color: var(--action); font-weight: 800; }

/* ── To'q siyoh blok — FAQAT Domla Boyqush ───────────────────── */
.night           { background: var(--night); border-radius: 20px; padding: 34px 36px; color: var(--night-text); }
.night .t-body   { color: var(--night-muted); }
.night .t-label  { color: #5FD3A6; }
.night .chip     { color: var(--night-muted); background: var(--night-fill); }
.night .btn--primary { background: var(--action-dark); color: #0A1024; }

/* ── Mobil ───────────────────────────────────────────────────── */
.tabbar {
  position: sticky; bottom: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: var(--hairline);
  background: var(--paper);
  padding: 8px 4px calc(14px + env(safe-area-inset-bottom));
}
.tabbar a         { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 7px 0; min-height: 48px; font: 700 11.5px var(--font-ui); color: var(--label); }
.tabbar a[aria-current="page"] { font-weight: 800; color: var(--action); }

/* Mobilda pastki sticky harakat paneli (test ekrani) */
.actionbar {
  position: sticky; bottom: 0;
  display: flex; gap: 10px; align-items: center;
  padding: 14px 18px calc(20px + env(safe-area-inset-bottom));
  border-top: var(--hairline);
  background: var(--paper);
}

/* ── Guruhlar doim flex/grid + gap (margin bilan emas) ───────── */
.row   { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .grid2 { grid-template-columns: 1fr; } }

/* Telefonda `.t-help` ko'pincha HAVOLA sifatida ishlatiladi («← Ingliz tili»,
   «Boshlash →», «Imtihon tartibi va qoidalari») va balandligi atigi 17px
   bo'lardi — barmoq uchun 44px tavsiya etiladi. Matn o'lchami o'zgarmaydi,
   faqat teginish maydoni kengayadi. */
@media (max-width: 640px) {
  a.t-help, button.t-help {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 2px;
  }
}