/* ============================================
   BASE — body, typography, sections, utilities
   1:1 z app/globals.css (Next/Tailwind source)
   ============================================ */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background-color: var(--color-court-deep-dark);
  color: var(--color-cream);
  font-family: var(--font-body);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#main-content {
  flex: 1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-cream);
  margin: 0;
}

p { margin: 0; }

a { color: inherit; }

img, svg, video {
  display: block;
  max-width: 100%;
}

/* ── Container ────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container--sm  { max-width: 48rem; }   /* max-w-3xl */
.container--md  { max-width: 64rem; }   /* max-w-5xl */
.container--lg  { max-width: 72rem; }   /* max-w-6xl */
.container--xl  { max-width: 80rem; }   /* max-w-7xl */

/* ── Section variants ─────────────────────── */

.section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-20);
  scroll-margin-top: var(--nav-height);
}

@media (min-width: 640px) {
  .section { padding-block: var(--space-28); }
}

.section--deep   { background-color: var(--color-court-deep);      color: var(--color-cream); }
.section--deeper { background-color: var(--color-court-deep-dark); color: var(--color-cream); }
.section--cream  { background-color: var(--color-cream);           color: var(--color-ink); }
.section--yellow { background-color: var(--color-ball-yellow);     color: var(--color-ink); }
.section--hero   { background-color: var(--color-court-deep);      color: var(--color-cream); }

.section--padding-sm   { padding-block: var(--space-12); }
.section--padding-md   { padding-block: var(--space-16); }
.section--padding-lg   { padding-block: var(--space-24); }
.section--padding-xl   { padding-block: var(--space-32); }
.section--padding-none { padding-block: 0; }

@media (min-width: 640px) {
  .section--padding-sm  { padding-block: var(--space-16); }
}

/* Container size full (alias dla Container width=full) */
.container--full { max-width: none; }

/* ── Surface helpers ──────────────────────── */

.surface-deep   { background-color: var(--color-court-deep);      color: var(--color-cream); }
.surface-cream  { background-color: var(--color-cream);           color: var(--color-ink); }
.surface-yellow { background-color: var(--color-ball-yellow);     color: var(--color-ink); }

/* ── Headings utility ─────────────────────── */

.heading-display {
  font-family: var(--font-heading);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: var(--tracking-tight);
}

.heading-mega {
  font-family: var(--font-heading);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.85;
  letter-spacing: var(--tracking-tight);
  font-size: clamp(48px, 9vw, 128px);
}

.heading-giga {
  font-family: var(--font-heading);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.85;
  letter-spacing: var(--tracking-tight);
  font-size: clamp(72px, 14vw, 192px);
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

/* ── Eyebrow / labels ─────────────────────── */

.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
}

.section-label {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ball-yellow);
}

/* ── Text helpers ─────────────────────────── */

.text-center { text-align: center; }
.text-body   { font-family: var(--font-body); line-height: var(--leading-normal); }
.text-muted  { color: var(--color-text-muted); }
.text-dim    { color: var(--color-text-dim); }

.text-yellow { color: var(--color-ball-yellow); }
.text-cream  { color: var(--color-cream); }
.text-ink    { color: var(--color-ink); }

/* ── Diagonal clips ───────────────────────── */

.clip-diagonal-down { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%); }
.clip-diagonal-up   { clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%); }

/* ── Scrollbar hide ───────────────────────── */

.scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ── Animations ───────────────────────────── */

@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

@keyframes pulse-ring {
  0%, 100% { transform: scale(1);    opacity: 0.4; }
  50%      { transform: scale(1.05); opacity: 0.7; }
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .animate-ping,
  .animate-pulse,
  .animate-pulse-ring,
  .marquee__track { animation: none !important; }
}

/* ── Visually hidden ──────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}