/* Main CSS reset */
*, *::before, *::after {    /* traget all elements, before and after */
    box-sizing: border-box; /* makes it so the borders and padding are included in the total width and height of the elements  */
    margin: 0;              /* removes all internal spacing by the broswer defaults */
    padding: 0;             /* removes all internal spacing by the broswer defaults */
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

button, input, textarea, select {
    font: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

/*Main Design Variables */
:root {
    /* Main Site Colors */
    --background: #0F172A;
    --surface: #1E2B38;
    --surface-elevated: #273549;
    --border: #334155;
    --text-primary: #F1F5F9;
    --text-secondary: #D9D9D9;
    --text-muted: #94A3B8;
    --primary-emerald: #108881;
    --accent-teal: #14DBC6;
    --accent-blue: #3B82F6;
    --warning: #F59E0B;
    --error: #EF4444;
    --success: #22C55E;

    /* Default  Border radius */
    --radius-primary: 12px;
    --radius-secondary: 8px;
}

/*Gobal styling for the whole site*/
body {
    background-color: var(--background);
    color: var(--text-primary);
    font-family: Inter, Arial, Helvetica, sans-serif;
}