@import 'custom-repeater.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: 'Campton';
    src: url('../fonts/CamptonLight.otf') format('opentype');
    font-weight: 300;
}@font-face {
    font-family: 'Campton';
    src: url('../fonts/CamptonBook.otf') format('opentype');
    font-weight: 400;
}
@font-face {
    font-family: 'Campton';
    src: url('../fonts/CamptonMedium.otf') format('opentype');
    font-weight: 500;
}

@font-face {
    font-family: 'Campton';
    src: url('../fonts/CamptonSemiBold.otf') format('opentype');
    font-weight: 600;
}

@font-face {
    font-family: 'Campton';
    src: url('../fonts/CamptonBold.otf') format('opentype');
    font-weight: 700;
}

@layer base {
    :root  {
        --background: 235 100% 100%;
        --foreground: 235 5% 10%;
        --card: 235 50% 100%;
        --card-foreground: 235 5% 15%;
        --popover: 235 100% 100%;
        --popover-foreground: 235 100% 10%;
        --primary: 235 52.4% 20.6%;
        --primary-foreground: 0 0% 100%;
        --secondary: 235 30% 90%;
        --secondary-foreground: 0 0% 0%;
        --muted: 197 30% 95%;
        --muted-foreground: 235 5% 40%;
        --accent: 197 30% 90%;
        --accent-foreground: 235 5% 15%;
        --destructive: 0 100% 50%;
        --destructive-foreground: 235 5% 100%;
        --border: 235 30% 82%;
        --input: 235 30% 50%;
        --ring: 235 52.4% 20.6%;
        --radius: 0.5rem;
    }
    .dark  {
        --background: 235 50% 10%;
        --foreground: 235 5% 100%;
        --card: 235 50% 10%;
        --card-foreground: 235 5% 100%;
        --popover: 235 50% 5%;
        --popover-foreground: 235 5% 100%;
        --primary: 235 52.4% 20.6%;
        --primary-foreground: 0 0% 100%;
        --secondary: 235 30% 20%;
        --secondary-foreground: 0 0% 100%;
        --muted: 197 30% 25%;
        --muted-foreground: 235 5% 65%;
        --accent: 197 30% 25%;
        --accent-foreground: 235 5% 95%;
        --destructive: 0 100% 50%;
        --destructive-foreground: 235 5% 100%;
        --border: 235 30% 50%;
        --input: 235 30% 50%;
        --ring: 235 52.4% 20.6%;
        --radius: 0.5rem;
    }

}
@layer base {
    * {
        @apply border-border;
    }

    body {
        @apply bg-background text-foreground;
    }
}