@import 'tailwindcss';
@import '@nuxt/ui';
@import 'tw-animate-css';

/* Custom Colors */
@layer base {
  button,
  [role='button'] {
    @apply cursor-pointer;
  }

  :disabled,
  [disabled] {
    @apply cursor-not-allowed;
  }

  /* Define safe-area-insets as CSS custom properties for JavaScript access */
  :root {
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
  }

  /* Verhindere Scrolling auf html und body */
  html {
    overflow: hidden;
    margin: 0;
    padding: 0;
    height: 100dvh;
    height: 100vh; /* Fallback */
    width: 100%;
  }

  body {
    overflow: hidden;
    margin: 0;
    height: 100%;
    width: 100%;
    padding: 0;
  }

  #__nuxt {
    /* Volle Höhe des body */
    height: 100%;
    width: 100%;

    /* Safe-Area Paddings auf root element - damit ALLES davon profitiert */
    padding-top: var(--safe-area-inset-top);
    padding-bottom: var(--safe-area-inset-bottom);
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);

    box-sizing: border-box;
  }
}

@theme {
  --spacing-header: 3.5rem; /* 72px - oder dein Wunschwert */
}