/* ── HandyInTown Brand Tokens ───────────────────────────────── */
:root {
    /* Primary palette — from HandyInTown Brand Kit */
    --color-forest:     #123F33;   /* primary: headings, nav, outlines */
    --color-green:      #688E3A;   /* secondary: buttons, accents */
    --color-cream:      #FFF8E8;   /* background */
    --color-orange:     #E26B2D;   /* accent: "In", highlights */
    --color-highlight:  #F4C542;   /* gold: stars, badges */
    --color-surface:    #FFFFFF;   /* card surfaces */
    --color-text:       #6B6B6B;   /* body text */
    --color-muted:      #D9E4D6;   /* borders, dividers, light backgrounds */

    /* Derived hover states */
    --color-green-hover:  #5a7a31;
    --color-forest-hover: #0d2e25;
    --color-orange-hover: #c85820;

    /* Tinted green surfaces */
    --color-green-light:  #E8F4EE;   /* light tinted green card/section bg */
    --color-green-border: #B8D4C0;   /* light green border */

    /* Text scale */
    --color-text-strong:  #1C1C1A;   /* near-black, strong labels */
    --color-text-muted:   #909090;   /* secondary / placeholder text */

    /* Status: danger */
    --color-danger:       #C0392B;
    --color-danger-light: #FDECEA;
    --color-danger-border:#E8B4B0;

    /* Status: warning */
    --color-warning-light:#FEF9EC;
    --color-warning-text: #7A6010;
    --color-warning-border:#F5D87A;

    /* Status: info / completed — brand green, not blue */
    --color-info:         #2A6641;
    --color-info-light:   #E8F4EE;
    --color-info-border:  #B8D4C0;

    /* Dark mode surfaces */
    --color-dark-bg:      #17231F;
    --color-dark-surface: #23342D;

    /* Typography */
    --font-heading: 'Roboto Slab', Georgia, serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.6;

    /* Radius */
    --radius-sm:   8px;
    --radius-md:   14px;
    --radius-lg:   20px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(18,63,51,.10);
    --shadow-md: 0 8px 24px rgba(18,63,51,.14);
}

/* ── Base ────────────────────────────────────────────────────── */
html {
    font-size: var(--font-size-base);
    box-sizing: border-box;
}

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

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-cream);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-forest);
    line-height: 1.2;
}

h1 { font-size: 2rem;   font-weight: 800; }
h2 { font-size: 1.6rem; font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; }

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

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

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-brand {
    display: inline-block;
    background: var(--color-green);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.625rem 1.375rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    line-height: 1.4;
    text-align: center;
}

.btn-brand:hover   { background: var(--color-green-hover); color: #fff; }
.btn-brand:disabled { background: var(--color-muted); color: var(--color-forest); cursor: default; }

.btn-brand-dark {
    display: inline-block;
    background: var(--color-forest);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.55rem 1.1rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-brand-dark:hover { background: var(--color-forest-hover); color: #fff; }

.btn-brand-outline {
    display: inline-block;
    background: transparent;
    color: var(--color-forest);
    border: 1.5px solid var(--color-forest);
    border-radius: var(--radius-sm);
    padding: 0.55rem 1.1rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.btn-brand-outline:hover { background: var(--color-forest); color: #fff; }

.btn-brand-promo {
    display: inline-block;
    background: var(--color-orange);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.625rem 1.375rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-brand-promo:hover { background: var(--color-orange-hover); color: #fff; }

.btn-danger-sm {
    background: #c0392b;
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

/* ── Cards ───────────────────────────────────────────────────── */
.card-hit {
    background: var(--color-surface);
    border: 1px solid var(--color-muted);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
}

/* ── Badges ──────────────────────────────────────────────────── */
.badge-verified {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #E8F0DC;
    color: #2f5a14;
    border: 1px solid #c4d9a8;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.65rem;
    letter-spacing: 0.02em;
}

.badge-stars {
    color: var(--color-highlight);
    font-size: 0.85rem;
}

.badge-local {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--color-forest);
    color: #fff;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.65rem;
}

/* ── Forms ───────────────────────────────────────────────────── */
.input-brand {
    border: 1.5px solid var(--color-muted);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.9rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    background: var(--color-surface);
    color: var(--color-forest);
    width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.input-brand:focus {
    outline: none;
    border-color: var(--color-green);
    box-shadow: 0 0 0 3px rgba(104,142,58,0.15);
}

/* ── Focus override for Bootstrap ────────────────────────────── */
.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(104,142,58,0.2);
}

/* ── Rating stars ────────────────────────────────────────────── */
.stars-display {
    color: var(--color-highlight);
    letter-spacing: 0.05em;
}

/* ── Flash messages ──────────────────────────────────────────── */
.flash-success {
    background: #E8F0DC;
    border: 1px solid #c4d9a8;
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    color: var(--color-forest);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.flash-error {
    background: #fdf0ee;
    border: 1px solid #e8b4a8;
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    color: #8b2e1e;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* ── Section wrapper ─────────────────────────────────────────── */
.page-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
}

.page-wrap-narrow {
    max-width: 680px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
}

/* ── Dark mode ───────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        --color-cream:    #17231F;
        --color-text:     #C6C9BC;
        --color-muted:    #2e4038;
        --color-forest:   #8FAF78;
        --color-orange:   #D9783E;
        --color-surface:  #23342D;
    }

    body { background-color: var(--color-dark-bg); }

    .card-hit { background: var(--color-dark-surface); border-color: #2e4038; }

    .input-brand { background: var(--color-dark-surface); border-color: #2e4038; color: #F5EEDC; }
}

/* ── Responsive helpers ──────────────────────────────────────── */
@media (max-width: 600px) {
    .page-wrap, .page-wrap-narrow { padding: 1.5rem 1rem 3rem; }
}