/* ============================================================
   VARIABLES.CSS — Design System v2
   hurt.dobrecieplo.eu
   Deep Amber Gold — premium B2B, biały ↔ czarny
   ============================================================ */

:root {
  /* ═══ KOLOR AKCENTU — Deep Amber Gold ═══ */
  --color-accent:        #C9952C;
  --color-accent-hover:  #B8860B;
  --color-accent-light:  rgba(201, 149, 44, 0.10);
  --color-accent-muted:  rgba(201, 149, 44, 0.55);
  --color-accent-border: rgba(201, 149, 44, 0.30);
  --color-accent-glow:   rgba(201, 149, 44, 0.35);

  /* Złoto logo — zachowane WYŁĄCZNIE dla brand identity */
  --color-gold: #8c7134;
  --color-gold-hover: #7a6330;
  --color-gold-light: rgba(140, 113, 52, 0.08);
  --color-gold-muted: rgba(140, 113, 52, 0.55);
  --color-gold-border: rgba(140, 113, 52, 0.2);
  --color-gold-glow: rgba(140, 113, 52, 0.25);

  /* ═══ TŁA SEKCJI ═══ */
  --bg-white:    #FFFFFF;
  --bg-light:    #FFFFFF;   /* body base */
  --bg-card:     #FAFAFA;   /* karty na białych sekcjach */
  --bg-dark:     #0D0D0D;   /* ciemne sekcje */
  --bg-dark-alt: #111111;

  /* ═══ TEKST ═══ */
  --text-primary:      #111111;
  --text-body:         #444444;
  --text-secondary:    #666666;
  --text-muted:        #777777;
  --text-on-dark:      #FFFFFF;
  --text-on-dark-muted: rgba(255, 255, 255, 0.60);
  --text-gold:  #8c7134;       /* logo only */
  --text-accent: #C9952C;      /* UI akcenty */

  /* ═══ BORDER ═══ */
  --border-light:  #E5E5E5;
  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-medium: rgba(0, 0, 0, 0.15);
  --border-dark:   #2A2A2A;
  --border-gold:   rgba(140, 113, 52, 0.2);      /* logo only */
  --border-accent: rgba(201, 149, 44, 0.30);     /* UI akcenty */

  /* ═══ SZARY NEUTRALNY ═══ */
  --color-black:      #111111;
  --color-white:      #FFFFFF;
  --color-grey-900:   #111111;
  --color-grey-700:   #374151;
  --color-grey-600:   #4b5563;
  --color-grey-500:   #6b7280;
  --color-grey-400:   #9ca3af;
  --color-grey-300:   #d1d5db;
  --color-grey-200:   #e5e7eb;
  --color-grey-100:   #f3f4f6;
  --color-grey-50:    #f9fafb;

  /* ═══ TYPOGRAFIA ═══ */
  --font-family:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-hero:    clamp(2.25rem, 4.2vw, 3.25rem);
  --fs-h2:      clamp(1.5rem, 3vw, 2.25rem);
  --fs-h3:      clamp(1.125rem, 2vw, 1.5rem);
  --fs-body:    1rem;
  --fs-body-sm: 0.9375rem;
  --fs-small:   0.875rem;
  --fs-xs:      0.8125rem;
  --fs-label:   0.6875rem;

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

  --line-height:       1.75;
  --line-height-tight: 1.2;
  --line-height-snug:  1.4;

  --letter-spacing-wide: 0.1em;
  --letter-spacing-nav:  0.05em;
  --letter-spacing-btn:  0.06em;
  --letter-spacing-tight: -0.01em;

  /* ═══ SPACING ═══ */
  --section-py:       clamp(5rem, 10vw, 7.5rem);   /* legacy token — zostaw */
  --section-spacing:  clamp(3rem, 5vw, 4.5rem);    /* 48–72px — padding-bottom sekcji */
  --section-padding:  var(--section-py) 0;
  --container-width:  1200px;
  --container-padding: 0 clamp(1.25rem, 4vw, 2rem);

  --gap-xs:      0.25rem;
  --gap-sm:      0.5rem;
  --gap-md:      1rem;
  --gap-lg:      2rem;
  --gap-xl:      3rem;
  --gap-2xl:     4rem;
  --gap-section: 1.5rem;

  /* ═══ NAWIGACJA ═══ */
  --nav-height: 80px;

  /* ═══ KOMPONENTY ═══ */
  --radius-xs:   2px;
  --radius-sm:   3px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-pill: 100px;

  --shadow-none:       none;
  --shadow-xs:         0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:         0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:         0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg:         0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-gold:       0 4px 16px rgba(140, 113, 52, 0.25);   /* logo only */
  --shadow-accent:     0 4px 16px rgba(201, 149, 44, 0.35);   /* UI CTA */
  --shadow-card:       0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.07);

  --transition:        200ms ease;
  --transition-slow:   320ms ease;
  --transition-smooth: 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ═══ ANIMACJE ═══ */
  --anim-duration: 600ms;
  --anim-ease:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --anim-stagger:  80ms;
  --anim-offset:   30px;

  /* ═══ Z-INDEX ═══ */
  --z-sticky:    50;
  --z-nav:       100;
  --z-overlay:   200;
  --z-offcanvas: 260;
  --z-modal:     300;

  /* ═══ CIEMNE TŁA — dodatkowe odcienie ═══ */
  --bg-dark-deep:    #1e1e1e;   /* karty "loser" w sekcji comparison */
  --bg-dark-deeper:  #161616;   /* FAQ / accordion na ciemnym tle */

  /* ═══ NAWIGACJA ═══ */
  --nav-scrolled-bg: rgba(255, 253, 249, 0.97);   /* header po przewinięciu */

  /* ═══ AKCENT — rozszerzone stopnie przezroczystości ═══ */
  --color-accent-faint:  rgba(201, 149, 44, 0.04);
  --color-accent-subtle: rgba(201, 149, 44, 0.08);
  --color-accent-soft:   rgba(201, 149, 44, 0.12);
  --color-accent-warm:   rgba(201, 149, 44, 0.15);
  --border-accent-light: rgba(201, 149, 44, 0.20);   /* ikony w kółkach */

  /* ═══ CIEMNE SEKCJE — powierzchnie, ramki, tekst ═══ */
  --surface-on-dark-subtle: rgba(255, 255, 255, 0.04);
  --surface-on-dark:        rgba(255, 255, 255, 0.06);
  --surface-on-dark-medium: rgba(255, 255, 255, 0.10);
  --border-on-dark:         rgba(255, 255, 255, 0.08);
  --border-on-dark-medium:  rgba(255, 255, 255, 0.20);
  --border-on-dark-strong:  rgba(255, 255, 255, 0.30);
  --text-on-dark-faint:     rgba(255, 255, 255, 0.35);   /* prawie niewidoczny */
  --text-on-dark-dim:       rgba(255, 255, 255, 0.40);   /* przyciemniony */
  --text-on-dark-half:      rgba(255, 255, 255, 0.50);   /* pół przezroczystości */
  --text-on-dark-soft:      rgba(255, 255, 255, 0.70);   /* czytelny, wtórny */

  /* ═══ NAKŁADKI ═══ */
  --overlay-dark: rgba(0, 0, 0, 0.45);

  /* ═══ RAMKI — subtelne (na jasnym tle) ═══ */
  --border-faint: rgba(0, 0, 0, 0.04);
  --border-soft:  rgba(0, 0, 0, 0.10);

  /* ═══ STATUSOWE ═══ */
  --color-success:         #16a34a;
  --color-success-bg:      rgba(22, 163, 74, 0.07);
  --color-success-border:  rgba(22, 163, 74, 0.2);
  --color-positive:        #2d7a2d;          /* ciemniejsza zieleń — tabela krajów */
  --color-positive-bg:     rgba(34, 139, 34, 0.06);
  --color-positive-border: rgba(34, 139, 34, 0.40);
  --color-danger:          #dc2626;
  --color-danger-bg:       rgba(220, 38, 38, 0.07);
  --color-danger-border:   rgba(220, 38, 38, 0.2);

  /* ═══ INNE ═══ */
  --color-star:      #f59e0b;                       /* gwiazdki ocen */
  --color-gold-warm: rgba(140, 113, 52, 0.15);      /* dekoracyjny gradient hero */
}