/* AquaJoy v2 tokens. Jeden system: biel, szarości R=G=B, czerń na przyciskach.
   Kolor marki (turkus z logo) żyje tylko w logo, zdjęciach, filmie i motywie fali. */

:root {
  /* Kolor */
  --c-bg: #ffffff;
  --c-bg-2: #f6f6f6;
  --c-bg-3: #efefef;
  --c-line: #eaeaea;
  --c-line-field: #d4d4d4;
  --c-line-hover: #999999;
  --c-fg: #111111;
  --c-fg-2: #555555;
  /* Meta. #8a8a8a z systemu ma 3.4:1 na bieli, poniżej AA dla 13-14 px,
     a projekt ma test kontrastu. #6b6b6b daje 5.3:1 na bieli i 4.9:1 na #f6f6f6. */
  --c-fg-3: #6b6b6b;
  --c-inverse: #ffffff;
  --c-btn-hover: #333333;
  --c-ok: #0f7b3f;
  --c-ok-bg: #edf7f0;
  --c-warn: #9a5000;
  --c-warn-bg: #fdf4e7;
  --c-err: #d81119;
  --c-err-bg: #fdeeee;
  --c-focus: #111111;

  /* Marka: wyłącznie logo, zdjęcia i motyw fali. Nigdy przyciski, nagłówki, ikony, liczby. */
  --c-brand-aqua: #00f6d5;
  --c-brand-aqua-2: #9ffbee;
  --c-brand-teal: #004e64;

  /* Pismo */
  --f-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-features: "cv11", "ss01", "ss03";

  --t-display: clamp(2.5rem, 1.66rem + 3.73vw, 4rem);     /* 40 -> 64 */
  --t-h1: clamp(2.25rem, 1.69rem + 2.49vw, 3.25rem);      /* 36 -> 52, podstrony */
  --t-h2: clamp(1.75rem, 1.47rem + 1.24vw, 2.25rem);      /* 28 -> 36 */
  --t-h3: clamp(1.125rem, 1.08rem + 0.21vw, 1.25rem);     /* 18 -> 20 */
  --t-lead: clamp(1.0625rem, 1rem + 0.28vw, 1.25rem);     /* 17 -> 20 */
  --t-body: 1.0625rem;                                    /* 17 */
  --t-ui: 0.9375rem;                                      /* 15 */
  --t-sm: 0.875rem;                                       /* 14 */
  --t-meta: 0.8125rem;                                    /* 13 */

  --lh-display: 1.02;
  --lh-head: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.6;

  --tr-display: -0.035em;
  --tr-h2: -0.025em;
  --tr-h3: -0.012em;
  --tr-ui: -0.006em;

  /* Odstępy, baza 4 px */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  --section-y: 96px;
  --gutter: 24px;
  --maxw: 1200px;
  --maxw-text: 680px;
  --header-h: 64px;
  --dock-h: 60px;

  /* Kształt */
  --r-sm: 8px;      /* przyciski, pola, obrazy w kartach */
  --r-md: 12px;     /* karty, kadry */
  --r-lg: 16px;     /* modal, szuflada */
  --r-pill: 999px;  /* tylko plakietki statusu i kropki */

  /* Cień wyłącznie na warstwie nad treścią (menu, szuflada, przyklejony pasek) */
  --sh-overlay: 0 12px 32px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  --sh-float: 0 4px 16px rgba(0, 0, 0, 0.06);

  /* Ruch */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-std: cubic-bezier(0.2, 0, 0, 1);
  --d-fast: 160ms;
  --d-med: 260ms;
  --d-slow: 600ms;

  --z-header: 100;
  --z-dock: 90;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
}

@media (max-width: 767px) {
  :root {
    --section-y: 64px;
    --gutter: 16px;
    --header-h: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 1ms;
    --d-med: 1ms;
    --d-slow: 1ms;
  }
}

/* LEGACY. Stare nazwy zostają tylko dla panel.css (/basen) i miejsc jeszcze
   nieprzepisanych. W nowym CSS używaj wyłącznie tokenów wyżej. */
