:root {
    --theme-background: #F5F5F5;
    --theme-badge-error-bg: #DBEAFE;
    --theme-badge-error-text: #1E40AF;
    --theme-badge-info-bg: #DBEAFE;
    --theme-badge-info-text: #1E40AF;
    --theme-badge-success-bg: #DBEAFE;
    --theme-badge-success-text: #1E40AF;
    --theme-badge-warning-bg: #DBEAFE;
    --theme-badge-warning-text: #1E40AF;
    --theme-border: #EFEDED;
    --theme-border-hover: #d7d5d5;
    --theme-button-disabled: #E5E3DF;
    --theme-button-primary: #0876DC;
    --theme-button-primary-active: #0764bb;
    --theme-button-primary-hover: #076ac6;
    --theme-button-secondary: #64544D;
    --theme-button-secondary-active: #554741;
    --theme-button-secondary-hover: #5a4c45;
    --theme-button-text: #FFFFFF;
    --theme-card-background: #ffffff;
    --theme-card-hover-background: #F9F7F4;
    --theme-card-hover-border: #bfbebe;
    --theme-card-text-light: #ffffff;
    --theme-card-text-white: #ffffff;
    --theme-error: #DC3545;
    --theme-footer-background: #073A95;
    --theme-footer-link: #FFFFFF;
    --theme-footer-link-hover: #cccccc;
    --theme-footer-text: #ffffff;
    --theme-gradient-error-from: #8B5CF6;
    --theme-gradient-error-to: #4F46E5;
    --theme-gradient-info-from: #8B5CF6;
    --theme-gradient-info-to: #4F46E5;
    --theme-gradient-success-from: #8B5CF6;
    --theme-gradient-success-to: #221B93;
    --theme-gradient-warning-from: #8B5CF6;
    --theme-gradient-warning-to: #4F46E5;
    --theme-header-background: #FFFFFF;
    --theme-header-link: #0B0B0B;
    --theme-header-link-hover: #090909;
    --theme-header-text: #242424;
    --theme-input-focus-border: #8B2C2C;
    --theme-link: #1B7BEE;
    --theme-link-hover: #1769ca;
    --theme-primary: #217BE7;
    --theme-primary-hover: #1e6fd0;
    --theme-secondary: #0667DB;
    --theme-secondary-hover: #055dc5;
    --theme-success: #28A745;
    --theme-text: #333333;
    --theme-text-disabled: #9E9B95;
    --theme-warning: #FFC107;

    /* Typography */
    --theme-font-primary: 'Noto Sans JP', sans-serif;
    --theme-font-secondary: 'Noto Sans JP', sans-serif;
    --theme-font-size-xs: 1rem;
    --theme-font-size-sm: 1rem;
    --theme-font-size-base: 1rem;
    --theme-font-size-lg: 1rem;
    --theme-font-size-xl: 1rem;
    --theme-font-size-h1: 1.5rem;
    --theme-font-size-h2: 1.5rem;
    --theme-font-size-h3: 1.5rem;
    --theme-font-size-h4: 1.5rem;
    --theme-font-size-h5: 1.5rem;
    --theme-font-size-h6: 1.5rem;
    --theme-font-weight-h1: 600;
    --theme-font-weight-h2: 600;
    --theme-font-weight-h3: 600;
    --theme-font-weight-h4: 600;
    --theme-font-weight-h5: 600;
    --theme-font-weight-h6: 600;
    --theme-font-weight-light: 400;
    --theme-font-weight-normal: 400;
    --theme-font-weight-medium: 400;
    --theme-font-weight-semibold: 400;
    --theme-font-weight-bold: 400;
    --theme-line-height-tight: 1.5;
    --theme-line-height-snug: 1.5;
    --theme-line-height-normal: 1.5;
    --theme-line-height-relaxed: 1.5;
    --theme-line-height-loose: 1.5;
    --theme-letter-spacing-tighter: 0;
    --theme-letter-spacing-tight: 0;
    --theme-letter-spacing-normal: 0;
    --theme-letter-spacing-wide: 0;
    --theme-letter-spacing-wider: 0;

    /* Component Settings */
    --theme-radius-card: 0.75rem;
    --theme-radius-button: 0.375rem;
    --theme-shadow-base: 0 1px 3px 0 rgba(0,0,0,0.1);
    --theme-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
    --theme-transition-duration: 0.2s;
    --theme-transition-easing: ease;
    --theme-card-hover-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    --theme-card-hover-transform: -2px;

    /* Theme Gradients */
    --theme-gradient-primary: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    --theme-gradient-info: linear-gradient(to bottom right, var(--theme-gradient-info-from), var(--theme-gradient-info-to));
    --theme-gradient-success: linear-gradient(to bottom right, var(--theme-gradient-success-from), var(--theme-gradient-success-to));
    --theme-gradient-error: linear-gradient(to bottom right, var(--theme-gradient-error-from), var(--theme-gradient-error-to));
    --theme-gradient-warning: linear-gradient(to bottom right, var(--theme-gradient-warning-from), var(--theme-gradient-warning-to));

    /* RGB Color Values for Opacity Usage */
    --theme-primary-rgb: 33, 123, 231;
    --theme-secondary-rgb: 6, 103, 219;
    --theme-success-rgb: 40, 167, 69;
    --theme-warning-rgb: 255, 193, 7;
    --theme-error-rgb: 220, 53, 69;
}

