/* tokens.css — jedyne źródło kolorów, typografii i skali odstępów.
   Zero wartości hex poza tym plikiem. Patrz CLAUDE.md sekcja 5 i 6. */

:root {
  /* ---- KOLORY ---- */
  /* PODSTAWA — z logotypu Relax-Tour. TODO: podmienić na realne hex */
  --c-sea-deep:  #0B3C5D;  /* PLACEHOLDER — granat z logo */
  --c-sea-mid:   #1D7A8C;  /* PLACEHOLDER — turkus */
  --c-sea-light: #7FC5D4;  /* PLACEHOLDER — jasny turkus */

  /* MARKA — czerwień z logotypu Relax (autorski lettering, logo.svg) */
  --c-brand:       #E82829;  /* REALNY — kolor wordmarku „Relax" */

  /* AKCENT — ciepły, przełamuje chłód niebieskiego */
  --c-accent:      #E8A33D;  /* PLACEHOLDER */
  --c-accent-ink:  #7A5111;  /* PLACEHOLDER — akcent czytelny jako tekst na bieli */

  /* NEUTRALNE */
  --c-white:    #FFFFFF;
  --c-paper:    #F7FAFB;
  --c-ink:      #12242E;
  --c-ink-soft: #55707D;
  --c-line:     #DCE7EB;

  /* STANY */
  --c-open:   #1E7B4F;  /* PLACEHOLDER — zielony „otwarte" (AA na bieli) */
  --c-closed: #B23A2E;  /* PLACEHOLDER — czerwony „zamknięte" (AA na bieli) */

  /* GRADIENTY */
  --g-hero:   linear-gradient(180deg, var(--c-sea-mid) 0%, var(--c-white) 100%);
  --g-accent: linear-gradient(135deg, var(--c-sea-light) 0%, var(--c-white) 70%);

  /* MIĘKKIE PLAMY / TINTY — dają lekkość, nie robią z sekcji „niebieskiego tła" */
  --g-paper:  linear-gradient(180deg, var(--c-white) 0%, var(--c-paper) 100%);
  --wash-tr:  radial-gradient(90% 70% at 100% 0%, rgba(127,197,212,0.20), transparent 62%);
  --wash-bl:  radial-gradient(80% 70% at 0% 100%, rgba(127,197,212,0.18), transparent 60%);
  --wash-warm: radial-gradient(70% 60% at 100% 100%, rgba(232,163,61,0.12), transparent 60%);

  /* ---- TYPOGRAFIA ---- */
  --f-display: "TODO Display", system-ui, sans-serif; /* krój z logo Relax — do ustalenia */
  --f-body:    "Poppins", system-ui, sans-serif;

  --fs-hero:  clamp(2.5rem, 7vw, 5rem);
  --fs-h2:    clamp(1.75rem, 4vw, 3rem);
  --fs-h3:    clamp(1.25rem, 2.5vw, 1.75rem);
  --fs-body:  1rem;
  --fs-small: 0.875rem;

  --lh-tight:  1.05;
  --lh-normal: 1.6;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-semibold: 600;
  /* Bold jest wymagany przez kontrast, nie przez estetykę: czerwień marki na
     bieli daje 4,41:1, więc przechodzi AA tylko jako „tekst duży" — a duży
     zaczyna się od 18,66 px PRZY WADZE 700. Przy self-hostingu Poppinsa
     (sekcja 6) dorzucić plik 700, inaczej przeglądarka pogrubi syntetycznie. */
  --fw-bold:     700;

  /* ---- ODSTĘPY (skala 8px) ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 64px;
  --s-8: 96px;
  --s-9: 128px;

  /* ---- LAYOUT ---- */
  --content-max: 1200px;
  --r-dish:      3 / 2;    /* proporcja zdjęcia dania — zgodna z plikami menu-*.webp (1200×800) */
  --radius:      14px;
  --radius-sm:   8px;
  --header-h:    58px;

  --shadow-soft: 0 6px 24px rgba(18, 36, 46, 0.08);
  --shadow-card: 0 2px 12px rgba(18, 36, 46, 0.06);

  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --dur:        260ms;
}