:root {
    --md-ref-typeface-brand: 'Inter', sans-serif;
    --md-ref-typeface-plain: 'Roboto', sans-serif;
}
:root {
    /* Color tokens */
    --md-sys-color-primary: #6750a4;
    --md-sys-color-on-primary: #ffffff;
    /* Typography tokens */
    --md-sys-typescale-headline-large-size: 2rem;
    --md-sys-typescale-headline-large-weight: 600;
    /* Shape tokens */
    --md-sys-shape-corner-medium: 12px;
}
:root {
    /* Primary colors */
    --md-sys-color-primary: #2563eb;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #dbeafe;
    --md-sys-color-on-primary-container: #1e3a8a;
    /* Secondary colors */
    --md-sys-color-secondary: #f97316;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #fed7aa;
    --md-sys-color-on-secondary-container: #9a3412;
    /* Surface colors */
    --md-sys-color-surface: #ffffff;
    --md-sys-color-on-surface: #111827;
    --md-sys-color-surface-variant: #f3f4f6;
    --md-sys-color-on-surface-variant: #4b5563;
}
:root {
    /* Display styles - for large, impactful text */
    --md-sys-typescale-display-large-size: 3.5rem;
    --md-sys-typescale-display-large-weight: 400;
    --md-sys-typescale-display-large-line-height: 1.12;
    --md-sys-typescale-display-medium-size: 2.8rem;
    --md-sys-typescale-display-small-size: 2.25rem;
    /* Headline styles - for section headers */
    --md-sys-typescale-headline-large-size: 2rem;
    --md-sys-typescale-headline-large-weight: 400;
    --md-sys-typescale-headline-medium-size: 1.75rem;
    --md-sys-typescale-headline-small-size: 1.5rem;
    /* Title styles - for component headers */
    --md-sys-typescale-title-large-size: 1.375rem;
    --md-sys-typescale-title-large-weight: 400;
    --md-sys-typescale-title-medium-size: 1rem;
    --md-sys-typescale-title-medium-weight: 500;
    --md-sys-typescale-title-small-size: 0.875rem;
    --md-sys-typescale-title-small-weight: 500;
    /* Body styles - for main content */
    --md-sys-typescale-body-large-size: 1rem;
    --md-sys-typescale-body-large-weight: 400;
    --md-sys-typescale-body-large-line-height: 1.5;
    --md-sys-typescale-body-medium-size: 0.875rem;
    --md-sys-typescale-body-small-size: 0.75rem;
    /* Label styles - for UI labels and captions */
    --md-sys-typescale-label-large-size: 0.875rem;
    --md-sys-typescale-label-large-weight: 500;
    --md-sys-typescale-label-medium-size: 0.75rem;
    --md-sys-typescale-label-small-size: 0.6875rem;
}

:root {
    /* Define custom fonts */
    --md-ref-typeface-brand: 'Inter', sans-serif;
    --md-ref-typeface-plain: 'Inter', sans-serif;
    /* Apply to typography scale */
    --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);
    --md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);
    --md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);
}

:root {
    --md-sys-shape-corner-small: 8px; /* Small components */
    --md-sys-shape-corner-medium: 12px; /* Medium components */
    --md-sys-shape-corner-large: 16px; /* Large components */
}

md-filled-button {
    --md-filled-button-container-shape: 8px;
    --md-filled-button-container-color: var(--md-sys-color-primary);
}

/* Apply to specific components */
md-filled-button {
    --md-filled-button-container-shape: var(--md-sys-shape-corner-small);
}

md-outlined-text-field {
    --md-outlined-text-field-container-shape: var(--md-sys-shape-corner-medium);
}

/* Custom shapes for specific use cases */
.rounded-buttons md-filled-button {
    --md-filled-button-container-shape: 24px; /* Fully rounded */
}

.square-buttons md-filled-button {
    --md-filled-button-container-shape: 0px; /* Square corners */
}

/* Filled Button */
md-filled-button {
    --md-filled-button-container-color: #2563eb;
    --md-filled-button-label-text-color: #ffffff;
    --md-filled-button-container-shape: 8px;
    --md-filled-button-label-text-weight: 500;
}

/* Outlined Button */
md-outlined-button {
    --md-outlined-button-outline-color: #2563eb;
    --md-outlined-button-label-text-color: #2563eb;
    --md-outlined-button-outline-width: 2px;
    --md-outlined-button-container-shape: 8px;
}

/* Custom button variants */
md-filled-button.success {
    --md-filled-button-container-color: #10b981;
    --md-filled-button-label-text-color: #ffffff;
}

md-filled-button.danger {
    --md-filled-button-container-color: #ef4444;
    --md-filled-button-label-text-color: #ffffff;
}

/* Outlined Text Field */
md-outlined-text-field {
    --md-outlined-text-field-container-shape: 8px;
    --md-outlined-text-field-outline-width: 2px;
    --md-outlined-text-field-outline-color: #d1d5db;
    --md-outlined-text-field-focus-outline-color: #2563eb;
}

/* Filled Text Field */
md-filled-text-field {
    --md-filled-text-field-container-color: #f3f4f6;
    --md-filled-text-field-container-shape: 8px 8px 0 0;
}

/* Dark theme colors */
:root {
    --md-sys-color-primary: #d0bcff;
    --md-sys-color-on-primary: #381e72;
    --md-sys-color-primary-container: #4f378b;
    --md-sys-color-on-primary-container: #eaddff;
    --md-sys-color-secondary: #ccc2dc;
    --md-sys-color-on-secondary: #332d41;
    --md-sys-color-secondary-container: #4a4458;
    --md-sys-color-on-secondary-container: #e8def8;
    --md-sys-color-surface: #10131a;
    --md-sys-color-on-surface: #e6e0e9;
    --md-sys-color-surface-variant: #49454f;
    --md-sys-color-on-surface-variant: #cab6d0;
    --md-sys-color-outline: #938f99;
    --md-sys-color-outline-variant: #49454f;
}

    /* Light theme override */
    :root.light-theme {
        --md-sys-color-primary: #6750a4;
        --md-sys-color-on-primary: #ffffff;
        --md-sys-color-primary-container: #eaddff;
        --md-sys-color-on-primary-container: #21005d;
        --md-sys-color-surface: #fffbfe;
        --md-sys-color-on-surface: #1c1b1f;
        --md-sys-color-surface-variant: #e7e0ec;
        --md-sys-color-on-surface-variant: #49454f;
    }

body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.section {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Ensure sufficient contrast ratios */
:root {
    /* High contrast for text */
    --md-sys-color-on-surface: #000000; /* Black text on light surface */
    --md-sys-color-on-primary: #ffffff; /* White text on colored background */
}

/* Focus indicators */
md-filled-button:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

/* Fallback colors for older browsers */
:root {
    --md-sys-color-primary: #6750a4;
    background-color: #ffffff; /* Fallback */
    background-color: var(--md-sys-color-surface); /* Enhanced */
}

/* Good: Use system tokens */
.custom-card {
    background-color: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
    border-radius: var(--md-sys-shape-corner-medium);
}

/* Avoid: Hard-coded values */
.custom-card {
    background-color: #f5f5f5; /* Don't do this */
    color: #333333; /* Don't do this */
    border-radius: 12px; /* Don't do this */
}

/* Minimize custom property lookups */
.optimized-component {
    --local-primary: var(--md-sys-color-primary);
    background-color: var(--local-primary);
    border-color: var(--local-primary);
}

/* Use CSS transitions for smooth theme changes */
* {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Document your custom tokens */
:root {
    /* Brand Colors - Updated: 2024-01-15 */
    --md-sys-color-primary: #2563eb; /* Brand Blue - Logo color */
    --md-sys-color-secondary: #f97316; /* Accent Orange - CTA color */
    /* Typography - Font stack priority */
    --md-ref-typeface-brand: 'Inter', 'Helvetica', sans-serif;
    /* Shapes - Design system v2.0 */
    --md-sys-shape-corner-small: 8px; /* Buttons, chips */
    --md-sys-shape-corner-medium: 12px; /* Cards, dialogs */
    --md-sys-shape-corner-large: 16px; /* Sheets, large containers */
}