@import "tailwindcss";
@import "@nuxt/ui";

.red {
    border: 1px solid red;
}

.green {
    border: 1px solid green;
}

@layer utilities {
    .text-outline {
        -webkit-text-stroke: 1px black;
        color: gold;
    }

    .pxr {
        @apply px-4 sm:px-6 lg:px-8;
    }

    .pyr {
        @apply py-4 sm:py-6 lg:py-8;
    }

    .pr {
        @apply p-4 sm:p-6 lg:p-8;
    }
}

@theme static {
    --color-gimblet: oklch(74.37% 0.06969 91.48);
    --color-gimblet-50: oklch(97.851% 0.00669 97.351);
    --color-gimblet-100: oklch(95.198% 0.01238 91.52);
    --color-gimblet-200: oklch(90.103% 0.02653 90.109);
    --color-gimblet-300: oklch(84.858% 0.04176 91.748);
    --color-gimblet-400: oklch(79.678% 0.056 91.049);
    --color-gimblet-500: oklch(74.37% 0.06969 91.48);
    --color-gimblet-600: oklch(66.9% 0.08657 90.713);
    --color-gimblet-700: oklch(55.892% 0.07041 91.887);
    --color-gimblet-800: oklch(44.164% 0.05385 91.131);
    --color-gimblet-900: oklch(31.471% 0.0355 91.688);

    --color-driftwood: oklch(72% 0.065 228);
    --color-driftwood-50: oklch(97.5% 0.008 228);
    --color-driftwood-100: oklch(94.5% 0.015 228);
    --color-driftwood-200: oklch(88.8% 0.028 228);
    --color-driftwood-300: oklch(83% 0.042 228);
    --color-driftwood-400: oklch(77% 0.056 228);
    --color-driftwood-500: oklch(72% 0.065 228);
    --color-driftwood-600: oklch(63% 0.07 228);
    --color-driftwood-700: oklch(50% 0.06 228);
    --color-driftwood-800: oklch(38% 0.045 228);
    --color-driftwood-900: oklch(27% 0.03 228);


    --color-sapphire-50: oklch(97.5% 0.005 260);
    --color-sapphire-100: oklch(95.2% 0.01 260);
    --color-sapphire-200: oklch(90% 0.02 260);
    --color-sapphire-300: oklch(84% 0.035 260);
    --color-sapphire-400: oklch(78% 0.05 260);
    --color-sapphire-500: oklch(72% 0.065 260);
    --color-sapphire-600: oklch(65% 0.075 260);
    --color-sapphire-700: oklch(54% 0.06 260);
    --color-sapphire-800: oklch(42% 0.045 260);
    --color-sapphire-900: oklch(30% 0.03 260);

    --color-stone-50: oklch(98% 0.002 260);   /* lightest gray */
    --color-stone-100: oklch(94% 0.004 260);
    --color-stone-200: oklch(88% 0.006 260);
    --color-stone-300: oklch(80% 0.008 260);
    --color-stone-400: oklch(70% 0.01 260);
    --color-stone-500: oklch(60% 0.012 260);  /* true neutral gray */
    --color-stone-600: oklch(48% 0.012 260);
    --color-stone-700: oklch(36% 0.01 260);
    --color-stone-800: oklch(26% 0.008 260);
    --color-stone-900: oklch(16% 0.006 260);  /* darkest gray */


    --color-clay-50: oklch(96% 0.008 35);
    --color-clay-100: oklch(92% 0.015 35);
    --color-clay-200: oklch(86% 0.03 35);
    --color-clay-300: oklch(80% 0.05 35);
    --color-clay-400: oklch(74% 0.07 35);
    --color-clay-500: oklch(70% 0.08 35);
    --color-clay-600: oklch(62% 0.09 35);
    --color-clay-700: oklch(50% 0.07 35);
    --color-clay-800: oklch(38% 0.05 35);
    --color-clay-900: oklch(28% 0.035 35);


    --color-sandstone-50: oklch(98% 0.003 85);
    --color-sandstone-100: oklch(96% 0.006 85);
    --color-sandstone-200: oklch(92% 0.012 85);
    --color-sandstone-300: oklch(87% 0.02 85);
    --color-sandstone-400: oklch(80% 0.03 85);
    --color-sandstone-500: oklch(72% 0.035 85);
    --color-sandstone-600: oklch(63% 0.03 85);
    --color-sandstone-700: oklch(50% 0.025 85);
    --color-sandstone-800: oklch(38% 0.02 85);
    --color-sandstone-900: oklch(26% 0.015 85);
}

:root {
    --ui-radius: 0rem;
}

html {
    scroll-behavior: smooth;
    font-family: Roboto, Arial, sans-serif;
}