/* ═══════════════════════════════════════════════════
   global.css — Surfer Chaosu · Globalny system stylów

   Importuj w każdej stronie:
   <link rel="stylesheet" href="/css/global.css">

   Strony nadpisują style SWOIM <style> po tym imporcie.
   Odbiorcy: 35-40+ lat — duże fonty, wysoki kontrast.
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Montserrat:wght@300;400;500;600;700&family=Lora:ital,wght@0,400;1,400&display=swap');

/* ── TOKENY ── */
:root {
  /* Kolory główne */
  --gold:    #c8a84b;
  --goldl:   #e8c96a;
  --teal:    #22a3b8;
  --tealg:   #2fc9e0;
  --secret:  #9b6fe8;
  --secretl: #b98af0;
  --deep:    #060f1e;
  --white:   #f0f8ff;
  --error:   #ff7070;

  /* Kolory sekcji oceanu */
  --c0: #2fc9e0;
  --c1: #22a3b8;
  --c2: #1a8fa0;
  --c3: #147a8a;

  /* Tła */
  --bg-ocean:  #060f1e;
  --bg-panel:  rgba(8, 20, 44, 0.97);
  --bg-card:   rgba(15, 25, 50, 0.6);
  --bg-subtle: rgba(34, 163, 184, 0.06);

  /* ── TEKST — hierarchia czytelności ──
     Nigdy nie dodawaj opacity do elementu z tymi kolorami.
     Kontrast testowany na tle --deep (#060f1e). */
  --text-primary:    #f0f8ff;                     /* 100% — nagłówki, CTA */
  --text-secondary:  rgba(240, 248, 255, 0.82);   /*  82% — body, opisy */
  --text-tertiary:   rgba(240, 248, 255, 0.62);   /*  62% — meta, etykiety */
  --text-hint:       rgba(240, 248, 255, 0.38);   /*  38% — placeholdery, dekoracja (nie do czytania!) */

  /* Fonty */
  --font-display: 'Cormorant Garamond', serif;
  --font-ui:      'Montserrat', sans-serif;
  --font-body:    'Lora', serif;

  /* ── TYPOGRAFIA — skala ──
     Minimum 12px na desktopie, 11px na mobile.
     Grupa 35+: czytelność > estetyka. */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   19px;
  --text-xl:   clamp(22px, 3.5vw, 30px);
  --text-2xl:  clamp(26px, 4.5vw, 40px);
  --text-3xl:  clamp(32px, 5.5vw, 56px);

  /* Wagi */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-pill: 50px;

  /* Shadows / Glows */
  --glow-gold: 0 0 28px rgba(200, 168, 75, 0.35);
  --glow-teal: 0 0 20px rgba(47, 201, 224, 0.3);

  /* Transitions */
  --ease:       cubic-bezier(0.23, 1, 0.32, 1);
  --transition: all 0.25s var(--ease);
}

/* ── RESET ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-ocean);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── OCEAN BACKGROUND ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%,  rgba(34,163,184,.08) 0%, transparent 70%),
    radial-gradient(ellipse 60% 30% at 20% 60%, rgba(47,201,224,.05) 0%, transparent 70%),
    radial-gradient(ellipse 50% 25% at 80% 80%, rgba(200,168,75,.04) 0%, transparent 70%);
}

/* ── TYPOGRAFIA BAZOWA ── */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  color: var(--text-primary);
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

p {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.7;
}

small {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

a {
  color: var(--tealg);
  text-decoration: none;
  transition: color 0.2s;
}
a:hover { color: var(--white); }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(47,201,224,.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(47,201,224,.3); }

/* ── TOAST ── */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-panel);
  border: 1px solid rgba(47,201,224,.2);
  color: var(--tealg);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s var(--ease);
  z-index: 9999;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── RESPONSYWNOŚĆ ── */
@media (max-width: 768px) {
  :root {
    --text-xs:   11px;
    --text-sm:   12px;
    --text-base: 13px;
    --text-md:   15px;
  }
}

@media (max-width: 480px) {
  :root {
    --text-xs:   11px;
    --text-sm:   12px;
    --text-base: 13px;
    --text-md:   14.5px;
  }
}