@tailwind base;
@tailwind components;
@tailwind utilities;
/*@import url('https://fonts.googleapis.com/css2?family=Zain:wght@200;300;400;700;800;900&display=swap');*/

body * {
    @apply transition-colors duration-300;
}

.light {
    --primary: 30,116,141;
    --primary-text: 32, 59, 82;
    --secondary: 218,217,224;
    --accent: 22, 245, 238;
    --card: 248, 248, 248;
    --card-child: 248, 248, 248;
    --card-header: 32, 59, 82;
    --header: 248, 248, 248;
    --header_text: 28, 28, 28;
    --header-hover: 32, 59, 82;
    --body-background: 255, 255, 255;
    --link-color: 32,59,82;
    --progress-good:  89,242,28;
    --progress-okay: 238,160,113;
    --progress-bad: 246,106,106;

    /* Student progress reporting. Marks are held to 3:1 against the surface and
       the accompanying text to 4.5:1; the amber mark is deliberately below 3:1,
       so a status is always paired with an icon and a label, never colour alone.
       Dark values are stepped for the dark surface, not flipped.
       Space separated, not comma separated: these are consumed as
       rgb(var(--token) / <alpha>), which is only valid CSS in the modern
       space-separated form. */
    --status-good: 12 163 12;
    --status-warning: 250 178 25;
    --status-critical: 208 59 59;
    --status-good-text: 0 99 0;
    --status-warning-text: 138 90 0;
    --status-critical-text: 185 28 28;
    --meter-fill: 42 120 214;
    --meter-track: 205 226 251;
    background: rgba(var(--body-background));
}

.dark {
    --primary: 30,116,141;
    --primary-text: 218, 218, 218;
    --secondary: 218,217,224;
    --accent: 22, 245, 238;
    --card: 32, 59, 82;
    --card-child: 15, 23, 41;
    --card-header: 255, 255, 255;
    --header: 32, 59, 82;
    --header-text: 218,217,224;
    --header-hover: 218,217,224;
    --body-background: 15, 23, 41;
    --link-color: 30, 116, 141;
    --progress-good: 89,242,28;
    --progress-okay: 238,160,113;
    --progress-bad: 246,106,106;

    --status-good: 12 163 12;
    --status-warning: 250 178 25;
    --status-critical: 208 59 59;
    --status-good-text: 74 222 128;
    --status-warning-text: 252 211 77;
    --status-critical-text: 252 165 165;
    --meter-fill: 57 135 229;
    --meter-track: 13 54 107;
    background: rgb(var(--body-background));
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */


@font-face {
    font-family: 'Zain';
    src: url(/fonts/Zain/Zain-Regular.ttf) format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Zain';
    src: url(/fonts/Zain/Zain-Bold.ttf) format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Zain';
    src: url(/fonts/Zain/Zain-Black.ttf) format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Zain';
    src: url(/fonts/Zain/Zain-ExtraBold.ttf) format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Zain';
    src: url(/fonts/Zain/Zain-ExtraLight.ttf) format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Zain';
    src: url(/fonts/Zain/Zain-Light.ttf) format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Zain';
    src: url(/fonts/Zain/Zain-Italic.ttf) format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Zain';
    src: url(/fonts/Zain/Zain-LightItalic.ttf) format('truetype');
    font-weight: 300;
    font-style: italic;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */