/* ============================================================
   Pepasport / Pepebike Design System — Tokens
   Adaptováno z Claude Design handoffu (pepebike-tokens.css).
   Single source of truth pro barvy, typografii, spacing,
   radii, shadows, motion.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Roboto:wght@400;500;700&display=swap');

:root {
    /* ---------- Brand greens ---------- */
    --pb-green:           #9dcd40;  /* primary anchor, focus ring base */
    --pb-green-dark:      #7db82f;  /* filled buttons, links, headings emphasis */
    --pb-green-darker:    #6ba526;  /* hover/pressed */
    --pb-green-light:     #b3dc5f;
    --pb-green-lighter:   #c9e67e;
    --pb-green-link:      #5ec115;
    --pb-tint-08:         rgba(157, 205, 64, 0.08);
    --pb-tint-12:         rgba(157, 205, 64, 0.12);
    --pb-tint-18:         rgba(157, 205, 64, 0.18);
    --pb-surface-mint:    #f7faef;
    --pb-border-mint:     #e3ecd0;

    /* ---------- Neutrals ---------- */
    --pb-ink-900:         #1a1a1a;
    --pb-ink-800:         #2c2c2c;
    --pb-ink-700:         #495057;
    --pb-ink-500:         #6c757d;
    --pb-ink-400:         #adb5bd;
    --pb-line:            #e5e7eb;
    --pb-line-soft:       rgba(0, 0, 0, 0.06);

    --pb-bg:              #ffffff;
    --pb-bg-50:           #fafafa;
    --pb-bg-100:          #f5f5f5;
    --pb-bg-page:         #f4f6f3;     /* admin page background */
    --pb-bg-row:          #fafbf6;     /* zebra / hover */

    /* ---------- Semantic ---------- */
    --pb-info-bg:         #eaf3fb;  --pb-info-fg:    #1565c0;
    --pb-warn-bg:         #fff5e6;  --pb-warn-fg:    #b45a00;
    --pb-success-bg:      #ecf6ed;  --pb-success-fg: #2e7d32;
    --pb-danger-bg:       #fdecec;  --pb-danger-fg:  #b71c1c;
    --pb-danger-strong:   #c62828;

    /* ---------- Type ---------- */
    --pb-font-display:    'Poppins', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --pb-font-body:       'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

    /* Fluid type scale (clamp) */
    --pb-fs-xs:           clamp(0.69rem, 0.66rem + 0.12vw, 0.75rem);   /* 11-12 */
    --pb-fs-sm:           clamp(0.78rem, 0.74rem + 0.15vw, 0.875rem);  /* 12.5-14 */
    --pb-fs-base:         clamp(0.875rem, 0.83rem + 0.18vw, 1rem);     /* 14-16 */
    --pb-fs-md:           clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem);   /* 15-17 */
    --pb-fs-lg:           clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem);    /* 17-20 */
    --pb-fs-xl:           clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);    /* 20-26 */
    --pb-fs-2xl:          clamp(1.5rem, 1.3rem + 0.9vw, 2rem);         /* 24-32 */
    --pb-fs-3xl:          clamp(1.625rem, 1.35rem + 1.2vw, 2.25rem);   /* 26-36 */

    --pb-lh-tight:        1.2;
    --pb-lh-snug:         1.3;
    --pb-lh-normal:       1.55;
    --pb-lh-relaxed:      1.7;

    --pb-tracking-tight:  -0.02em;
    --pb-tracking-cta:    0.04em;
    --pb-tracking-up:     0.10em;

    /* ---------- Spacing (4-px baseline) ---------- */
    --pb-s-1:  4px;   --pb-s-2:  8px;
    --pb-s-3: 12px;   --pb-s-4: 16px;
    --pb-s-5: 20px;   --pb-s-6: 24px;
    --pb-s-7: 28px;   --pb-s-8: 32px;
    --pb-s-10: 40px;  --pb-s-12: 48px;
    --pb-s-16: 64px;  --pb-s-20: 80px;

    /* ---------- Radii ---------- */
    --pb-r-xs:  6px;
    --pb-r-sm:  8px;
    --pb-r-md: 10px;
    --pb-r-lg: 12px;
    --pb-r-xl: 14px;
    --pb-r-2xl: 16px;
    --pb-r-pill: 50px;

    /* ---------- Shadows ---------- */
    --pb-shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
    --pb-shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.05);
    --pb-shadow-md: 0 2px 6px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.08);
    --pb-shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
    --pb-shadow-popover: 0 12px 48px rgba(0,0,0,0.15);

    /* ---------- Motion ---------- */
    --pb-ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --pb-dur-fast:    0.15s;
    --pb-dur-slow:    0.3s;

    /* ---------- Focus ring ---------- */
    --pb-focus-ring:  0 0 0 3px var(--pb-tint-18);

    /* ---------- Layout ---------- */
    --pb-sidebar-w:   256px;
    --pb-topbar-h:    68px;
}