/* ===========================
   BB Tokens CSS

   =========================== */

:root {
  /* ===========================
     COLORS
     =========================== */
  --bb-bg: #fff;
  --bb-fg: #111;
  --bb-black: #000;
  --bb-muted: rgba(17, 17, 17, .68);
  --bb-line: rgba(17, 17, 17, .14);
  --bb-light-gray: #f5f5f5;
  --bb-medium-gray: #e8e8e8;

  /* ===========================
     LAYOUT
     =========================== */
  --bb-max: 1720px;
  --bb-gutter: clamp(14px, 2.2vw, 28px);
  --bb-section-padding: clamp(40px, 6vw, 80px);

  /* ===========================
     TYPOGRAPHY
     =========================== */
  --bb-body: 14px;
  --bb-small: 12px;
  --bb-tiny: 10px;
  --bb-h1: clamp(22px, 2.2vw, 34px);
  --bb-h2: clamp(18px, 1.6vw, 24px);
  --bb-h3: clamp(14px, 1.4vw, 18px);

  /* Line heights */
  --bb-lh-tight: 1.2;
  --bb-lh-normal: 1.5;
  --bb-lh-relaxed: 1.6;

  /* Letter spacing */
  --bb-ls-tight: 0.02em;
  --bb-ls-normal: 0.05em;
  --bb-ls-wide: 0.08em;

  /* ===========================
     BORDERS & RADIUS
     =========================== */
  --bb-radius: 999px;
  --bb-radius-small: 4px;

  /* ===========================
     TRANSITIONS
     =========================== */
  --bb-transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --bb-transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --bb-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ===========================
     Z-INDEX SYSTEM
     =========================== */
  --bb-z-base: 1;
  --bb-z-dropdown: 100;
  --bb-z-sticky: 200;
  --bb-z-overlay: 300;
  --bb-z-offcanvas: 400;
  --bb-z-modal: 500;

  /* ===========================
     HEADER
     =========================== */
  --bb-topbar-height: 32px;
  --bb-header-height: clamp(60px, 8vw, 80px);

  /* ===========================
     OFFCANVAS
     =========================== */
  --bb-offcanvas-width: clamp(320px, 90vw, 480px);
}