/* =====================================================================
   FSUNK – Design tokens
   Paleta është nxjerrë direkt nga logoja e federatës (sampling i pikselave).
   Rregull: një seksion = maksimum dy ngjyra identiteti + neutralet.
   ===================================================================== */

:root {
  /* --- Institucionale (shtylla e dizajnit) --- */
  --navy-900: #16214d;   /* tekstet kryesore, footer */
  --navy-800: #1d2a5e;
  --navy-700: #25336f;   /* nga "U"-ja blu e logos */
  --navy-600: #2f3f85;

  /* --- Sportive --- */
  --blue-600: #1a5fa0;
  --blue-500: #1f6fb5;
  --cyan-500: #1080b0;   /* ylli cyan */
  --cyan-400: #2b9fd0;

  /* --- Ari (theksime, vetëm në doza të vogla) --- */
  --gold-600: #a8834a;
  --gold-500: #be9a5c;   /* nga "U"-ja e artë */
  --gold-400: #d4b47e;

  /* --- Yjet e logos: përdoren vetëm si sinjal (kategori, medalje) --- */
  --star-yellow: #f2c230;
  --star-green:  #1f9d55;
  --star-red:    #d0342c;
  --star-black:  #101010;

  /* --- Neutralet --- */
  --white:    #ffffff;
  --gray-50:  #f7f8fa;
  --gray-100: #eef0f4;
  --gray-200: #e0e4ea;
  --gray-400: #9aa3b2;
  --gray-600: #5a6474;
  --gray-800: #2b3341;

  /* --- Roli semantik --- */
  --color-text:        var(--navy-900);
  --color-text-muted:  var(--gray-600);
  --color-surface:     var(--white);
  --color-surface-alt: var(--gray-50);
  --color-border:      var(--gray-200);
  --color-primary:     var(--navy-700);
  --color-accent:      var(--gold-500);
  --color-sport:       var(--blue-600);

  /* --- Tipografia --- */
  --font-heading: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-hero:   clamp(2.2rem, 5.2vw, 4.25rem);
  --fs-h1:     clamp(1.9rem, 3.4vw, 2.85rem);
  --fs-h2:     clamp(1.5rem, 2.4vw, 2.1rem);
  --fs-h3:     1.25rem;
  --fs-body:   1rem;
  --fs-small:  0.875rem;
  --fs-label:  0.75rem;

  --lh-tight: 1.08;
  --lh-head:  1.2;
  --lh-body:  1.65;
  --tracking-label: 0.14em;

  /* --- Hapësira (shkallë 4px) --- */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-8: 3rem;    --sp-10: 4rem;
  --sp-12: 6rem;   --sp-16: 8rem;

  --container: 1240px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* --- Radius: i kontrolluar, jo "AI rounded" --- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;

  /* --- Hije: të lehta, vetëm si ndarje --- */
  --shadow-card:  0 1px 2px rgba(22, 33, 77, 0.06);
  --shadow-hover: 0 6px 20px rgba(22, 33, 77, 0.10);

  /* --- Tranzicione 150–250ms --- */
  --ease: cubic-bezier(0.2, 0.6, 0.3, 1);
  --t-fast: 150ms var(--ease);
  --t-base: 220ms var(--ease);

  --header-h: 88px;
  --topbar-h: 38px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}