/*
 * HardFish — Design Tokens
 * Jedyne źródło prawdy dla zmiennych CSS.
 * Importuj PRZED wszystkimi innymi arkuszami.
 *
 * Ten plik jest autorytatywnym źródłem kolorów, geometrii i ruchu.
 * Aliasy bez prefiksu utrzymują kompatybilność starszych widoków podczas
 * stopniowego porządkowania arkuszy storefrontu i panelu.
 */

:root {
  /* ── Kolory marki ─────────────────────────────────────────────────── */
  --hf-brand-950:    #08281e;
  --hf-brand-900:    #0b3528;
  --hf-brand-800:    #104936;
  --hf-brand-700:    #176044;
  --hf-brand:        var(--hf-brand-900);
  --hf-brand-mid:    var(--hf-brand-800);
  --hf-brand-dark:   var(--hf-brand-950);
  --hf-brand-soft:   #e5ede8;
  --hf-accent:       #e6b62e;
  --hf-accent-light: #f2c94c;

  /* ── Kolory semantyczne ───────────────────────────────────────────── */
  --hf-success:      #166534;
  --hf-success-bg:   #dcfce7;
  --hf-success-border: #86efac;
  --hf-warning:      #854d0e;
  --hf-warning-bg:   #fef9c3;
  --hf-warning-border: #fde047;
  --hf-danger:       #b63838;
  --hf-danger-bg:    #fee2e2;
  --hf-danger-border: #fca5a5;
  --hf-info:         #1e40af;
  --hf-info-bg:      #dbeafe;
  --hf-info-border:  #93c5fd;

  /* ── Tła i powierzchnie ───────────────────────────────────────────── */
  --hf-bg:           #eef3ef;
  --hf-surface:      #ffffff;
  --hf-surface-soft: #f7faf8;
  --hf-surface-alt:  #e5ede8;

  /* ── Tekst ────────────────────────────────────────────────────────── */
  --hf-ink:          #12221b;
  --hf-muted:        #586861;
  --hf-line:         #c9d6ce;
  --hf-line-strong:  #abc0b4;
  --hf-on-brand:     #ffffff;
  --hf-accent-ink:   #382b04;
  --hf-promo-ink:    #8a3b17;
  --hf-focus-ring:   rgba(230,182,46,.5);
  --hf-overlay:      rgba(4,24,17,.72);
  --hf-surface-glass: rgba(255,255,255,.94);

  /* ── Cienie ───────────────────────────────────────────────────────── */
  --hf-shadow-xs:  0 1px 3px rgba(16,53,40,.06);
  --hf-shadow-sm:  0 8px 24px rgba(16,53,40,.09);
  --hf-shadow:     0 18px 55px rgba(16,53,40,.12);

  /* ── Promienie ────────────────────────────────────────────────────── */
  --hf-radius-xs:   6px;
  --hf-radius-sm:   10px;
  --hf-radius-md:   12px;
  --hf-radius-lg:   16px;
  --hf-radius-xl:   20px;
  --hf-radius-full: 999px;

  /* ── Spacing (4px grid) ───────────────────────────────────────────── */
  --hf-space-1:   4px;
  --hf-space-2:   8px;
  --hf-space-3:   12px;
  --hf-space-4:   16px;
  --hf-space-5:   20px;
  --hf-space-6:   24px;
  --hf-space-8:   32px;
  --hf-space-10:  40px;
  --hf-space-12:  48px;
  --hf-space-16:  64px;

  /* ── Animacja ─────────────────────────────────────────────────────── */
  --hf-duration-fast:  150ms;
  --hf-duration-base:  200ms;
  --hf-duration-slow:  300ms;
  --hf-ease:           cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-index ──────────────────────────────────────────────────────── */
  --hf-z-dropdown:   100;
  --hf-z-header:     200;
  --hf-z-drawer:     300;
  --hf-z-modal:      400;
  --hf-z-toast:      500;

  /* ── Typografia ───────────────────────────────────────────────────── */
  --hf-font:         Inter, ui-sans-serif, system-ui, -apple-system,
                     BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hf-text-xs:      12px;
  --hf-text-sm:      13px;
  --hf-text-base:    16px;
  --hf-text-lg:      18px;
  --hf-text-xl:      21px;
  --hf-text-2xl:     28px;
  --hf-line-height:  1.55;

  /* ── Layout ───────────────────────────────────────────────────────── */
  --hf-container:    1240px;
  --hf-container-wide: 1480px;
  --hf-catalog-sidebar: 264px;
  --hf-sidebar:      288px;

  /* Aliasy kompatybilności — nie definiować ich ponownie w arkuszach stron. */
  --brand: var(--hf-brand-900);
  --brand-2: var(--hf-brand-800);
  --brand-3: var(--hf-brand-950);
  --brand-strong: var(--hf-brand-950);
  --brand-soft: var(--hf-brand-soft);
  --accent: var(--hf-accent);
  --accent-2: var(--hf-accent-light);
  --ink: var(--hf-ink);
  --muted: var(--hf-muted);
  --line: var(--hf-line);
  --bg: var(--hf-bg);
  --surface: var(--hf-surface);
  --surface-soft: var(--hf-surface-soft);
  --danger: var(--hf-danger);
  --warning: var(--hf-warning);
  --shadow: var(--hf-shadow);
  --shadow-sm: var(--hf-shadow-sm);
  --radius: var(--hf-radius-lg);
  --radius-sm: var(--hf-radius-sm);
  --container: var(--hf-container);
  --sidebar: var(--hf-sidebar);
}

/*
 * Zmniejszona animacja — szanuje preferencje systemowe.
 * Składowe CSS (duration, transform) niech będą przezroczyste, ale nie
 * usuwamy visibility zmian, które są potrzebne funkcjonalnie.
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --hf-duration-fast: 0ms;
    --hf-duration-base: 0ms;
    --hf-duration-slow: 0ms;
  }
}