/* ==========================================================================
   ASL STIRKA — Design tokens
   Brend ranglari logotipdan olingan: to'q ko'k #001528 va yashil #76B82A.
   Shriftlar faqat ikkita: sarlavhalar — Montserrat, matn — Onest.
   Breakpointlar: telefon ≤767px · planshet 768–1199px · desktop ≥1200px.
   ========================================================================== */

:root {
  /* ---------- Colors ---------- */
  --c-navy-900: #001528;   /* brand ink */
  --c-navy-700: #163556;

  --c-green-300: #b5e07c;
  --c-green-400: #92cf47;
  --c-green-500: #76b82a;  /* brand accent */
  --c-green-600: #5f9a1e;
  --c-green-700: #3f6f10;  /* accessible green text on light bg */
  --c-green-50:  #f1f8e8;

  --c-sky-50: #eaf4fc;     /* hero photo wall */

  --c-slate-600: #4a5a6c;
  --c-slate-500: #5d6d7f;
  --c-slate-300: #c3cdd8;
  --c-line:      #e1e7ee;
  --c-line-dark: rgba(255, 255, 255, .12);

  --c-bg:      #f6f8f3;
  --c-surface: #ffffff;
  --c-text:    var(--c-navy-900);
  --c-muted:   var(--c-slate-500);
  --c-error:   #d23c3c;

  /* ---------- Typography ---------- */
  --font-display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-body: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-xs:   .8125rem;  /* 13 */
  --fs-sm:   .9375rem;  /* 15 */
  --fs-base: 1.0625rem; /* 17 */
  --fs-md:   1.1875rem; /* 19 */
  --fs-lg:   clamp(1.125rem, 1rem + .5vw, 1.375rem);
  --fs-h3:   clamp(1.0625rem, .98rem + .35vw, 1.25rem);
  --fs-h2:   clamp(1.625rem, 1.2rem + 1.9vw, 2.75rem);
  --fs-h1:   clamp(1.5rem, .95rem + 2.3vw, 2.875rem);

  --lh-tight: 1.12;
  --lh-base:  1.6;

  /* ---------- Spacing & layout ---------- */
  --container: 1240px;
  --gutter: clamp(16px, 4vw, 32px);
  --section-y: clamp(64px, 8vw, 120px);
  --header-h: 72px;
  --tabbar-h: 62px;
  --card-pad: 28px;                       /* kartochkalar ichki bo'shlig'i */
  --panel-pad: clamp(24px, 5vw, 56px);    /* katta panellar (forma, sog'liq, chegirma) */

  /* ---------- Shape ---------- */
  --radius-sm: 12px;
  --radius:    18px;
  --radius-lg: 26px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  /* ---------- Elevation (navy-tinted) ---------- */
  --shadow-sm: 0 2px 8px rgba(0, 21, 40, .06), 0 1px 2px rgba(0, 21, 40, .04);
  --shadow:    0 12px 32px -12px rgba(0, 21, 40, .18), 0 2px 6px rgba(0, 21, 40, .05);
  --shadow-lg: 0 30px 60px -20px rgba(0, 21, 40, .28), 0 8px 20px -8px rgba(0, 21, 40, .12);
  --ring: 0 0 0 4px rgba(118, 184, 42, .35);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: .18s;
  --dur: .32s;
  --dur-slow: .7s;

  /* ---------- Logo motifs ---------- */
  /* Gilam "popuk" (fringe) — qorong'i bloklar cheti */
  --fringe-size: 22px;
  --fringe-h: 10px;

  /* O'zbekiston bayrog'i — telefon maydonlari uchun */
  --flag-uz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect width='24' height='16' rx='2.5' fill='%23fff'/%3E%3Cpath fill='%230099b5' d='M2.5 0h19A2.5 2.5 0 0 1 24 2.5V5.1H0V2.5A2.5 2.5 0 0 1 2.5 0z'/%3E%3Cpath fill='%231eb53a' d='M0 10.9h24v2.6a2.5 2.5 0 0 1-2.5 2.5h-19A2.5 2.5 0 0 1 0 13.5z'/%3E%3Cpath fill='%23ce1126' d='M0 5.1h24v.6H0zm0 4.7h24v.6H0z'/%3E%3Ccircle cx='3.9' cy='2.6' r='1.6' fill='%23fff'/%3E%3Ccircle cx='4.5' cy='2.6' r='1.35' fill='%230099b5'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='7' cy='1.6' r='.4'/%3E%3Ccircle cx='8.4' cy='1.6' r='.4'/%3E%3Ccircle cx='9.8' cy='1.6' r='.4'/%3E%3Ccircle cx='7' cy='3.1' r='.4'/%3E%3Ccircle cx='8.4' cy='3.1' r='.4'/%3E%3Ccircle cx='9.8' cy='3.1' r='.4'/%3E%3C/g%3E%3Crect x='.25' y='.25' width='23.5' height='15.5' rx='2.3' fill='none' stroke='%23001528' stroke-opacity='.14' stroke-width='.5'/%3E%3C/svg%3E");

  --z-header: 50;
  --z-bar: 60;
}

/* Telefon: ixcham, iOS ilovalaridagi kabi tipografiya va bo'shliqlar */
@media (max-width: 767px) {
  :root {
    --fs-xs:   .78125rem;  /* 12.5 */
    --fs-sm:   .875rem;    /* 14 */
    --fs-base: 1rem;       /* 16 — inputlarda iOS zoom bo'lmasligi uchun 16px dan kichik emas */
    --fs-md:   1rem;
    --fs-lg:   1.0625rem;  /* 17 */
    --fs-h3:   1rem;
    --fs-h2:   1.375rem;   /* 22 */
    --fs-h1:   clamp(1.375rem, .9rem + 2.2vw, 1.75rem);

    --section-y: 44px;
    --gutter: 16px;
    --header-h: 58px;
    --card-pad: 18px;
    --panel-pad: 20px;

    --radius:    16px;
    --radius-lg: 20px;
    --radius-xl: 26px;
  }
}

@media (min-width: 1024px) {
  :root { --header-h: 84px; }
}