/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Space Mono", monospace;
}

:root {
    --voi-dark: #2C037A;
    --voi-light: #672ED9;
    /* Border radius values */
    --radius-sm: 2px;    /* For buttons, small elements */
    --radius-md: 4px;    /* For cards, medium-sized elements */
    --radius-lg: 8px;    /* For large containers */
    /* Background variations */
    --bg-light: #ffffff;
    --bg-alt: #f8f9fe;
    --bg-dark: #000000;
}

body {
    background: white;
    color: #1a1a1a;
    font-family: "Space Mono", monospace;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

/* Typography Styles */
h1, h2, h3, h4, h5, h6,
.hero-title,
.section-title,
.section-title-dark,
.numbers-title,
.feature-title,
.case-study-title {
    font-family: "Chakra Petch", sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Adjust specific text sizes and weights */
.hero-title {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hero-subtitle {
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* Global button styles */
.primary-btn {
    border-radius: var(--radius-sm);
}

/* Global card styles */
.card {
    border-radius: var(--radius-md);
}

/* Focus states */
:focus-visible {
    outline: 2px solid var(--voi-light);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--voi-light);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.carousel-dot:focus-visible {
    outline-offset: 4px;
}

.news-card:focus-visible {
    outline-offset: 8px;
}

/* Remove default focus styles when using mouse */
:focus:not(:focus-visible) {
    outline: none;
}