/* styles.css */

/* Import FluentUI CSS */
@import url('https://cdnjs.cloudflare.com/ajax/libs/office-ui-fabric-core/11.0.0/css/fabric.min.css');

/* Light Theme */
/* This theme uses light colors for a bright and clean look */
body.light-theme {
    background-color: #ffffff; /* White background */
    color: #323130; /* Neutral primary color for text */
}

/* Dark Theme */
/* This theme uses dark colors for a modern and sleek look */
body.dark-theme {
    background-color: #1b1a19; /* Dark background */
    color: #f3f2f1; /* Light color for text */
}

/* Accessible Theme */
/* This theme uses high contrast colors for better accessibility */
body.accessible-theme {
    background-color: #000000; /* Black background */
    color: #ffffff; /* White color for text */
    font-size: 18px; /* Larger font size for readability */
}

/* Responsive Design */
/* Define breakpoints for different devices */

/* Extra Small Devices (Phones) */
/* FluentUI term: xSmall */
@media (max-width: 479px) {
    body {
        font-size: 14px; /* Smaller font size for phones */
    }
}

/* Small Devices (Tablets) */
/* FluentUI term: small */
@media (min-width: 480px) and (max-width: 639px) {
    body {
        font-size: 16px; /* Medium font size for tablets */
    }
}

/* Medium Devices (Laptops) */
/* FluentUI term: medium */
@media (min-width: 640px) and (max-width: 1023px) {
    body {
        font-size: 18px; /* Larger font size for laptops */
    }
}

/* Large Devices (Desktops) */
/* FluentUI term: large */
@media (min-width: 1024px) and (max-width: 1365px) {
    body {
        font-size: 20px; /* Even larger font size for desktops */
    }
}

/* Extra Large Devices (Large Desktops) */
/* FluentUI term: xLarge */
@media (min-width: 1366px) {
    body {
        font-size: 22px; /* Largest font size for large desktops */
    }
}

/* Additional Styling */
/* Add any additional styling here */