body {
    background-color: var(--theme-background);
    color: var(--theme-text);
    font-family: var(--theme-font-primary, 'Noto Sans JP', sans-serif);
    font-size: var(--theme-font-size-base, 1rem);
    line-height: var(--theme-line-height-normal, 1.5);
}

h1 {
    font-size: var(--theme-font-size-h1, var(--theme-font-size-xl));
    font-weight: var(--theme-font-weight-h1, 600);
    margin-bottom: 1rem;
}

h2 {
    font-size: var(--theme-font-size-h2, var(--theme-font-size-xl));
    font-weight: var(--theme-font-weight-h2, 600);
    margin-bottom: 1rem;
}

h3 {
    font-size: var(--theme-font-size-h3, var(--theme-font-size-xl));
    font-weight: var(--theme-font-weight-h3, 600);
    margin-bottom: 1rem;
}

h4 {
    font-size: var(--theme-font-size-h4, var(--theme-font-size-xl));
    font-weight: var(--theme-font-weight-h4, 600);
    margin-bottom: 1rem;
}

h5 {
    font-size: var(--theme-font-size-h5, var(--theme-font-size-xl));
    font-weight: var(--theme-font-weight-h5, 600);
    margin-bottom: 1rem;
}

h6 {
    font-size: var(--theme-font-size-h6, var(--theme-font-size-xl));
    font-weight: var(--theme-font-weight-h6, 600);
    margin-bottom: 1rem;
}

header {
    background-color: var(--theme-header-background);
}

footer {
    background-color: var(--theme-footer-background);
}

a {
    color: var(--theme-link);
    text-decoration: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    transition: all var(--theme-transition-duration, 0.2s) var(--theme-transition-easing, ease);
}

a:hover {
    color: var(--theme-link-hover, var(--theme-primary));
    text-decoration: underline;
}

