/* Basic Styles - You can expand this */
:root {
    --pink: #C6B2F2;
    --blue: #94E7BA;
    
    /* Primary Button Colors (Green/Blue) */
    --btn-primary: #10b981;        /* Base: #94E7BA darkened for better contrast */
    --btn-primary-hover: #059669;   /* 12% darker */
    --btn-primary-active: #047857;  /* 20% darker */
    --btn-primary-text: #ffffff;    /* White text - contrast: 4.6:1 on base */
    
    /* Secondary Button Colors (Purple/Pink) */
    --btn-secondary: #8b5cf6;       /* Base: #C6B2F2 darkened for better contrast */
    --btn-secondary-hover: #7c3aed; /* 12% darker */
    --btn-secondary-active: #6d28d9; /* 20% darker */
    --btn-secondary-text: #ffffff;  /* White text - contrast: 4.8:1 on base */
    
    /* Danger Button Colors (Red) */
    --btn-danger: #dc2626;          /* Base red */
    --btn-danger-hover: #b91c1c;     /* 12% darker */
    --btn-danger-active: #991b1b;    /* 20% darker */
    --btn-danger-text: #ffffff;      /* White text - contrast: 5.2:1 on base */
    
    /* Ghost/Outline Button Colors */
    --btn-ghost-bg: transparent;
    --btn-ghost-border: #6b7280;
    --btn-ghost-text: #374151;
    --btn-ghost-hover-bg: #f3f4f6;
    --btn-ghost-hover-border: #4b5563;
    --btn-ghost-active-bg: #e5e7eb;
    --btn-ghost-active-border: #374151;
    
    /* Focus Ring */
    --focus-ring: #3b82f6;
    --focus-ring-width: 3px;
    --focus-ring-offset: 2px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.15);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

a {
    color: var(--blue);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ============================================
   BASE BUTTON STYLES
   ============================================ */
button, .btn {
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    position: relative;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Remove default button styles */
button {
    font-family: inherit;
}

/* ============================================
   PRIMARY BUTTON (Green/Blue)
   ============================================ */
.btn,
button.btn,
button[class*="btn"]:not(.btn-secondary):not(.btn-danger):not(.btn-ghost) {
    background-color: var(--btn-primary);
    color: var(--btn-primary-text);
    border: 2px solid var(--btn-primary);
    box-shadow: var(--shadow-sm);
}

/* Primary: Hover State */
.btn:hover,
button.btn:hover,
button[class*="btn"]:not(.btn-secondary):not(.btn-danger):not(.btn-ghost):hover {
    background-color: var(--btn-primary-hover);
    border-color: var(--btn-primary-hover);
    color: var(--btn-primary-text);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Primary: Active/Pressed State */
.btn:active,
button.btn:active,
button[class*="btn"]:not(.btn-secondary):not(.btn-danger):not(.btn-ghost):active {
    background-color: var(--btn-primary-active);
    border-color: var(--btn-primary-active);
    color: var(--btn-primary-text);
    transform: translateY(0) scale(0.98);
    box-shadow: var(--shadow-inset);
}

/* Primary: Focus State */
.btn:focus-visible,
button.btn:focus-visible,
button[class*="btn"]:not(.btn-secondary):not(.btn-danger):not(.btn-ghost):focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring),
                0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset)) rgba(59, 130, 246, 0.3),
                var(--shadow-sm);
    border-color: var(--btn-primary);
}

/* Primary: Disabled State */
.btn:disabled,
button.btn:disabled {
    background-color: #9ca3af;
    border-color: #9ca3af;
    color: #ffffff;
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

/* ============================================
   SECONDARY BUTTON (Purple/Pink)
   ============================================ */
.btn-secondary,
button.btn-secondary,
button[style*="background:#C6B2F2"],
button[style*="background:var(--pink)"] {
    background-color: var(--btn-secondary);
    color: var(--btn-secondary-text);
    border: 2px solid var(--btn-secondary);
    box-shadow: var(--shadow-sm);
}

/* Secondary: Hover State */
.btn-secondary:hover,
button.btn-secondary:hover,
button[style*="background:#C6B2F2"]:hover,
button[style*="background:var(--pink)"]:hover {
    background-color: var(--btn-secondary-hover);
    border-color: var(--btn-secondary-hover);
    color: var(--btn-secondary-text);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4), var(--shadow-md);
}

