/* IMPORTS */
@import url("button.css");
@import url("text.css");

/* VARIABLES */
:root {
    /* box sizing */

    /* --- FONTS --- */

    /* families */
    --font-primary: 'Montserrat', sans-serif;
    --font-secondary: 'Roboto', sans-serif;
    --font-heading: 'Poppins', sans-serif;

    /* sizes */
    font-size: 20px;
    /* font-size: 16px;                Base font size */
    --font-size-base: 1rem;         /* Base font size (16px) */
    --font-size-sm: 0.875rem;       /* 14px */
    --font-size-md: 1.125rem;       /* 18px */
    --font-size-lg: 1.25rem;        /* 20px */
    --font-size-xl: 2rem;           /* 32px */
    --font-size-xxl: 3rem;          /* 48px */

    /* weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Line Heights */
    --line-height-base: 1.5;
    --line-height-heading: 1.25;
    line-height: var(--line-height-base);    /* Global line height */

    /* Letter Spacing */
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.1em;

    /* font presets */
    /* order: font-style (optional) font-variant (optional) font-weight font-size / line-height font-family */
    --font-body: var(--font-weight-regular) var(--font-size-base) / var(--line-height-base) var(--font-primary);
    --font-heading-1: var(--font-weight-bold) var(--font-size-xxl) / var(--line-height-heading) var(--font-heading);
    --font-heading-2: var(--font-weight-semibold) var(--font-size-xl) / var(--line-height-heading) var(--font-heading);
    --font-heading-3: var(--font-weight-medium) var(--font-size-lg) / var(--line-height-heading) var(--font-heading);
    --font-subheader: var(--font-weight-semibold) var(--font-size-md) / var(--line-height-base) var(--font-secondary);
    --font-button: var(--font-weight-medium) var(--font-size-sm) / var(--line-height-base) var(--font-primary);
    --font-link: var(--font-weight-regular) var(--font-size-base) / var(--line-height-base) var(--font-primary);

    /* --- COLORS --- */

    /* Primary Colors */
    --color-primary: #1a73e8;           /* Main brand color (blue) */
    --color-primary-light: #66aaff;     /* Lighter version of primary */
    --color-primary-dark: #005bb5;      /* Darker version of primary */
    
    /* Secondary Colors */
    --color-secondary: #f4b400;         /* Secondary accent color (yellow) */
    --color-secondary-light: #ffdb4d;   /* Lighter version of secondary */
    --color-secondary-dark: #c37a00;    /* Darker version of secondary */
    
    /* Tertiary Colors */
    --color-tertiary: #34a853;          /* Tertiary color (green) */
    --color-tertiary-light: #66d27b;
    --color-tertiary-dark: #0c7a34;

    /* Grays */
    --color-gray-lightest: #f5f5f5;
    --color-gray-lighter: #e0e0e0;
    --color-gray-light: #bdbdbd;
    --color-gray: #9e9e9e;              /* Neutral gray for text */
    --color-gray-dark: #616161;
    --color-gray-darkest: #424242;

    /* Text Colors */
    --color-text-primary: #333333;      /* Main text color */
    --color-text-secondary: #777777;    /* Secondary text color */
    --color-text-inverse: #ffffff;      /* Light text for dark backgrounds */

    /* Background Colors */
    --color-bg-primary: #ffffff;        /* White background */
    --color-bg-secondary: #f4f4f4;      /* Light gray background */
    --color-bg-tertiary: #f9f9f9;       /* Slightly lighter gray background */

    /* Border Colors */
    --color-border-light: #e0e0e0;
    --color-border-medium: #c7c7c7;
    --color-border-dark: #9e9e9e;

    /* Other UI Colors */
    --color-button-primary: var(--color-primary);
    --color-button-secondary: var(--color-secondary);
    --color-button-danger: #e53935; /* Red for errors or warnings */
    --color-link: #1a73e8; /* Color for links */
    --color-link-hover: #005bb5; /* Hover color for links */

    /* Gradients */

    /* State Colors */

    /* Alert Colors */
    --color-alert-standard: #007bff;
    --color-alert-default: #6c757d;
    --color-alert-success: #28a745;
    --color-alert-info: #17a2b8;
    --color-alert-warning: #ffc107;
    --color-alert-danger: #dc3545;

    /* --- BREAKPOINTS --- */
    --breakpoint-sm: 600px;         /* Small devices (portrait phones, less than 600px) */
    --breakpoint-md: 768px;         /* Medium devices (tablets, 600px and up) */
    --breakpoint-lg: 1024px;        /* Large devices (laptops/desktops, 1024px and up) */
    --breakpoint-xl: 1200px;        /* Extra large devices (large desktops, 1200px and up) */
    --breakpoint-xxl: 1400px;       /* Extra extra large devices (ultra widescreen, 1400px and up) */

    /* --- CUSTOM SCROLLBARS --- */

    /* --- SPACING --- */

    /* General spacing units */
    --space-xs: 0.25rem;    /* 4px */
    --space-sm: 0.5rem;     /* 8px */
    --space-md: 1rem;       /* 16px */
    --space-lg: 2rem;       /* 32px */
    --space-xl: 3rem;       /* 48px */
    --space-xxl: 4rem;      /* 64px */

    /* Element Specific Spacing */
    --page-edge-gap: var(--space-xxl);
    --section-padding: var(--space-lg);         /* Padding for sections */
    --subsection-padding: var(--space-md);      /* Padding for subsections */
    --card-padding: var(--space-sm);            /* Padding inside cards */
    --list-item-gap: var(--space-sm);           /* Gap between list items */
    --grid-gap: var(--space-md);                /* Gap between grid items */
    --flex-gap: var(--space-md);                /* Gap between flex items */
    --table-padding: var(--space-sm);           /* Padding inside table cells */

    /* --- BORDERS --- */
    /* Border Widths */
    --border-width-thin: 1px;
    --border-width-normal: 2px;
    --border-width-thick: 4px;

    /* Border Styles */
    --border-style-solid: solid;
    --border-style-dashed: dashed;
    --border-style-dotted: dotted;

    /* Border Radius */
    --border-radius-none: 0px;
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-xxl: 20px;
    --border-radius-half: 25px; 
    --border-radius-full: 50px;
    --border-radius-circle: 50%; /* for circular shapes */

    /* Border Colors */
    --border-color-primary: var(--color-primary); /* or define a custom primary border color */
    --border-color-secondary: var(--color-secondary);
    --border-color-light: rgba(255, 255, 255, 0.3);
    --border-color-dark: rgba(0, 0, 0, 0.3);

    /* Border Presets */
    --border-default: var(--border-width-normal) var(--border-style-solid) var(--border-color-primary);
    --border-thick: var(--border-width-thick) var(--border-style-solid) var(--border-color-secondary);
    --border-dashed: var(--border-width-normal) var(--border-style-dashed) var(--border-color-light);
    --border-rounded: var(--border-width-normal) var(--border-style-solid) var(--border-color-dark);
    --border-circle: var(--border-width-thick) var(--border-style-solid) var(--border-color-primary);
    --border-no-radius: var(--border-width-thin) var(--border-style-solid) var(--border-color-light);
}

