/* ============================================================
   Loadista Design Tokens
   Single source of truth for colors, spacing, typography, etc.
   ============================================================ */

/* ── Inter (self-hosted, variable) ──
   Deckt Latein + erweitertes Latein ab; Georgisch fällt per-Glyph
   auf 'Noto Sans Georgian' / System zurück (Inter hat keine ქართული-Glyphen). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/vendor/inter/InterVariable.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/vendor/inter/InterVariable-Italic.woff2') format('woff2');
}

:root {
  /* ── Brand & Semantic Colors ── */
  --c-brand:           #1a3a5c;        /* primary navy */
  --c-brand-hover:     #2e6da4;        /* lighter blue for hover */
  --c-brand-soft:      #eef4fb;        /* selected state background */
  --c-accent:          #f59e0b;        /* warm gold for secondary CTAs / ratings */
  --c-accent-hover:    #d97706;

  --c-success:         #047857;
  --c-success-soft:    #ecfdf5;
  --c-success-border:  #a7f3d0;
  --c-warning:         #b45309;
  --c-warning-soft:    #fffbeb;
  --c-warning-border:  #fde68a;
  --c-info:            #1d4ed8;
  --c-info-soft:       #eff6ff;
  --c-info-border:     #bfdbfe;
  --c-danger:          #c0392b;
  --c-danger-soft:     #fef2f2;
  --c-danger-border:   #fecaca;

  /* ── Neutrals ── */
  --c-bg:              #f0f4f8;
  --c-surface:         #ffffff;
  --c-surface-alt:     #f8f9fb;
  --c-border:          #e2e8f0;
  --c-border-strong:   #cfd8e3;

  --c-text:            #1a2332;
  --c-text-muted:      #475569;       /* WCAG AA on white */
  --c-text-subtle:     #6b7a8c;       /* WCAG AA on white */
  --c-text-placeholder:#94a3b8;
  --c-text-on-brand:   #ffffff;

  /* ── Radius ── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   18px;
  --r-pill: 9999px;

  /* ── Spacing scale (4px base) ── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;

  /* ── Shadows ── */
  --sh-subtle:   0 1px 3px rgba(15, 23, 42, 0.06);
  --sh-elevated: 0 4px 16px rgba(15, 23, 42, 0.08);
  --sh-overlay:  0 20px 60px rgba(15, 23, 42, 0.18);

  /* ── Typography ── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Georgian', Arial, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fz-xs:   11px;
  --fz-sm:   13px;
  --fz-base: 14px;
  --fz-md:   15px;
  --fz-lg:   17px;
  --fz-xl:   20px;
  --fz-2xl:  26px;

  --lh-tight: 1.25;
  --lh-base:  1.5;

  /* ── Layout ── */
  --topbar-height: 68px;
  --login-header-height: 106px;

  /* ── Z-Index Layers ── */
  --z-base:        1;
  --z-sticky:      100;
  --z-dropdown:    1000;
  --z-sidebar:     1100;
  --z-fab:         1200;
  --z-chat:        1500;
  --z-modal:       3000;
  --z-modal-high:  4000;
  --z-mobile-menu: 5000;
  --z-popup:       5500;
  --z-toast:       9000;
  --z-suggestions: 9500;
  --z-dialog:      30000;

  /* ── Motion ── */
  --t-fast:   0.15s;
  --t-normal: 0.22s;
  --t-slow:   0.3s;
  --easing:   cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* PWA / mobile: kleinere Topbar */
@media (max-width: 768px), (display-mode: standalone) {
  :root { --topbar-height: 48px; }
}

/* ── Reduced Motion: Animationen/Transitions abschalten ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast:   0s;
    --t-normal: 0s;
    --t-slow:   0s;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html, body {
  font-family: var(--font-sans);
  color: var(--c-text);
  -webkit-text-size-adjust: 100%;
  accent-color: var(--c-brand);
}

/* ── Utility focus ring ── */
.focus-ring:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--c-brand-hover);
  outline-offset: 2px;
}

/* Visually hidden but accessible to screen readers */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}