/* Secondary: Active/Pressed State */
.btn-secondary:active,
button.btn-secondary:active,
button[style*="background:#C6B2F2"]:active,
button[style*="background:var(--pink)"]:active {
    background-color: var(--btn-secondary-active);
    border-color: var(--btn-secondary-active);
    color: var(--btn-secondary-text);
    transform: translateY(0) scale(0.98);
    box-shadow: var(--shadow-inset);
}

/* Secondary: Focus State */
.btn-secondary:focus-visible,
button.btn-secondary:focus-visible,
button[style*="background:#C6B2F2"]:focus-visible,
button[style*="background:var(--pink)"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring),
                0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset)) rgba(59, 130, 246, 0.3),
                var(--shadow-sm);
    border-color: var(--btn-secondary);
}

/* ============================================
   DANGER BUTTON (Red)
   ============================================ */
.btn-danger,
button.btn-danger {
    background-color: var(--btn-danger);
    color: var(--btn-danger-text);
    border: 2px solid var(--btn-danger);
    box-shadow: var(--shadow-sm);
}

/* Danger: Hover State */
.btn-danger:hover,
button.btn-danger:hover {
    background-color: var(--btn-danger-hover);
    border-color: var(--btn-danger-hover);
    color: var(--btn-danger-text);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3), var(--shadow-md);
}

/* Danger: Active/Pressed State */
.btn-danger:active,
button.btn-danger:active {
    background-color: var(--btn-danger-active);
    border-color: var(--btn-danger-active);
    color: var(--btn-danger-text);
    transform: translateY(0) scale(0.98);
    box-shadow: var(--shadow-inset);
}

/* Danger: Focus State */
.btn-danger:focus-visible,
button.btn-danger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--focus-ring-width) #ef4444,
                0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset)) rgba(239, 68, 68, 0.3),
                var(--shadow-sm);
    border-color: var(--btn-danger);
}

/* ============================================
   GHOST/OUTLINE BUTTON
   ============================================ */
.btn-ghost,
button.btn-ghost {
    background-color: var(--btn-ghost-bg);
    color: var(--btn-ghost-text);
    border: 2px solid var(--btn-ghost-border);
    box-shadow: none;
}

/* Ghost: Hover State */
.btn-ghost:hover,
button.btn-ghost:hover {
    background-color: var(--btn-ghost-hover-bg);
    border-color: var(--btn-ghost-hover-border);
    color: var(--btn-ghost-text);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Ghost: Active/Pressed State */
.btn-ghost:active,
button.btn-ghost:active {
    background-color: var(--btn-ghost-active-bg);
    border-color: var(--btn-ghost-active-border);
    color: var(--btn-ghost-text);
    transform: translateY(0) scale(0.98);
    box-shadow: var(--shadow-inset);
}

/* Ghost: Focus State */
.btn-ghost:focus-visible,
button.btn-ghost:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring),
                0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset)) rgba(59, 130, 246, 0.3);
    border-color: var(--btn-ghost-border);
}

/* ============================================
   BUTTON SIZES
   ============================================ */
.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

.btn-full {
    width: 100%;
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn,
    button.btn {
        border-width: 3px;
    }
    
    .btn:focus-visible,
    button.btn:focus-visible {
        --focus-ring-width: 4px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    button, .btn {
        transition: none;
    }
    
    button:hover, .btn:hover,
    button:active, .btn:active {
        transform: none;
    }
}

/* Dark mode support (if needed in future) */
@media (prefers-color-scheme: dark) {
    .btn-ghost,
    button.btn-ghost {
        --btn-ghost-text: #f3f4f6;
        --btn-ghost-border: #9ca3af;
        --btn-ghost-hover-bg: #374151;
        --btn-ghost-hover-border: #6b7280;
        --btn-ghost-active-bg: #4b5563;
        --btn-ghost-active-border: #9ca3af;
    }
}