.btn-primary {
    background-color: var(--theme-button-primary, var(--theme-primary));
    border-color: var(--theme-button-primary, var(--theme-primary));
    color: var(--theme-button-text, #ffffff);
    border-radius: var(--theme-radius-button, 0.375rem);
    transition: all var(--theme-transition-duration, 0.2s) var(--theme-transition-easing, ease);
}

.btn-primary:hover {
    background-color: var(--theme-button-primary-hover, var(--theme-primary-hover));
    border-color: var(--theme-button-primary-hover, var(--theme-primary-hover));
    transform: translateY(-1px);
    box-shadow: var(--theme-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

.btn-secondary {
    background-color: var(--theme-button-secondary, var(--theme-secondary));
    border-color: var(--theme-button-secondary, var(--theme-secondary));
    color: var(--theme-button-text, #ffffff);
    border-radius: var(--theme-radius-button, 0.375rem);
    transition: all var(--theme-transition-duration, 0.2s) var(--theme-transition-easing, ease);
}

.btn-secondary:hover {
    background-color: var(--theme-button-secondary-hover, var(--theme-secondary-hover));
    border-color: var(--theme-button-secondary-hover, var(--theme-secondary-hover));
    transform: translateY(-1px);
    box-shadow: var(--theme-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

.card {
    background-color: var(--theme-card-background, #ffffff);
    border-radius: var(--theme-radius-card, 0.75rem);
    border: 1px solid var(--theme-border);
    box-shadow: var(--theme-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
    transition: all var(--theme-transition-duration, 0.2s) var(--theme-transition-easing, ease);
}

.card:hover, .card.hover-enabled:hover {
    background-color: var(--theme-card-hover-background, var(--theme-card-background));
    box-shadow: var(--theme-card-hover-shadow, var(--theme-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1)));
    transform: translateY(var(--theme-card-hover-transform, -2px));
}

.hover-lift {
    transition: all var(--theme-transition-duration, 0.2s) var(--theme-transition-easing, ease);
}

.hover-lift:hover {
    transform: translateY(var(--theme-card-hover-transform, -2px));
    box-shadow: var(--theme-card-hover-shadow, var(--theme-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1)));
}

.btn-primary:active {
    background-color: var(--theme-button-primary-active, var(--theme-button-primary-hover));
    border-color: var(--theme-button-primary-active, var(--theme-button-primary-hover));
    transform: translateY(0);
}

.btn-secondary:active {
    background-color: var(--theme-button-secondary-active, var(--theme-button-secondary-hover));
    border-color: var(--theme-button-secondary-active, var(--theme-button-secondary-hover));
    transform: translateY(0);
}

.btn:disabled, .btn.disabled {
    background-color: var(--theme-button-disabled, #e9ecef);
    border-color: var(--theme-button-disabled, #e9ecef);
    color: var(--theme-text-disabled, #adb5bd);
    cursor: not-allowed;
    opacity: 0.65;
}

.form-control:focus, .form-select:focus {
    border-color: var(--theme-input-focus-border, var(--theme-primary));
    box-shadow: 0 0 0 0.25rem var(--theme-input-focus-shadow, rgba(var(--theme-primary-rgb, 13, 110, 253), 0.25));
}

/* Theme Utility Classes */

/* Gradient Classes */
.theme-gradient-primary {
    background: var(--theme-gradient-primary);
}

.theme-gradient-info {
    background: var(--theme-gradient-info);
}

.theme-gradient-success {
    background: var(--theme-gradient-success);
}

.theme-gradient-error {
    background: var(--theme-gradient-error);
}

.theme-gradient-warning {
    background: var(--theme-gradient-warning);
}

/* Badge Classes */
.theme-badge-info {
    background-color: var(--theme-badge-info-bg);
    color: var(--theme-badge-info-text);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-block;
}

.theme-badge-success {
    background-color: var(--theme-badge-success-bg);
    color: var(--theme-badge-success-text);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-block;
}

.theme-badge-error {
    background-color: var(--theme-badge-error-bg);
    color: var(--theme-badge-error-text);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-block;
}

.theme-badge-warning {
    background-color: var(--theme-badge-warning-bg);
    color: var(--theme-badge-warning-text);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-block;
}

/* Card Classes */
.theme-card {
    background-color: var(--theme-card-background);
    border: 1px solid var(--theme-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.theme-card-text-white {
    color: var(--theme-card-text-white);
}

.theme-card-text-light {
    color: var(--theme-card-text-light);
}

/* Alert Box Classes */
.theme-alert-info {
    background-color: rgba(var(--theme-info-rgb, 21, 101, 192), 0.1);
    border-left: 4px solid var(--theme-info);
    padding: 1rem;
    border-radius: 0 0.375rem 0.375rem 0;
}

.theme-alert-success {
    background-color: rgba(var(--theme-success-rgb, 46, 125, 50), 0.1);
    border-left: 4px solid var(--theme-success);
    padding: 1rem;
    border-radius: 0 0.375rem 0.375rem 0;
}

.theme-alert-warning {
    background-color: rgba(var(--theme-warning-rgb, 230, 81, 0), 0.1);
    border-left: 4px solid var(--theme-warning);
    padding: 1rem;
    border-radius: 0 0.375rem 0.375rem 0;
}

.theme-alert-error {
    background-color: rgba(var(--theme-error-rgb, 198, 40, 40), 0.1);
    border-left: 4px solid var(--theme-error);
    padding: 1rem;
    border-radius: 0 0.375rem 0.375rem 0;
}