/* ============================================================
   BASE — variables, reset, typography, shared components
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Lato:wght@400;600;700&display=swap');

/* --- Variables --- */
:root {
    /* Greens */
    --green-900: #243d2d;
    --green-800: #305c40;
    --green-700: #4a7c5b;   /* primary */
    --green-600: #5a9169;
    --green-200: #b4d4be;
    --green-100: #daeee1;
    --green-50:  #f0f8f3;

    /* Warm neutrals — the "rustic" palette */
    --brown-900: #2b2318;
    --brown-700: #4f3f2c;
    --brown-500: #7a6a56;
    --brown-300: #bfaa8e;
    --cream-300: #d8ccb8;
    --cream-200: #ece3d4;
    --cream-100: #f5efe4;
    --cream-50:  #fdfaf5;

    /* Semantic aliases */
    --color-primary:        var(--green-700);
    --color-primary-dark:   var(--green-800);
    --color-primary-light:  var(--green-100);
    --color-bg:             var(--cream-100);
    --color-surface:        var(--cream-50);
    --color-text:           var(--brown-900);
    --color-text-muted:     var(--brown-500);
    --color-border:         var(--cream-300);
    --color-border-focus:   var(--green-700);
    --color-error:          #8c3232;
    --color-error-bg:       #fdf0f0;
    --color-success:        var(--green-700);

    /* Spacing & shape */
    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  16px;
    --shadow-sm:  0 1px 4px rgba(43, 35, 24, 0.08);
    --shadow-md:  0 4px 16px rgba(43, 35, 24, 0.10);
    --shadow-lg:  0 16px 48px rgba(43, 35, 24, 0.14);

    /* Typography */
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body:    'Lato', 'Segoe UI', system-ui, sans-serif;

    /* Pro brand — darker teal/cyan accent */
    --pro-brand:        #0f8f82;
    --pro-brand-mid:    #087896;
    --pro-brand-dark:   #066860;
    --pro-brand-glow:   rgba(15, 143, 130, 0.35);
}

/* --- Reset --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { -webkit-font-smoothing: antialiased; }

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    min-height: 100vh;
}

/* --- Typography --- */
h1, h2, h3 {
    font-family: var(--font-display);
    line-height: 1.25;
    color: var(--brown-900);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}
a:hover { text-decoration: underline; }

/* --- Shared form field --- */
.field {
    margin-bottom: 20px;
}

.field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--brown-700);
    margin-bottom: 7px;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"] {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
    background: var(--color-surface);
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.field input:focus {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px rgba(74, 124, 91, 0.15);
}

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s, box-shadow 0.18s, transform 0.1s;
    text-decoration: none;
}

.btn:hover { text-decoration: none; }

.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--color-primary);
    color: #fff;
}
.btn-primary:hover {
    background: var(--color-primary-dark);
    color: #fff;
}
.btn-primary:disabled {
    background: var(--brown-300);
    cursor: not-allowed;
    transform: none;
}

.btn-ghost {
    background: transparent;
    color: var(--color-text-muted);
    border: 1.5px solid var(--color-border);
}
.btn-ghost:hover {
    background: var(--cream-200);
    color: var(--color-text);
}
.btn-ghost:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-full { width: 100%; }

/* --- Feedback messages --- */
.msg-error {
    background: var(--color-error-bg);
    color: var(--color-error);
    border: 1px solid #f0c0c0;
    border-radius: var(--radius-sm);
    padding: 9px 13px;
    font-size: 0.875rem;
    margin-bottom: 16px;
    display: none;
}
.msg-error.visible { display: block; }

.msg-success {
    color: var(--color-success);
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: 12px;
    display: none;
}
.msg-success.visible { display: block; }