:root {

    --color-primary: #595E48;
    --color-primary-dark: #454934;
    --color-primary-light: #7A8269;
    --color-primary-extra-light: #C7CDBF;

    --color-cta: #C7A491;
    --color-cta-hover: #A88974;
    --color-cta-light: #F5F0EC;
    --color-cta-dark: #8B7064;

    --color-success: #6B8E6B;
    --color-success-light: #E8F0E8;
    --color-error: #B85C5C;
    --color-error-light: #FBEAEA;
    --color-warning: #C9A857;
    --color-warning-light: #FBF5E8;
    --color-info: #7B9EB8;
    --color-info-light: #E8F1F5;

    --color-text: #4A4540;
    --color-text-muted: #7A756E;
    --color-text-light: #A8A29A;
    --color-bg: #ECE1DD;
    --color-surface: #EDD8D4;
    --color-surface-hover: #E2D8D4;
    --color-border: #D8CFC8;
    --color-border-dark: #C9C3BA;
    --color-white: #FFFFFF;

    --shadow-sm: 0 1px 2px rgba(74, 69, 64, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(74, 69, 64, 0.08);
    --shadow-lg: 0 10px 15px -3px rgba(74, 69, 64, 0.1);
    --shadow-cta: 0 4px 12px rgba(199, 164, 145, 0.3);

    --font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;

    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-full: 9999px;

    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

}

/* Dark Theme */
[data-theme="dark"] {
    /* Primary - Sage (dark variant) */
    --color-primary: #7A8269;
    --color-primary-dark: #595E48;
    --color-primary-light: #C7CDBF;
    --color-primary-extra-light: #D8DFCE;

    /* CTA/Accent - Rose/Terracotta */
    --color-cta: #D4B8A6;
    --color-cta-hover: #C7A491;
    --color-cta-light: #3D3633;
    --color-cta-dark: #F5F0EC;

    /* Semantic */
    --color-success: #8BAE8B;
    --color-success-light: #2D362D;
    --color-error: #D47B7B;
    --color-error-light: #4D2D2D;
    --color-warning: #D9BC77;
    --color-warning-light: #4D3D27;
    --color-info: #8BAEBE;
    --color-info-light: #2D3D47;

    /* Neutral - Dark mode warm */
    --color-text: #F5F2ED;
    --color-text-muted: #C5C1BA;
    --color-text-light: #9A968E;
    --color-bg: #2D2A26;
    --color-surface: #3D3935;
    --color-surface-hover: #4D4741;
    --color-border: #4D4741;
    --color-border-dark: #5D554D;

    /* White for dark backgrounds */
    --color-white: #FFFFFF;
    --color-white-alpha-85: rgba(255, 255, 255, 0.85);
    --color-white-alpha-70: rgba(255, 255, 255, 0.7);
    --color-white-alpha-50: rgba(255, 255, 255, 0.5);
    --color-white-alpha-10: rgba(255, 255, 255, 0.1);
    --color-white-alpha-05: rgba(255, 255, 255, 0.05);

    /* Shadows - darker for dark mode */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --shadow-cta: 0 4px 12px rgba(212, 184, 166, 0.3);
}

/* Dark theme button overrides */
[data-theme="dark"] .button-secondary {
    color: var(--color-text);
    border-color: var(--color-border);
}

[data-theme="dark"] .button-secondary:hover {
    color: var(--color-cta);
    border-color: var(--color-cta);
    background: var(--color-cta-light);
}

[data-theme="dark"] .button-secondary i {
    color: var(--color-text);
}

[data-theme="dark"] .button-secondary:hover i {
    color: var(--color-cta);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    background-color: var(--color-bg);
    font-family: var(--font-family), serif;
    color: var(--color-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
    color: var(--color-cta);
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-cta-hover);
}

/* Buttons - standardized sizes */
a.button-primary,
button.button-primary {
    background: var(--color-cta);
    color: white;
}

a.button-primary,
button.button-primary,
a.button-secondary,
button.button-secondary,
a.button-tertiary,
button.button-tertiary,
a.button-quaternary,
button.button-quaternary,
a.button-danger,
button.button-danger {
    padding: 0.875rem 2rem;
    font-size: var(--font-size-base);
    font-weight: 500;
    border-radius: var(--radius-full);
    min-height: 50px;
    align-items: center;
    justify-content: center;
}

a.button-primary:hover,
button.button-primary:hover {
    background: var(--color-cta-hover);
    color: white;
    box-shadow: var(--shadow-cta);
    transform: translateY(-2px);
}

a.button-primary:active,
button.button-primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

a.button-primary.active,
button.button-primary.active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-cta-hover);
    color: white;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-base);
    box-shadow: none;
}

