<script setup lang="ts">
import type { BreadcrumbItemType } from '@/types';
import { onMounted } from 'vue';
import Header from "@/components/Header.vue";
import {VApp} from "vuetify/components/VApp";

interface Props {
    breadcrumbs?: BreadcrumbItemType[];
}

withDefaults(defineProps<Props>(), {
    breadcrumbs: () => [],
});


</script>

<template>
    <Header />
    <slot />
</template>

<style>
:root {
    /* Colors */
    --primary: hsl(210, 100%, 50%);
    --primary-glow: hsl(210, 100%, 70%);
    --accent: hsl(30, 100%, 46%);
    --background: hsl(222, 84%, 5%);
    --foreground: hsl(210, 40%, 98%);
    --card: hsl(222, 84%, 8%);
    --card-foreground: hsl(210, 40%, 95%);
    --muted: hsl(217, 32%, 17%);
    --muted-foreground: hsl(215, 20%, 65%);
    --border: hsl(217, 32%, 17%);
    --destructive: hsl(0, 62%, 30%);
    --destructive-foreground: hsl(210, 40%, 98%);
    --secondary: hsl(217, 32%, 17%);
    --secondary-foreground: hsl(210, 40%, 98%);

    /* Gradients */
    --gradient-adventure: linear-gradient(
        135deg,
        hsl(210, 100%, 50%) 0%,
        white 49%,
        white 50%,
        hsl(30, 100%, 46%) 100%
    );
    --gradient-hero: linear-gradient(135deg, hsl(210 100% 15%), hsl(25 95% 25%));
    --gradient-accent: linear-gradient(135deg, hsl(30, 100%, 46%), hsl(210, 100%, 50%));

    /* Shadows */
    --shadow-intense: 0 25px 50px -12px hsl(210, 100%, 50% );
    --shadow-glow: 0 0 40px hsl(210, 100%, 70% );

    /* Transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background: var(--background);
    color: var(--foreground);
    line-height: 1.6;
    overflow-x: hidden;
}
</style>
