/* ============================================================
   VARIABLES — vizasupport.ge design tokens  (premium edition)
   ============================================================ */

:root {

  /* ── Brand colours ────────────────────────────────────── */
  --black:           #0D0D0D;
  --white:           #F5F0E0;
  --primary:         #1D7A4A;   /* forest green  */
  --primary-dark:    #155e38;
  --primary-darker:  #0e4228;
  --primary-light:   #e8f5ee;
  --primary-xlight:  #f0faf4;
  --secondary:       #E8A800;   /* amber gold    */
  --secondary-dark:  #c48f00;
  --secondary-light: #fff8e1;
  --secondary-xlight:#fffdf0;

  /* ── Neutrals ─────────────────────────────────────────── */
  --gray-50:   #f9fafb;
  --gray-100:  #f3f4f6;
  --gray-200:  #e5e7eb;
  --gray-300:  #d1d5db;
  --gray-400:  #9ca3af;
  --gray-500:  #6b7280;
  --gray-600:  #4b5563;
  --gray-700:  #374151;
  --gray-800:  #1f2937;
  --gray-900:  #111827;

  /* ── Dark surface colours (topbar, hero overlays) ──────── */
  --surface-dark:   #0f1923;
  --surface-dark-2: #162030;

  /* ── Semantic colours ─────────────────────────────────── */
  --color-text:        var(--gray-900);
  --color-text-muted:  var(--gray-500);
  --color-text-light:  var(--gray-400);
  --color-bg:          #ffffff;
  --color-bg-alt:      #f8faf9;     /* very slight green tint  */
  --color-bg-warm:     #fdfcf7;     /* warm off-white          */
  --color-border:      var(--gray-200);
  --color-border-focus:var(--primary);
  --color-success:     #16a34a;
  --color-error:       #dc2626;
  --color-warning:     #d97706;

  /* ── Spacing scale ────────────────────────────────────── */
  --space-2xs: 0.25rem;   /*  4px */
  --space-xs:  0.375rem;  /*  6px */
  --space-sm:  0.625rem;  /* 10px */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2rem;      /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4.5rem;    /* 72px */
  --space-4xl: 6rem;      /* 96px */

  /* ── Typography ───────────────────────────────────────── */
  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.9375rem;  /* 15px  ← upgraded from 14px */
  --text-md:   1.0625rem;  /* 17px */
  --text-lg:   1.1875rem;  /* 19px */
  --text-xl:   1.4375rem;  /* 23px */
  --text-2xl:  1.875rem;   /* 30px */
  --text-3xl:  2.375rem;   /* 38px */
  --text-4xl:  3.25rem;    /* 52px */
  --text-5xl:  4rem;       /* 64px */

  --font-body:    'BPG Nino', 'Noto Sans Georgian', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'BPG Nino', 'Noto Sans Georgian', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  --font-normal: 400;
  --font-medium: 500;
  --font-semi:   600;
  --font-bold:   700;
  --font-black:  800;

  /* ── Border radius ────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-3xl:  32px;
  --radius-full: 9999px;

  /* ── Shadows — with green colour tint for brand depth ─── */
  --shadow-sm:    0 1px 4px rgba(0,0,0,0.05);
  --shadow-md:    0 4px 20px rgba(0,0,0,0.07);
  --shadow-lg:    0 8px 40px rgba(0,0,0,0.09);
  --shadow-xl:    0 16px 64px rgba(0,0,0,0.11);
  --shadow-card:  0 2px 12px rgba(29,122,74,0.06), 0 8px 32px rgba(0,0,0,0.06);
  --shadow-card-hover: 0 6px 24px rgba(29,122,74,0.14), 0 16px 48px rgba(0,0,0,0.08);
  --shadow-cta:   0 4px 20px rgba(29,122,74,0.35);
  --shadow-gold:  0 4px 20px rgba(232,168,0,0.35);
  --shadow-header: 0 2px 16px rgba(0,0,0,0.08);

  /* ── Transitions ──────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out:   cubic-bezier(0.45, 0.00, 0.55, 1.00);
  --transition-fast: 0.15s var(--ease-out);
  --transition:      0.22s var(--ease-out);
  --transition-slow: 0.38s var(--ease-out);

  /* ── Gradients (reusable) ─────────────────────────────── */
  --gradient-primary:  linear-gradient(135deg, var(--primary-darker) 0%, var(--primary) 60%, var(--primary-dark) 100%);
  --gradient-gold:     linear-gradient(135deg, var(--secondary-dark) 0%, var(--secondary) 100%);
  --gradient-brand:    linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  --gradient-dark:     linear-gradient(180deg, var(--surface-dark-2) 0%, var(--surface-dark) 100%);

  /* ── Layout ───────────────────────────────────────────── */
  --container:       1280px;
  --container-md:    1024px;
  --container-sm:    860px;

  /* Two-tier header */
  --topbar-h:        36px;
  --header-main-h:   72px;
  --header-h:        108px;          /* topbar + main — desktop total */
  --header-h-mobile: 60px;           /* mobile (no topbar shown) */

  /* ── Z-index ──────────────────────────────────────────── */
  --z-topbar:   150;
  --z-dropdown: 100;
  --z-header:   200;
  --z-floating: 300;
  --z-modal:    400;
  --z-toast:    500;

  /* ── Section padding ──────────────────────────────────── */
  --section-py:    var(--space-3xl);
  --section-py-sm: var(--space-2xl);
}