a.button-primary:disabled,
button.button-primary:disabled {
    background: var(--color-text-muted);
    color: var(--color-white);
    cursor: not-allowed;
    opacity: 0.7;
    transform: none;
    box-shadow: none;
}

a.button-primary:disabled:hover,
button.button-primary:disabled:hover {
    background: var(--color-text-muted);
    transform: none;
    box-shadow: none;
}

.button-secondary {
    display: inline-flex;
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    text-decoration: none;
    transition: all var(--transition-base);
    box-shadow: none;
}

.button-secondary:hover {
    color: var(--color-cta);
    border-color: var(--color-cta);
    background: var(--color-cta-light);
    box-shadow: var(--shadow-md);
}

.button-secondary i {
    font-size: var(--font-size-lg);
    flex-shrink: 0;
    color: var(--color-primary);
    margin-right: var(--spacing-sm);
}

.button-text {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-xs);
    line-height: 1.25;
}

.button-text strong {
    font-size: var(--font-size-base);
    font-weight: 700;
}

.button-secondary:hover {
    color: var(--color-cta);
    border-color: var(--color-cta);
    background: var(--color-cta-light);
    box-shadow: var(--shadow-md);
}

.button-secondary:hover i {
    color: var(--color-cta);
}

.button-tertiary {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: transparent;
    color: var(--color-cta);
    border: 1px solid var(--color-cta);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-full);
    font-weight: 500;
    font-size: var(--font-size-base);
    text-decoration: none;
    transition: all var(--transition-base);
    box-shadow: none;
}

.button-tertiary i {
    font-size: var(--font-size-lg);
    flex-shrink: 0;
    color: var(--color-cta);
}

.button-tertiary:hover {
    color: var(--color-cta-hover);
    border-color: var(--color-cta-hover);
    background: var(--color-cta-light);
    box-shadow: var(--shadow-md);
}

.button-tertiary:hover i {
    color: var(--color-cta-hover);
}

.button-quaternary {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-full);
    font-weight: 500;
    font-size: var(--font-size-base);
    text-decoration: none;
    transition: all var(--transition-base);
    box-shadow: none;
}

.button-quaternary i {
    font-size: var(--font-size-lg);
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.button-quaternary:hover {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border-dark);
    box-shadow: var(--shadow-sm);
}

.button-quaternary:hover i {
    color: var(--color-text);
}

.button-danger {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--color-error);
    color: white;
    border: none;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition-base);
    box-shadow: none;
    cursor: pointer;
}

.button-danger i {
    font-size: var(--font-size-lg);
    flex-shrink: 0;
    color: white;
}

.button-danger:hover {
    background: var(--color-error);
    box-shadow: var(--shadow-md);
}

.button-danger:hover i {
    color: white;
}

.button-row {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    justify-content: center;
}

.idonTextAccent {
    color: var(--color-cta);
}

.button-tertiary,
.button-quaternary {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Validation Rule Styling (reusable across all forms) */
.validation-rule {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-sm);
    min-height: 1.5rem;
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}

.validation-rule .validation-hint {
    opacity: 0.7;
}

.validation-rule.valid {
    color: var(--color-text-muted);
}

.validation-rule.valid .validation-hint {
    opacity: 1;
    text-decoration: line-through;
}

.validation-rule.valid::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.validation-rule.error {
    color: var(--color-error);
}

.validation-rule.error .validation-hint {
    display: inline;
    opacity: 1;
    color: var(--color-error);
}

.validation-rule.error::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23DC2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-right: 4px;
}

.validation-rule.empty {
    color: var(--color-text-muted);
}

.validation-rule.empty .validation-hint {
    display: inline;
    opacity: 0.7;
}

.validation-rule.empty::before {
    display: none;
}