:root {
  --aj-aqua: #00f6d5;
  --aj-aqua-deep: #00d6b9;
  --aj-cyan: #00ffff;
  --aj-teal: #004e64;
  --aj-teal-600: #013d4f;
  --aj-teal-300: #0d7396;
  --aj-ink: #0a1128;
  --aj-blue: #1d4e89;
  --aj-sun: #fdc500;
  --aj-sun-deep: #e0ac00;
  --aj-white: #ffffff;
  --aj-surface: #f5f9fa;
  --aj-surface-2: #eaf2f4;
  --aj-line: #dbe6e9;
  --aj-line-soft: #edf3f5;
  --aj-line-strong: #758c94;
  --aj-star: #b07d00;
  --aj-muted: #5b6b73;
  --aj-muted-soft: #63737d;
  --aj-bg: var(--aj-white);
  --aj-fg: var(--aj-ink);
  --aj-accent: var(--aj-teal);
  --aj-ok: #0d7a54;
  --aj-warn: #aa6400;
  --aj-err: #c02b2b;
  --aj-grad-deep: linear-gradient(160deg, #0a1128 0%, #013d4f 55%, #004e64 100%);
  --aj-grad-aqua: linear-gradient(120deg, var(--aj-aqua) 0%, var(--aj-cyan) 100%);
  --aj-grad-sun: linear-gradient(120deg, #ffd633 0%, var(--aj-sun) 100%);
  --aj-grad-surface: linear-gradient(180deg, #ffffff 0%, var(--aj-surface) 100%);
  --aj-font-display: var(--f-sans);
  --aj-font-body: var(--f-sans);
  --aj-fs-xs: 0.8125rem;
  --aj-fs-sm: 0.9375rem;
  --aj-fs-base: clamp(1rem, 0.96rem + 0.19vw, 1.0625rem);
  --aj-fs-lg: clamp(1.125rem, 1.05rem + 0.32vw, 1.25rem);
  --aj-fs-xl: clamp(1.3rem, 1.17rem + 0.56vw, 1.5rem);
  --aj-fs-2xl: clamp(1.6rem, 1.36rem + 1.05vw, 2.1rem);
  --aj-fs-3xl: clamp(2rem, 1.55rem + 1.95vw, 3rem);
  --aj-fs-4xl: clamp(2.4rem, 1.63rem + 3.35vw, 4rem);
  --aj-lh-tight: 1.08;
  --aj-lh-snug: 1.24;
  --aj-lh-base: 1.65;
  --aj-track-tight: -0.028em;
  --aj-track-snug: -0.018em;
  --aj-track-wide: 0.08em;
  --aj-1: 0.25rem;
  --aj-2: 0.5rem;
  --aj-3: 0.75rem;
  --aj-4: 1rem;
  --aj-5: 1.5rem;
  --aj-6: 2rem;
  --aj-7: 2.5rem;
  --aj-8: 3rem;
  --aj-9: 4rem;
  --aj-10: 5rem;
  --aj-11: 6.5rem;
  --aj-12: 8rem;
  --aj-section-y: clamp(3.5rem, 2.2rem + 5.6vw, 7rem);
  --aj-gutter: clamp(1.15rem, 0.7rem + 1.9vw, 2rem);
  --aj-maxw: 1200px;
  --aj-maxw-narrow: 720px;
  --aj-maxw-wide: 1400px;
  --aj-r-sm: 8px;
  --aj-r: 14px;
  --aj-r-lg: 20px;
  --aj-r-xl: 28px;
  --aj-r-2xl: 36px;
  --aj-r-pill: 999px;
  --aj-sh-xs: 0 1px 2px rgba(10, 17, 40, 0.06);
  --aj-sh-sm: 0 2px 8px rgba(10, 17, 40, 0.06), 0 1px 2px rgba(10, 17, 40, 0.04);
  --aj-sh: 0 8px 24px rgba(1, 61, 79, 0.08), 0 2px 6px rgba(10, 17, 40, 0.04);
  --aj-sh-lg: 0 18px 48px rgba(1, 61, 79, 0.12), 0 4px 12px rgba(10, 17, 40, 0.05);
  --aj-sh-xl: 0 32px 80px rgba(1, 61, 79, 0.16), 0 8px 20px rgba(10, 17, 40, 0.06);
  --aj-sh-aqua: 0 12px 32px rgba(0, 246, 213, 0.28);
  --aj-sh-sun: 0 12px 30px rgba(253, 197, 0, 0.32);
  --aj-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --aj-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --aj-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --aj-t-fast: var(--d-fast);
  --aj-t: var(--d-med);
  --aj-t-slow: 520ms;
  --aj-header-h: var(--header-h);
  --aj-z-header: 100;
  --aj-z-drawer: 200;
  --aj-z-modal: 300;
  --aj-z-toast: 400;
}