:root {
    /* Primary colors */
    --color-primary: #1a73e8;
    --color-primary-hover: #1557b0;
    --color-primary-light: #e8f0fe;

    /* Secondary colors */
    --color-secondary: #5f6368;
    --color-secondary-hover: #3c4043;

    /* Accent colors */
    --color-accent: #34a853;
    --color-accent-hover: #2d8e47;

    /* Background colors */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8f9fa;
    --color-bg-tertiary: #e8eaed;

    /* Text colors */
    --color-text-primary: #202124;
    --color-text-secondary: #5f6368;
    --color-text-tertiary: #80868b;

    /* Border colors */
    --color-border: #dadce0;
    --color-border-light: #e8eaed;

    /* Status colors */
    --color-success: #34a853;
    --color-warning: #fbbc04;
    --color-error: #ea4335;
    --color-info: #4285f4;
}

/* Apply theme colors */
.text-primary {
    color: var(--color-primary) !important;
}
.text-secondary {
    color: var(--color-secondary) !important;
}
.text-accent {
    color: var(--color-accent) !important;
}

.bg-primary {
    background-color: var(--color-primary) !important;
}

.border-primary {
    border-color: var(--color-primary) !important;
}

.hover\:text-primary:hover {
    color: var(--color-primary-hover) !important;
}

.hover\:bg-primary:hover {
    background-color: var(--color-primary-hover) !important;
}

/* Buttons */
.btn-primary {
    background-color: var(--color-primary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 500;
    transition: background-color 0.2s;
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-primary);
}

/* Cards */
.card {
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: 0.5rem;
    transition: box-shadow 0.3s;
}

.card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Links */
a.link-primary {
    color: var(--color-primary);
}

a.link-primary:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}
