/* Non-overridable tokens — compiled statically */
@theme {
  /* Z-index */
  --z-index-overlay: 999;

  /* Spacing (also powers w-*, h-*, min-w-*, min-h-*, size-*) */
  --spacing-content-width: 650px;

  --spacing-toolbox-btn: 26px;
  --spacing-toolbox-btn-mobile: 36px;
  --spacing-icon: 20px;
  --spacing-icon-mobile: 28px;
  --spacing-block-padding-vertical: 0.4em;

  /* Max-width */
  --max-width-content: 720px;

  /* Font family */
  --font-mono: var(--blok-font-mono, 'JetBrains Mono', 'Fira Code', ui-monospace, Menlo, Monaco, 'Courier New', monospace);

  /* Box shadows */
  --shadow-overlay-pane: 0 3px 15px -3px rgba(13, 20, 33, 0.13);
  --shadow-tool-icon: 0 0 0 1px #eff0f1;
  --shadow-tooltip: 0 8px 12px 0 rgba(29, 32, 43, 0.17), 0 4px 5px -3px rgba(5, 6, 12, 0.49);
  --shadow-notify: 0 11px 17px 0 rgba(23, 32, 61, 0.13);
  --shadow-button-focused: inset 0 0 0 1px rgba(7, 161, 227, 0.08);
  --shadow-input: inset 0 1px 2px 0 rgba(35, 44, 72, 0.06);
  --shadow-button-base: 0 2px 2px 0 rgba(18, 30, 57, 0.04);
  --shadow-button-base-hover: 0 1px 3px 0 rgba(18, 30, 57, 0.08);
  --shadow-demo-btn: 0 22px 18px -4px rgba(137, 207, 255, 0.77);
  --shadow-demo-btn-hover: 0 20px 15px -4px rgba(137, 207, 255, 0.77);
  --shadow-demo-btn-primary: 0 7px 8px -4px rgba(137, 207, 255, 0.77);
  --shadow-demo-dark-btn: 0 24px 18px -14px rgba(4, 154, 255, 0.24);

  /* Animations */
  --animate-fade-in: fade-in 300ms ease forwards;
  --animate-bounce-in: bounceIn 0.75s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
  --animate-selection-bounce: selectionBounce 0.75s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
  --animate-button-clicked: buttonClicked 0.75s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
  --animate-wobble: wobble 400ms;
  --animate-rotation: rotation 1.2s infinite linear;
  --animate-notify-bounce-in: notifyBounceIn 600ms 1;
  --animate-notify-slide-in: notifySlideIn 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
  --animate-notify-slide-out: notifySlideOut 250ms cubic-bezier(0.4, 0, 1, 1) both;
  --animate-notify-slide-in-top: notifySlideInTop 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
  --animate-notify-slide-out-top: notifySlideOutTop 250ms cubic-bezier(0.4, 0, 1, 1) both;
  --animate-notify-swap-out: notifySwapOut 140ms cubic-bezier(0.4, 0, 1, 1) both;
  --animate-notify-progress: notifyProgress linear forwards;

  /* Keyframes */
  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes bounceIn {
    0% { transform: scale3d(0.9, 0.9, 0.9); }
    20% { transform: scale3d(1.03, 1.03, 1.03); }
    60%, 100% { transform: scale3d(1, 1, 1); }
  }

  @keyframes selectionBounce {
    0%, 100% { transform: scale3d(1, 1, 1); }
    50% { transform: scale3d(1.01, 1.01, 1.01); }
    70% { transform: scale3d(1, 1, 1); }
  }

  @keyframes buttonClicked {
    0% { transform: scale3d(0.95, 0.95, 0.95); }
    60% { transform: scale3d(1.02, 1.02, 1.02); }
    80%, 100% { transform: scale3d(1, 1, 1); }
  }

  @keyframes wobble {
    from { transform: translate3d(0, 0, 0); }
    15% { transform: translate3d(-9%, 0, 0); }
    30% { transform: translate3d(9%, 0, 0); }
    45% { transform: translate3d(-4%, 0, 0); }
    60% { transform: translate3d(4%, 0, 0); }
    75% { transform: translate3d(-1%, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
  }

  @keyframes rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  @keyframes notifyBounceIn {
    0% { opacity: 0; transform: scale(0.3); }
    50% { opacity: 1; transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); }
  }

  @keyframes notifySlideIn {
    0% { opacity: 0; transform: translateY(16px); }
    70% { opacity: 1; transform: translateY(-2px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  @keyframes notifySlideOut {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(8px); }
  }

  @keyframes notifySlideInTop {
    0% { opacity: 0; transform: translateY(-16px); }
    70% { opacity: 1; transform: translateY(2px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  @keyframes notifySlideOutTop {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-8px); }
  }

  @keyframes notifySwapOut {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.94); }
  }

  @keyframes notifyProgress {
    0% { width: 100%; }
    100% { width: 0%; }
  }
}