:root {
    /* Colors */
    --ui-brand-blue: #1F91D4;
    --ui-brand-blue-dark: #1a7ab8;
    --ui-brand-blue-light: #e8f4fb;
    --ui-accent-color: #f59e0b;
    --ui-bg-primary: #f8fafc;
    --ui-body-text: #334155;
    --ui-footer-bg: #0f172a;
    --ui-footer-link: #cbd5e1;
    --ui-footer-link-hover: #ffffff;
    --ui-header-link: #475569;
    --ui-header-link-hover: #1F91D4;

    /* Typography Defaults */
    --typo-h1-size: 3.5rem;
    --typo-h2-size: 2.5rem;
    --typo-h3-size: 1.75rem;
    --typo-body-size: 1.125rem;
    --typo-h1-color: #334155;
    --typo-headings-weight: 900;
    --typo-heading-font: 'Inter', sans-serif;
    --typo-body-font: 'Inter', sans-serif;
    --typo-heading-spacing: -0.025em;
    
    /* Component Tokens */
    --card-radius: 0.5rem;
    --btn-radius: 0.5rem;
    --btn-px: 1.5rem;
    --btn-py: 0.75rem;
    --btn-case: uppercase;
    
    /* Layout Tokens */
    --ui-max-width: 1280px;
    --ui-section-spacing: 5rem;
    --ui-card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

body {
    background-color: var(--ui-bg-primary);
    color: var(--ui-body-text);
    font-size: var(--typo-body-size);
    font-family: var(--typo-body-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container { max-width: var(--ui-max-width) !important; }

h1, h2, h3, h4, h5, h6, .h1-style, .h2-style, .h3-style {
    font-family: var(--typo-heading-font);
    letter-spacing: var(--typo-heading-spacing);
}

h1, .h1-style {
    font-size: calc(var(--typo-h1-size) * 0.75);
    line-height: 1.1;
    font-weight: var(--typo-headings-weight);
    color: var(--typo-h1-color);
}

h2, .h2-style {
    font-size: calc(var(--typo-h2-size) * 0.8);
    line-height: 1.2;
    font-weight: var(--typo-headings-weight);
    color: var(--ui-body-text);
}

h3, .h3-style {
    font-size: var(--typo-h3-size);
    font-weight: 700;
    color: var(--ui-body-text);
}

@media (min-width: 768px) {
    h1, .h1-style { font-size: var(--typo-h1-size); }
    h2, .h2-style { font-size: var(--typo-h2-size); }
}

.hero-bg {
    background-image: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)), url('https://picsum.photos/seed/drivon-hero/1920/1080');
}

.hero-bg h1, .hero-bg p { 
    color: #ffffff !important; 
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.rounded-lg, .rounded-md, .card-panel { 
    border-radius: var(--card-radius) !important; 
}

button, .btn, input, select, textarea {
    border-radius: var(--btn-radius) !important;
}

.bg-brand-blue.text-white {
    padding-left: var(--btn-px) !important;
    padding-right: var(--btn-px) !important;
    padding-top: var(--btn-py) !important;
    padding-bottom: var(--btn-py) !important;
    text-transform: var(--btn-case) !important;
    border-radius: var(--btn-radius) !important;
    font-weight: 700;
}

.section-padding {
    padding-top: calc(var(--ui-section-spacing) * 0.75);
    padding-bottom: calc(var(--ui-section-spacing) * 0.75);
}

@media (min-width: 768px) {
    .section-padding {
        padding-top: var(--ui-section-spacing);
        padding-bottom: var(--ui-section-spacing);
    }
}

.card-panel {
    box-shadow: var(--ui-card-shadow);
    background-color: white;
}

.toast.success { background-color: #22c55e; }
.toast.error { background-color: #ef4444; }