/* Load Roboto locally as a variable font */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Universal box-sizing reset and font application */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Default body text - use only Roboto */
html, body {
    font-family: 'Roboto' !important;
    font-weight: 400;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background-color: #fff;
    color: #333;
}

/* Headings - use only Roboto */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto' !important;
}

h1 {
    font-weight: 700;
    font-size: 2.5rem;
}

h2 {
    font-weight: 600;
    font-size: 2rem;
}

h3 {
    font-weight: 600;
    font-size: 1.75rem;
}

h4 {
    font-weight: 500;
    font-size: 1.5rem;
}

h5 {
    font-weight: 500;
    font-size: 1.25rem;
}

h6 {
    font-weight: 500;
    font-size: 1rem;
}

/* Paragraph - use only Roboto */
p {
    font-family: 'Roboto' !important;
    font-weight: 400;
    margin-bottom: 1em;
}

/* Small text - use only Roboto */
small {
    font-family: 'Roboto' !important;
    font-weight: 300;
    font-size: 0.875em;
}

/* Strong/bold text */
strong, b {
    font-weight: 700;
}

/* Italic */
em, i {
    font-style: italic;
}

/* Lists - use only Roboto */
ul, ol {
    font-family: 'Roboto' !important;
    font-weight: 400;
    padding-left: 2em;
}

li {
    margin-bottom: 0.5em;
}

/* Links - use only Roboto */
a {
    font-family: 'Roboto' !important;
    text-decoration: none;
    font-weight: 400;
}

a:hover {
    text-decoration: underline;
}

/* Buttons - use only Roboto */
button, input, select, textarea {
    font-family: 'Roboto' !important;
    font-weight: 400;
    font-size: 1rem;
}

/* Code/monospace - keep monospace for code */
code, pre {
    font-family: 'Courier New', monospace;
    background-color: #f5f5f5;
    padding: 0.2em 0.4em;
    border-radius: 3px;
}

/* Blockquote - use only Roboto */
blockquote {
    font-family: 'Roboto' !important;
    font-weight: 300;
    font-style: italic;
    border-left: 4px solid #ccc;
    padding-left: 1em;
    margin-left: 0;
    color: #666;
}

/* Additional specificity for common elements - use only Roboto */
div, span, label, th, td {
    font-family: 'Roboto' !important;
}