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

/* PenguBOT brand tokens. Shared by the admin panel, the client portal and every public page.
   Only these colours are used anywhere: page, surface, border, two text greys and one lime accent. */
:root {
  --pb-bg: #111214;
  --pb-bg-end: #1B1D22;
  --pb-surface: #1B1D22;
  --pb-border: #34373E;
  --pb-text: #E6E6E6;
  --pb-text-muted: #9A9FA6;
  --pb-accent: #C8FF6C;
  --pb-accent-hover: #E0FFAE;
  --pb-accent-tint: rgba(200, 255, 108, 0.12);
  --pb-accent-line: rgba(200, 255, 108, 0.22);
  --pb-on-accent: #111214;
  --pb-radius: 12px;
  --pb-radius-pill: 999px;
  --pb-font: 'Inter', system-ui, sans-serif;
  --pb-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --pb-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
  --pb-ring: 0 0 0 3px rgba(200, 255, 108, 0.12);
  --pb-ease: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --pb-pitch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1052 682' fill='none' stroke='%23fff' stroke-opacity='.05' stroke-width='1.5'%3E%3Crect x='1' y='1' width='1050' height='680' rx='2'/%3E%3Cline x1='526' y1='1' x2='526' y2='681'/%3E%3Ccircle cx='526' cy='341' r='91.5'/%3E%3Ccircle cx='526' cy='341' r='3' fill='%23fff' fill-opacity='.05'/%3E%3Crect x='1' y='139.5' width='165' height='403'/%3E%3Crect x='1' y='249.5' width='55' height='183'/%3E%3Crect x='886' y='139.5' width='165' height='403'/%3E%3Crect x='996' y='249.5' width='55' height='183'/%3E%3Ccircle cx='111' cy='341' r='3' fill='%23fff' fill-opacity='.05'/%3E%3Ccircle cx='941' cy='341' r='3' fill='%23fff' fill-opacity='.05'/%3E%3Cpath d='M166 268.6A91.5 91.5 0 0 1 166 413.4M886 268.6A91.5 91.5 0 0 0 886 413.4'/%3E%3Cpath d='M1 11A10 10 0 0 0 11 1M1041 1A10 10 0 0 0 1051 11M1051 671A10 10 0 0 0 1041 681M11 681A10 10 0 0 0 1 671'/%3E%3C/svg%3E");
  color-scheme: dark;
}