/* @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200;400;700&family=Roboto:wght@100;300;400;500;700&display=swap'); */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* Dynamic Color Design Tokens */
:root {
    --primary-color: #04868b;
    --primary-light: #7eb535;
    --primary-green: #89b14f;
    --primary-hover: #7ab22f;
    --secondary-blue: #1e73be;
    --secondary-red: #e8112b;
    --secondary-red-hover: #d00f27;
    --dark-bg: #040404;
    --text-color-dark: #333333;
    --text-color-light: #b4b4b4;
    --white: #ffffff;
    --light-bg: #f9fafb;
    --border-color: rgba(0, 0, 0, 0.1);
    --glass-bg-primary: rgba(4, 134, 139, 0.1);
    --glass-bg-secondary: rgba(30, 115, 190, 0.1);
}

/* Base Resets */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--text-color-dark);
    background-color: var(--white);
    -webkit-font-smoothing: antialiased;
}

/* Typography & Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', serif !important;
    font-weight: normal;
    line-height: 1.3;
    color: #111111;
}

a {
    color: var(--primary-green);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--primary-hover);
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* Scrollbar styles */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #555;
}