/* GLOBAL RESETS */
*, ::before, ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    vertical-align: top; /* fixes vertical alignment issues caused in some browsers with inline-block elements */
}

html {

}

body {
    /* font-size: var(--font-size-base); */
    /* font-family: var(--font-main); */
    line-height: var(--line-height-base);
}

/* Remove default margin and padding from common block elements */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dd, figure {
    margin: 0;
    padding: 0;
}
h1 {
    font: var(--font-heading-1);
}
h2 {
    font: var(--font-heading-2);
}
h3 {
    font: var(--font-heading-3);
}

/* Remove default list styles */
ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Remove default blockquote styling */
blockquote {
    quotes: none;
}

/* Reset preformatted text style */
pre {
    white-space: pre-wrap;
}

/* Make sure links don't have any default underlines */
a {
    color: inherit;                 /* Remove default link color */
    text-decoration: none;          /* Remove default underline */
    cursor: pointer;                /* Make sure the cursor appears as a pointer when hovering over links */
}

table {
    border-collapse: collapse;      /* Ensures that table borders are collapsed into one */
    border-spacing: 0;              /* Removes any spacing between table cells */
    width: 100%;                    /* Ensures the table takes full width */
}

th, td {
    padding: 0;                    /* Remove default padding */
    border: 1px solid #ccc;     /* Optional: Add custom borders */
}

input, textarea, select, button {
    font-family: inherit;       /* Inherit the font from the parent element */
    font-size: inherit;         /* Inherit the font size from the parent element */
    /* border: 1px solid #ccc;   Remove any default borders (you can add your own later) */
    /* border: none; */
    margin: 0;                  /* Remove any default margins */
    padding: 0;                 /* Remove default padding */
    /* outline: none;              Remove focus outline */
}

img {
    border: none;
    max-width: 100%;            /* Ensure images scale with their container */
    height: auto;               /* Maintain the aspect ratio of the image */
    display: block;             /* Prevent unwanted space below images (inline element issue) */
}

/* MAIN */


/* BREAKPOINTS */
/* --breakpoint-sm: 600px;         Small devices (portrait phones, less than 600px) */
/* --breakpoint-md: 768px;         Medium devices (tablets, 600px and up) */
/* --breakpoint-lg: 1024px;        Large devices (laptops/desktops, 1024px and up) */
/* --breakpoint-xl: 1200px;        Extra large devices (large desktops, 1200px and up) */
/* --breakpoint-xxl: 1400px;       Extra extra large devices (ultra widescreen, 1400px and up) */

/* Ultra wide screens */
@media (max-width: 1400px) {
    :root {
        /* font-size: 24px; */
        font-size: 18px;
    }
}

/* Extra large screens */
@media (max-width: 1200px) {
    :root {
        /* font-size: 22px; */
        font-size: 16px;
    }
}

/* Laptops and larger */
@media (max-width: 1024px) {
    :root {
        /* font-size: 20px; */
        font-size: 14px;
    }
}

/* Tablets and larger */
@media (max-width: 768px) {
    :root {
        /* font-size: 18px; */
        font-size: 12px;
    }
}

/* Small devices (portrait phones, less than 600px) */
@media (max-width: 600px) {
    :root {
        /* font-size: 18px; */
        font-size: 10px;
    }
}