/* =========================================================
   WYGLĄD MARKI IMAGEPRO (wg imagepro.pl)
   Wygląd aplikacji i strony odtwarzania zmieniasz tylko tutaj.
   Po zmianie: npx wrangler deploy
   ========================================================= */

/* 1. Font z Google Fonts (jak na imagepro.pl) */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&display=swap");

:root {
  /* 2. Font */
  --font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* 3. Kolory marki */
  --brand: #ff7a3d;        /* Accent z Elementora */
  --brand-hover: #923a20;  /* Hover z Elementora */
  --brand-ink: #ffffff;    /* tekst na pomarańczowych przyciskach */
  --ink: #1a1a1a;          /* tekst */
  --muted: #66625c;        /* tekst pomocniczy */
  --line: #d9d6d1;         /* linie i obramowania */
  --paper: #ecebe9;        /* tło stron */
  --surface: #f8f7f5;      /* tło pasków i paneli */

  /* 4. Przyciski: pigułki jak „Poznajmy się” */
  --btn-radius: 999px;
  --btn-pad: 8px 18px;
  --btn-weight: 500;
  --btn-border: 1px;
  --btn2-bg: #1a1a1a;      /* przycisk ciemny: „Wejdź”, „Kopiuj link” */
  --btn2-ink: #ffffff;
  --btn2-hover: #923a20;

  /* 5. Wysokość logo w górnym pasku */
  --logo-h: 36px;
}

/* Nagłówki jak na stronie: Medium, lekko ściśnięte */
h1, h2, h3 { font-weight: 500; letter-spacing: -0.02em; }

/* 6. Logo: public/assets/logo.png (skopiuj z projektu imagepro-uwagi).
      Jeśli pliku nie ma, wyświetla się logo tekstowe IMAGEPRO. */