/**
 * globals.css — Design tokens Akademia Naturalnego Życia
 * Ładowany globalnie jako pierwszy arkusz stylów.
 * Edytuj tu — efekt w całym motywie.
 *
 * @package Akademia
 */

:root {

  /* ── Kolory ───────────────────────────────────────── */
  --color-primary:        #4a7c59;   /* forest green — główny */
  --color-primary-dark:   #365c41;   /* ciemny — hover, nagłówki */
  --color-primary-light:  #6a9e7a;   /* jasny — akcenty drugorzędne */
  --color-primary-xlight: #e8f2ec;   /* bardzo jasny — tła */

  --color-accent:         #b5873a;   /* złoto — CTA, wyróżnienia */
  --color-accent-dark:    #8f6620;   /* ciemne złoto — hover */
  --color-accent-light:   #d4aa6a;   /* jasne złoto */

  --color-bg:             #faf8f4;   /* ciepła biel — tło domyślne */
  --color-bg-alt:         #f3ede3;   /* sekcje alternacyjne */
  --color-surface:        #ffffff;
  --color-border:         #ddd6c8;
  --color-border-light:   #ede8df;

  --color-text:           #2d2d2d;
  --color-text-muted:     #6b6b6b;
  --color-text-light:     #999999;
  --color-heading:        #1e3d2b;

  --color-white:          #ffffff;
  --color-black:          #111111;
  --color-error:          #c0392b;
  --color-success:        #27ae60;

  /* Header */
  --color-header-bg:      #ffffff;
  --color-nav-link:       #2d2d2d;
  --color-nav-link-hover: #4a7c59;

  /* Footer */
  --color-footer-bg:      #1e3d2b;
  --color-footer-text:    #c8d8cc;
  --color-footer-link:    #a8c4b0;

  /* Buttons */
  --color-btn-primary-bg:    #4a7c59;
  --color-btn-primary-text:  #ffffff;
  --color-btn-primary-hover: #365c41;

  /* ── Typografia ───────────────────────────────────── */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-ui:      'Lato', sans-serif;
  --font-mono:    'Courier New', Courier, monospace;

  --font-light:    300;
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.0625rem;  /* 17px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-base:    1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   1.75;

  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.12em;

  /* ── Spacing (4px grid) ───────────────────────────── */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-7:  1.75rem;   /* 28px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* ── Layout ───────────────────────────────────────── */
  --container-max: 1140px;
  --container-pad: var(--space-6);

  /* ── Radius ───────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Shadows ──────────────────────────────────────── */
  --shadow-sm: 0 1px 4px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.12);
  --shadow-xl: 0 16px 48px rgba(0,0,0,.15);

  /* ── Transitions ──────────────────────────────────── */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);

  /* ── Z-index ──────────────────────────────────────── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:  10;
  --z-dropdown:100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
}

/* ── Utility classes ─────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section-heading {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: var(--font-semibold);
  color: var(--color-primary-dark);
  line-height: var(--leading-tight);
}

.section-heading--center { text-align: center; }

/* ── Buttons ─────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.65rem 1.75rem;
  border-radius: var(--radius-full);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--duration-base), color var(--duration-base),
              border-color var(--duration-base), transform var(--duration-fast);
  white-space: nowrap;
}
.btn:hover   { transform: translateY(-1px); }
.btn:active  { transform: translateY(0); }

.btn--primary  { background: var(--color-primary);  color: var(--color-white); border-color: var(--color-primary); }
.btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }

.btn--accent   { background: var(--color-accent);   color: var(--color-white); border-color: var(--color-accent); }
.btn--accent:hover  { background: var(--color-accent-dark);  border-color: var(--color-accent-dark); }

.btn--outline  { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--outline:hover { background: var(--color-primary); color: var(--color-white); }

.btn--outline-white { background: transparent; color: var(--color-white); border-color: rgba(255,255,255,.6); }
.btn--outline-white:hover { background: rgba(255,255,255,.12); border-color: var(--color-white); }

.btn--lg { padding: 0.85rem 2.2rem; font-size: var(--text-base); }
.btn--sm { padding: 0.45rem 1.2rem; font-size: var(--text-xs); }

/* ── Image placeholders (dev) ────────────────────── */
.img-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary-xlight);
  border: 2px dashed var(--color-primary-light);
  border-radius: var(--radius-lg);
  color: var(--color-primary);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  text-align: center;
  line-height: var(--leading-base);
}
.img-placeholder--hero    { width: 100%; height: 480px; }
.img-placeholder--o-nas   { width: 100%; height: 500px; }
.img-placeholder--opinia  { width: 100%; height: 220px; border-radius: var(--radius-md); }
.img-placeholder--icon    { width: 80px; height: 80px; border-radius: var(--radius-full); font-size: var(--text-xs); }