/* ============================================================
   tarifebi.ge — Design Tokens
   Single source of truth for colors, spacing, typography, etc.
   Loaded BEFORE style.css so all existing var(--*) inherit.
   ============================================================ */

:root {
  /* ── COLOR: BRAND (Green = primary brand) ───────────────── */
  --brand-50:  #ecfdf5;
  --brand-100: #d1fae5;
  --brand-200: #a7f3d0;
  --brand-300: #6ee7b7;
  --brand-400: #34d399;
  --brand-500: #10b981;   /* hover / lighter brand */
  --brand-600: #059669;   /* PRIMARY brand */
  --brand-700: #047857;   /* darker brand */
  --brand-800: #065f46;
  --brand-900: #064e3b;
  --brand-950: #022c22;

  /* ── COLOR: ACCENT (red — discount badges, alerts) ──────── */
  --accent-50:  #fef2f2;
  --accent-100: #fee2e2;
  --accent-200: #fecaca;
  --accent-500: #ef4444;
  --accent-600: #dc2626;
  --accent-700: #b91c1c;

  /* ── COLOR: NEUTRAL gray scale (single hue family) ──────── */
  --gray-50:  #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --gray-950: #020617;

  /* ── COLOR: SEMANTIC ───────────────────────────────────── */
  --color-success:  var(--brand-600);
  --color-warning:  #f59e0b;
  --color-danger:   var(--accent-600);
  --color-info:     #3b82f6;

  /* ── COLOR: BACKWARD-COMPAT (overrides old :root above) ── */
  /* Map legacy names to new tokens — site keeps working without
     touching style.css. New design uses semantic tokens below. */
  --bg:             var(--gray-50);
  --surface:        #ffffff;
  --text:           var(--gray-900);
  --text-muted:     var(--gray-500);
  --primary:        var(--brand-600);
  --primary-light:  var(--brand-100);
  --accent:         var(--accent-600);
  --accent-light:   var(--accent-100);
  --green:          var(--brand-600);
  --green-light:    var(--brand-100);
  --border:         var(--gray-200);

  /* ── COLOR: SEMANTIC SURFACES (new design uses these) ──── */
  --surface-1:      #ffffff;            /* cards */
  --surface-2:      var(--gray-50);     /* page bg */
  --surface-3:      var(--gray-100);    /* subtle elevation */
  --surface-dark:   var(--gray-900);    /* dark sections (hero/footer) */
  --surface-darker: var(--gray-950);

  --text-strong:    var(--gray-900);
  --text-base:      var(--gray-800);
  --text-soft:      var(--gray-500);
  --text-mute:      var(--gray-400);
  --text-on-dark:   #ffffff;
  --text-on-brand:  #ffffff;

  --border-subtle:  var(--gray-100);
  --border-base:    var(--gray-200);
  --border-strong:  var(--gray-300);
  --border-focus:   var(--brand-600);

  /* ── SPACING (4/8 scale) ───────────────────────────────── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;   /* base unit, mobile gutter */
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── RADIUS ────────────────────────────────────────────── */
  --r-xs:    4px;
  --r-sm:    8px;
  --r-md:    12px;   /* default card */
  --r-lg:    16px;   /* larger card */
  --r-xl:    24px;
  --r-pill:  9999px;
  /* legacy compat */
  --radius:    var(--r-md);
  --radius-sm: var(--r-sm);

  /* ── SHADOW (subtle, layered) ──────────────────────────── */
  --sh-xs: 0 1px 2px rgba(15,23,42,.04);
  --sh-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --sh-md: 0 4px 12px -2px rgba(15,23,42,.08), 0 2px 4px -2px rgba(15,23,42,.04);
  --sh-lg: 0 10px 24px -6px rgba(15,23,42,.10), 0 4px 8px -2px rgba(15,23,42,.05);
  --sh-xl: 0 20px 40px -10px rgba(15,23,42,.15), 0 8px 16px -4px rgba(15,23,42,.06);
  --sh-glow-brand: 0 8px 24px -6px rgba(5,150,105,.30);
  /* legacy compat */
  --shadow:    var(--sh-sm);
  --shadow-md: var(--sh-md);
  --shadow-lg: var(--sh-lg);

  /* ── TYPOGRAPHY: SIZE (mobile-first, scales up on md+) ── */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-26: 26px;
  --fs-28: 28px;

  /* Semantic type scale (mobile) */
  --fs-display: 28px;       /* H1 mobile */
  --fs-h1: 28px;
  --fs-h2: 22px;            /* section title mobile */
  --fs-h3: 18px;
  --fs-body: 14px;
  --fs-body-lg: 15px;
  --fs-caption: 12px;
  --fs-micro: 11px;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-base:   1.5;
  --lh-relax:  1.65;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* Letter-spacing for Georgian display fonts */
  --ls-tight: -0.02em;
  --ls-base:  0;
  --ls-wide:  0.05em;

  /* ── LAYOUT ────────────────────────────────────────────── */
  --container-max: 1280px;
  --container-pad: var(--space-4);
  --header-h-mobile: 56px;
  --header-h-desktop: 64px;
  --bottombar-h: 64px;

  /* ── MOTION ────────────────────────────────────────────── */
  --t-fast:   120ms;
  --t-base:   200ms;
  --t-slow:   320ms;
  --ease:     cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);

  /* ── Z-INDEX ───────────────────────────────────────────── */
  --z-base:    1;
  --z-sticky:  100;
  --z-drawer:  900;
  --z-modal:   1000;
  --z-toast:   1100;
  --z-tooltip: 1200;
}

