/* ==========================================================================
   01 · TOKENS — dizayn oʻzgaruvchilari (yorugʻ va tungi rejim)
   Bu fayl faqat qiymatlarni saqlaydi. Hech qanday selektor uslubi yoʻq.
   ========================================================================== */

:root {
  /* ---------- brend ranglari ---------- */
  --blue: #2f6fed;
  --blue-dk: #1c4bb3;
  --green: #16a37b;
  --green-dk: #0e7a5b;
  --amber: #f5a524;
  --amber-dk: #c07c0c;
  --pink: #f2597c;
  --violet: #7b61ff;
  --red: #e05252;

  /* ---------- yuzalar va matn ---------- */
  --bg: #f4f8ff;
  --bg-2: #eaf2fe;
  --surface: #ffffff;
  --surface-2: #f7faff;
  --ink: #1d2739;
  --ink-2: #56637a;
  --line: #dde6f5;

  /* ---------- soyalar ---------- */
  --shadow: 0 10px 30px rgba(29, 51, 99, 0.08);
  --shadow-lg: 0 22px 50px rgba(29, 51, 99, 0.14);
  --hi: rgba(255, 255, 255, 0.85);          /* yuqori qirradagi yorugʻlik */
  --elev-1:
    0 0 0 1px rgba(23, 43, 84, 0.04),
    0 1px 0 0 var(--hi) inset,
    0 2px 4px -1px rgba(23, 43, 84, 0.06),
    0 12px 28px -10px rgba(23, 43, 84, 0.16);
  --elev-2:
    0 0 0 1px rgba(23, 43, 84, 0.05),
    0 1px 0 0 var(--hi) inset,
    0 6px 14px -6px rgba(23, 43, 84, 0.12),
    0 28px 56px -20px rgba(23, 43, 84, 0.26);
  --elev-hover:
    0 0 0 1px rgba(47, 111, 237, 0.16),
    0 1px 0 0 var(--hi) inset,
    0 10px 20px -8px rgba(23, 43, 84, 0.14),
    0 34px 64px -22px rgba(47, 111, 237, 0.32);
  --ring: 0 0 0 3px color-mix(in srgb, var(--blue) 32%, transparent);

  /* ---------- gradientlar ---------- */
  --grad-brand: linear-gradient(135deg, var(--blue), var(--violet) 62%, var(--pink));
  --grad-gold: linear-gradient(135deg, #ffd166, var(--amber) 55%, #ff8f3c);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 42%);
  --glass: color-mix(in srgb, var(--surface) 72%, transparent);

  /* ---------- koʻrgazmali grafikalar ---------- */
  --viz-fill: #2f6fed;
  --viz-fill-2: #f5a524;
  --viz-empty: #e9eff9;
  --viz-stroke: #b9c8e4;

  /* ---------- KASR komponenti ---------- */
  --frac-bar: currentColor;        /* kasr chizigʻi rangi */
  --frac-num: var(--blue);         /* surat (rangli variant) */
  --frac-den: var(--green);        /* maxraj (rangli variant) */
  --frac-size: 0.78em;             /* surat/maxraj oʻlchami (asosiy matnga nisbatan) */
  --frac-bar-w: 0.085em;           /* chiziq qalinligi */

  /* ---------- oʻlchamlar ---------- */
  --topbar-h: 68px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --ease: cubic-bezier(.22, .8, .28, 1);
  --font: "Segoe UI", system-ui, -apple-system, "Roboto", "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   TUNGI REJIM
   ========================================================================== */
html[data-theme="dark"] {
  --bg: #0b0f1a;
  --bg-2: #121828;
  --surface: #161d2e;
  --surface-2: #1e2739;
  --ink: #eaf0fd;
  --ink-2: #9db0d0;
  --line: #2a3550;

  --blue: #6d9bff;
  --green: #2cc294;
  --amber: #ffbc4a;

  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 22px 50px rgba(0, 0, 0, 0.5);

  /* Grafikalar tungi fonda ham yorqin koʻrinsin (ilgari faqat fon oʻzgarardi) */
  --viz-fill: #5c8dff;
  --viz-fill-2: #ffbc4a;
  --viz-empty: #2b364d;
  --viz-stroke: #46557a;

  --frac-num: #8fb4ff;
  --frac-den: #55dcae;

  --hi: rgba(255, 255, 255, 0.07);
  --elev-1:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 1px 0 0 var(--hi) inset,
    0 2px 6px -1px rgba(0, 0, 0, 0.5),
    0 14px 30px -12px rgba(0, 0, 0, 0.65);
  --elev-2:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 1px 0 0 var(--hi) inset,
    0 8px 18px -8px rgba(0, 0, 0, 0.6),
    0 32px 60px -22px rgba(0, 0, 0, 0.8);
  --elev-hover:
    0 0 0 1px color-mix(in srgb, var(--blue) 38%, transparent),
    0 1px 0 0 var(--hi) inset,
    0 12px 24px -10px rgba(0, 0, 0, 0.6),
    0 36px 70px -24px color-mix(in srgb, var(--blue) 42%, transparent);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 42%);
  --glass: color-mix(in srgb, var(--surface) 66%, transparent);
}