/* =====================================================================
   01. tokens.css — dizayn tizimi
   Manba: design.md (Apple-design-analysis). Farqlar:
     • primary koʻk (#0066cc) oʻrniga YASHIL
     • oʻquvchilar uchun: muted matn sal quyuqroq, uppercase kam
   Qoidalar: bitta interaktiv rang, dekorativ gradient yoʻq,
   karta/tugma/matnda soya yoʻq, radius 5/8/11/18/pill.
   ===================================================================== */

:root {

  /* ---------- Aksent — yagona «bosish mumkin» rangi ---------- */
  --primary:         #0a7d3f;   /* Action Green  (design: primary) */
  --primary-focus:   #0d9048;   /* fokus halqasi (design: primary-focus) */
  --primary-on-dark: #5fd58a;   /* qorongʻi plitkada havola (design: primary-on-dark) */
  --primary-soft:    #e6f3eb;   /* tanlangan holat, badge foni */
  --primary-ink:     #085f30;   /* yashil fondagi matn */
  --on-primary:      #ffffff;

  /* ---------- Siyoh (matn) ---------- */
  --ink:             #1d1d1f;
  --ink-muted-80:    #333333;
  --ink-muted-48:    #6e6e73;   /* design: #7a7a7a — oʻqilishi uchun quyuqroq */
  --body-on-dark:    #ffffff;
  --body-muted-dark: #cccccc;

  /* ---------- Yuzalar ---------- */
  --canvas:     #ffffff;
  --parchment:  #f5f5f7;
  --pearl:      #fafafc;
  --tile-1:     #272729;
  --tile-2:     #2a2a2c;
  --tile-3:     #252527;
  --black:      #000000;
  --chip:       #d2d2d7;

  /* ---------- Chiziqlar ---------- */
  --hairline:        rgba(0, 0, 0, .08);
  --hairline-strong: rgba(0, 0, 0, .16);
  --divider-soft:    #f0f0f0;

  /* ---------- Holat ranglari (forma/test — design.md da yoʻq) ---------- */
  --danger:       #c0392b;
  --danger-soft:  #fdeceb;
  --danger-line:  #f0c2bb;
  --warning:      #a86c0c;
  --warning-soft: #fbf1d8;

  /* =====================================================================
     Semantik nomlar — komponent fayllari shularni ishlatadi
     ===================================================================== */
  --bg:          var(--canvas);
  --bg-elev:     var(--canvas);
  --bg-sunk:     var(--parchment);
  --bg-invert:   var(--tile-1);

  --text:        var(--ink);
  --text-muted:  #515154;
  --text-subtle: var(--ink-muted-48);
  --text-invert: var(--body-on-dark);

  --border:        var(--hairline);
  --border-strong: var(--hairline-strong);

  --brand:       var(--primary);
  --brand-hover: var(--primary-focus);
  --brand-soft:  var(--primary-soft);
  --success:     var(--primary);
  --success-soft:var(--primary-soft);
  --white:       #ffffff;

  /* ---------- Aksent yordamchilari (accent-* klasslari qayta belgilaydi) ---------- */
  --accent:      var(--primary);
  --accent-soft: var(--primary-soft);
  --accent-ink:  var(--primary-ink);

  /* =====================================================================
     Eski palitra nomlari — admin.css va inline stillar uchun.
     Koʻk (sky) → MINT yashil. Qolganlari yumshoq pastel — faqat ikonka
     fonlari va kategoriya belgilari uchun, hech qachon tugma/havola uchun.
     ===================================================================== */
  --green-50:  #f0f8f3;  --green-100: #e6f3eb;  --green-200: #c5e5d1;
  --green-300: #94d0aa;  --green-400: #5fd58a;  --green-500: #1e9a52;
  --green-600: #0a7d3f;  --green-700: #0d6b37;  --green-800: #085f30;
  --green-900: #063f21;

  --sky-100: #e2f4ee;  --sky-500: #1d9a6c;  --sky-700: #0f5c40;      /* mint */
  --sun-100: #fbf1d8;  --sun-500: #c98a0e;  --sun-700: #7a520a;
  --coral-100: #fbe7df; --coral-500: #d9603a; --coral-700: #8a3a1f;
  --violet-100: #ece8fa; --violet-500: #7a5fcf; --violet-700: #4b3a8a;

  --ink-900: var(--ink);        --ink-800: var(--tile-1);   --ink-700: #3a3a3c;
  --ink-600: #515154;           --ink-500: #6e6e73;         --ink-400: #86868b;
  --ink-300: #aeaeb2;           --ink-200: #d2d2d7;         --ink-100: #e8e8ed;
  --ink-050: var(--parchment);

  /* =====================================================================
     Tipografiya — design.md: SF Pro → Inter (cv11 = yumaloq «a», bolalar uchun)
     ===================================================================== */
  --font-body:    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-body);
  --font-ui:      var(--font-body);
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:   12px;                                  /* fine-print */
  --fs-sm:   14px;                                  /* caption */
  --fs-base: 15px;                                  /* karta ichidagi matn */
  --fs-md:   17px;                                  /* body */
  --fs-lg:   21px;                                  /* tagline */
  --fs-xl:   clamp(21px, 1.2vw + 16px, 24px);       /* h3 */
  --fs-2xl:  28px;                                  /* lead / kichik h2 */
  --fs-3xl:  clamp(28px, 2.2vw + 20px, 40px);       /* display-lg */
  --fs-4xl:  clamp(34px, 3.4vw + 20px, 56px);       /* hero-display */

  --lh-tight: 1.1;
  --lh-snug:  1.24;
  --lh-base:  1.47;

  --ls-body:    -0.022em;   /* -0.374px @17px */
  --ls-display: -0.015em;

  /* ---------- Oraliqlar (8px asos) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 80px;

  --section-y: clamp(48px, 7vw, 80px);
  --gutter:    clamp(16px, 4vw, 32px);
  --container: 1200px;

  /* ---------- Radiuslar ---------- */
  --r-xs:   5px;
  --r-sm:   8px;
  --r-md:   11px;
  --r-lg:   18px;
  --r-xl:   18px;
  --r-full: 9999px;

  /* ---------- Soyalar: karta/tugma/matnda YOʻQ ---------- */
  --sh-xs: none;
  --sh-sm: none;
  --sh-md: none;
  --sh-lg: none;
  --sh-product: rgba(0, 0, 0, .22) 3px 5px 30px 0;   /* faqat mahsulot tasviri uchun */

  /* ---------- Harakat ---------- */
  --ease:   cubic-bezier(.22, .61, .36, 1);
  --t-fast: 140ms var(--ease);
  --t-base: 220ms var(--ease);
  --t-slow: 420ms var(--ease);

  --header-h: 64px;
  --z-header: 100;
  --z-modal:  200;
}

/* ---------- Kategoriya tuslari — dekorativ (ikonka foni, belgi), interaktiv emas ---------- */
.accent-green  { --accent: var(--green-600);  --accent-soft: var(--green-100);  --accent-ink: var(--green-800); }
.accent-sky    { --accent: var(--sky-500);    --accent-soft: var(--sky-100);    --accent-ink: var(--sky-700); }
.accent-sun    { --accent: var(--sun-500);    --accent-soft: var(--sun-100);    --accent-ink: var(--sun-700); }
.accent-coral  { --accent: var(--coral-500);  --accent-soft: var(--coral-100);  --accent-ink: var(--coral-700); }
.accent-violet { --accent: var(--violet-500); --accent-soft: var(--violet-100); --accent-ink: var(--violet-700); }