/* Banana.az — dizayn tokenləri (dizayn maketlərindən çıxarılıb)
   Bütün yeni Blade view-larda bu dəyişənlərdən istifadə edin. */

/* Şriftlər layout.blade.php-də <link> ilə yüklənir (Roboto + Montserrat). */

:root {
  /* Rənglər */
  --bn-yellow: #FFD100;        /* primary: header, əsas düymələr, aktiv tab, badge */
  --bn-yellow-dark: #F2B705;   /* hover/pressed, sarı elementlərin border-i, focus ring */
  --bn-yellow-tint: #FFF6CC;   /* yumşaq bölmə fonu, VIP bölməsi, seçilmiş chip */
  --bn-navy: #1B1F3B;          /* başlıqlar, qiymətlər, sarı üzərində mətn, footer */
  --bn-navy-deep: #12152B;     /* moderator sidebar, VIP/editorial bloklar */
  --bn-text-2: #6B7280;        /* meta, köməkçi mətn */
  --bn-line: #E5E7EB;          /* border, ayırıcı */
  --bn-surface: #F5F6F8;       /* səhifə fonu, şəkil placeholder fonu */
  --bn-white: #FFFFFF;
  --bn-red: #E53935;           /* endirim badge, endirimli qiymət, xəta */
  --bn-red-text: #C62828;      /* kiçik qırmızı mətn (kontrast) */
  --bn-red-tint: #FDECEC;
  --bn-green: #16A34A;         /* ikonlar, doğrulanmış nişan */
  --bn-green-text: #15803D;    /* kiçik yaşıl mətn: taksit, "stokda var", çatdırılma */
  --bn-green-tint: #DCFCE7;    /* taksit pill fonu */
  --bn-overlay: rgba(27, 31, 59, 0.55); /* modal arxa fonu */

  /* Qayda: sarı fonda mətn HƏMİŞƏ --bn-navy-dir, heç vaxt ağ deyil. */

  /* Şriftlər */
  --bn-font-body: Roboto, system-ui, sans-serif;
  --bn-font-display: Montserrat, Roboto, sans-serif; /* H1/H2, böyük qiymətlər, böyük rəqəmlər, loqo */

  /* Tipoqrafiya ölçüləri */
  --bn-h1-desktop: 44px;   /* 800–900 */
  --bn-h2-desktop: 32px;   /* 800, letter-spacing -0.5px */
  --bn-h2-mobile: 20px;    /* 800 */
  --bn-card-title: 14px;   /* 500, 2 sətir clamp */
  --bn-body: 15px;
  --bn-meta: 12px;
  --bn-price: 20px;        /* 900, display font */

  /* Radius */
  --bn-r-sm: 10px;    /* input */
  --bn-r-btn: 12px;   /* düymə */
  --bn-r-img: 14px;   /* kart içi şəkil */
  --bn-r-card: 20px;  /* kart */
  --bn-r-panel: 28px; /* böyük banner/bölmə */
  --bn-r-pill: 999px; /* badge, chip */

  /* Aralıq (8-pt) */
  --bn-s1: 4px; --bn-s2: 8px; --bn-s3: 12px; --bn-s4: 16px; --bn-s5: 24px; --bn-s6: 32px; --bn-s7: 48px; --bn-s8: 56px;

  /* Kölgə */
  --bn-shadow-card: 0 1px 2px rgba(27,31,59,0.04), 0 8px 24px rgba(27,31,59,0.06);
  --bn-shadow-pop: 0 24px 64px rgba(27,31,59,0.35);
  --bn-focus: 0 0 0 3px rgba(242,183,5,0.45);

  /* Layout */
  --bn-container: 1312px;   /* 1440 - 2×64 */
  --bn-gutter-desktop: 64px;
  --bn-gutter-mobile: 16px;
  --bn-header-h: 160px;     /* topbar 36 + əsas sətir 76 + subnav 48 */
  --bn-tabbar-h: 68px;
}

/* Qısa utility nümunələri (istəyə görə) */
.bn-card { background: var(--bn-white); border-radius: var(--bn-r-card); box-shadow: var(--bn-shadow-card); }
.bn-btn { height: 48px; padding: 0 24px; border: 0; border-radius: var(--bn-r-btn); font: 700 15px var(--bn-font-body); display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.bn-btn--primary { background: var(--bn-yellow); color: var(--bn-navy); }
.bn-btn--primary:hover { background: var(--bn-yellow-dark); }
.bn-btn--dark { background: var(--bn-navy); color: var(--bn-yellow); }
.bn-btn--outline { background: var(--bn-white); color: var(--bn-navy); border: 1.5px solid var(--bn-navy); }
.bn-btn--danger { background: var(--bn-red); color: var(--bn-white); }
.bn-input { height: 48px; border: 1px solid var(--bn-line); border-radius: var(--bn-r-sm); padding: 0 14px; font: 400 15px var(--bn-font-body); color: var(--bn-navy); background: var(--bn-white); }
.bn-input:focus { outline: 0; border-color: var(--bn-yellow-dark); box-shadow: var(--bn-focus); }
.bn-pill { height: 22px; padding: 0 8px; border-radius: var(--bn-r-pill); font: 700 12px var(--bn-font-body); display: inline-flex; align-items: center; gap: 4px; }
.bn-pill--sale { background: var(--bn-red); color: var(--bn-white); }
.bn-pill--vip { background: var(--bn-yellow); color: var(--bn-navy); }
.bn-pill--premium { background: var(--bn-navy); color: var(--bn-yellow); }
.bn-pill--new { background: var(--bn-green-tint); color: var(--bn-green-text); }
.bn-installment { align-self: flex-start; font: 700 12px var(--bn-font-body); color: var(--bn-green-text); background: var(--bn-green-tint); border-radius: 8px; padding: 4px 8px; }
.bn-h2 { font: 800 var(--bn-h2-desktop)/1.15 var(--bn-font-display); letter-spacing: -0.5px; color: var(--bn-navy); margin: 0; }
.bn-price { font: 900 var(--bn-price) var(--bn-font-display); color: var(--bn-navy); }
.bn-price--sale { color: var(--bn-red); }
.bn-price-old { font-size: 13px; color: var(--bn-text-2); text-decoration: line-through; }
@media (max-width: 768px) { .bn-h2 { font-size: var(--bn-h2-mobile); } }

/* ─── Tema ləqəbləri (layihəyə əlavə) ───
   --bn-ink  : mətn rəngi (işıqlıda navy, qaranlıqda açıq)
   --bn-card : kart/dialoq fonu
   --bn-bg   : səhifə fonu
   --bn-navy : qaranlıq doldurma (düymə, footer, topbar) — hər iki temada tünd qalır */
:root {
  --bn-ink: var(--bn-navy);
  --bn-card: var(--bn-white);
  --bn-bg: var(--bn-surface);
  --bn-soft: #F5F6F8;        /* ikon plitəsi, ghost düymə fonu */
  --bn-divider: #F0F1F4;
}
/* Qaranlıq palitra — dizayn sistemi §01 (bg #0F1222 · surface #171B31 · card #1E2340 · line #2C3252 · text #E9EBF5) */
[data-theme="dark"] {
  --bn-ink: #E9EBF5;
  --bn-card: #1E2340;
  --bn-bg: #0F1222;
  --bn-surface: #171B31;
  --bn-soft: #262B4A;
  --bn-divider: #2C3252;
  --bn-line: #2C3252;
  --bn-text-2: #A3A9C4;
  --bn-yellow-tint: #3A3520;
  --bn-green-tint: #173A2A;
  --bn-red-tint: #3D1F25;
  --bn-shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  color-scheme: dark;
}