/**
 * Earth & Light
 * Organic, grounded
 */

:root {
    /* Primary Brand Colors */
    --primary: #257D39;
    --primary-hover: #2a8940;
    --primary-contrast: #ffffff;
    --secondary: #BFD8B8;
    
    /* Background & Layout */
    --background: #FAFAF7;
    --background-secondary: #ffffff;
    --text-primary: #2c3e34;
    --text-secondary: #5a6b5f;
    
    /* State Colors */
    --success: #44A259;
    --warning: #FFD87A;
    --error: #cc5c5c;
    --neutral-light: #E8EDE8;
    
    /* Interactive Elements */
    --border: #d4e3d0;
    --border-hover: #BFD8B8;
    --shadow: 0 2px 4px rgba(37, 125, 57, 0.1);
    --shadow-hover: 0 6px 12px rgba(37, 125, 57, 0.2);
    --shadow-card: 0 3px 8px rgba(37, 125, 57, 0.12);
    --shadow-card-hover: 0 8px 20px rgba(37, 125, 57, 0.15);
    
    /* Design Tokens */
    --radius: 0.5rem;
    --radius-lg: 0.75rem;
    --font-family: 'Inter', system-ui, sans-serif;
    
    /* Component-Specific Variables */
    --hero-gradient: linear-gradient(135deg, #257D39, #44A259);
    --card-background: #ffffff;
    --card-border: rgba(37, 125, 57, 0.15);
    
    /* Gradient System */
    --gradient-primary: linear-gradient(135deg, #257D39, #44A259);
    --gradient-secondary: linear-gradient(135deg, #8B5A2B, #A0522D);
    --gradient-subtle-green: linear-gradient(135deg, #DCFCE7, #BBF7D0);
    --gradient-subtle-blue: linear-gradient(135deg, #F0FDF4, #DCFCE7);
    --gradient-subtle-purple: linear-gradient(135deg, #F3E8FF, #E9D5FF);
    --gradient-subtle-orange: linear-gradient(135deg, #FEFBF3, #FEF3C7);
    --gradient-text-primary: linear-gradient(135deg, #257D39, #8B5A2B);
    --gradient-background-auth: linear-gradient(135deg, #F0FDF4, #ECFDF5);
    --gradient-card-service: linear-gradient(135deg, #257D39, #44A259);
    --gradient-card-light: linear-gradient(135deg, #F9FAFB, #F3F4F6);
    --gradient-wellness-tip: linear-gradient(135deg, #DCFCE7, #F0FDF4);
    --gradient-rating-bar: linear-gradient(135deg, #FBBF24, #F59E0B);
    
    /* Button Specific - Using Theta button style (rounded boxy) */
    --btn-primary-bg: #257D39;
    --btn-primary-text: #ffffff;
    --btn-secondary-border: 2px solid #257D39;
    --btn-secondary-text: #257D39;
    --btn-secondary-hover-bg: #257D39;
    --btn-secondary-hover-text: #ffffff;
}

/* Global Body Styles */
body {
    font-family: var(--font-family);
    background-color: var(--background);
    color: var(--text-primary);
}

/* Theta Button Style - Box shift animation with rounded corners */
.btn-primary {
    display: inline-block;
    padding: 0.7em 1.4em;
    font-weight: 600;
    border: 3px solid var(--primary);
    background: var(--primary);
    color: var(--btn-primary-text);
    border-radius: 0.375rem; /* Rounded the sharp corners */
    cursor: pointer;
    font-family: var(--font-family);
    position: relative;
    transform: translate(0.3em, -0.2em);
    transition: transform 0.2s;
    text-decoration: none;
}

.btn-primary:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    background-color: rgba(37, 125, 57, 0.4);
    border-radius: 0.375rem;
    transform: translate(0.4em, -0.2em);
    transition: transform 0.2s, background-color 0.2s;
}

.btn-primary:hover {
    transform: translate(0.1em, -0.05em);
}

.btn-primary:hover:before {
    transform: translate(-0.3em, 0.3em);
}

.btn-primary:active {
    transform: translate(0, 0);
    transition-duration: 0.1s;
}

.btn-primary:active:before {
    transition-duration: 0.1s;
    transform: translate(0, 0);
    background-color: rgba(37, 125, 57, 0.6);
}

/* Secondary Button */
.btn-secondary {
    display: inline-block;
    padding: 0.7em 1.4em;
    border: var(--btn-secondary-border);
    color: var(--btn-secondary-text);
    background: var(--background-secondary);
    border-radius: 0.375rem;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
    text-decoration: none;
    position: relative;
}

.btn-secondary:hover {
    background: var(--btn-secondary-hover-bg);
    color: var(--btn-secondary-hover-text);
}

/* Card Theme */
.card {
    background: var(--card-background);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 1rem;
    transition: all 0.2s;
    border: 1px solid var(--card-border);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

/* Hero Section Theme */
.hero-gradient {
    background: var(--hero-gradient);
}