/* ============================================================
   DESKTOP scale-up (≥768px)
   ============================================================ */
@media (min-width: 768px) {
  :root {
    --fs-display: 40px;     /* H1 desktop */
    --fs-h1: 36px;
    --fs-h2: 26px;
    --fs-h3: 20px;
    --fs-body: 15px;
    --fs-body-lg: 16px;
    --container-pad: var(--space-6);
  }
}

/* ============================================================
   DARK MODE — auto via prefers-color-scheme OR manual [data-theme="dark"]
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:           var(--gray-950);
    --surface:      var(--gray-900);
    --surface-1:    var(--gray-900);
    --surface-2:    var(--gray-950);
    --surface-3:    var(--gray-800);
    --text:         var(--gray-50);
    --text-strong:  #ffffff;
    --text-base:    var(--gray-100);
    --text-muted:   var(--gray-400);
    --text-soft:    var(--gray-400);
    --text-mute:    var(--gray-500);
    --border:       var(--gray-800);
    --border-subtle:var(--gray-800);
    --border-base:  var(--gray-700);
    --border-strong:var(--gray-600);
    --sh-sm: 0 1px 3px rgba(0,0,0,.4);
    --sh-md: 0 4px 12px -2px rgba(0,0,0,.5);
    --sh-lg: 0 10px 24px -6px rgba(0,0,0,.55);
  }
}

[data-theme="dark"] {
  --bg:           var(--gray-950);
  --surface:      var(--gray-900);
  --surface-1:    var(--gray-900);
  --surface-2:    var(--gray-950);
  --surface-3:    var(--gray-800);
  --text:         var(--gray-50);
  --text-strong:  #ffffff;
  --text-base:    var(--gray-100);
  --text-muted:   var(--gray-400);
  --text-soft:    var(--gray-400);
  --text-mute:    var(--gray-500);
  --border:       var(--gray-800);
  --border-subtle:var(--gray-800);
  --border-base:  var(--gray-700);
  --border-strong:var(--gray-600);
  --sh-sm: 0 1px 3px rgba(0,0,0,.4);
  --sh-md: 0 4px 12px -2px rgba(0,0,0,.5);
  --sh-lg: 0 10px 24px -6px rgba(0,0,0,.55);
}

/* ============================================================
   GLOBAL UTILITIES
   ============================================================ */

/* WCAG focus ring — keyboard only */
:focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}