/* ==========================================================================
   Happy Tails Walk Manager — craft layer
   Depth, texture and motion on top of the Tailwind utility classes.
   Served statically from /public/css so it needs no build step.
   ========================================================================== */

:root {
    --paper:   #FBF7F0;
    --ink:     #1a1814;   /* a warm, tuned near-black — never pure #000 */
    --walker:  #3F6B4C;
    --clay:    #C8693B;
    --moss:    #E4EBE0;
    --mist:    #8C8A82;
}

/* --- typography: a display face paired with a body face -----------------
   Bricolage Grotesque carries the headings; Public Sans the UI and data
   tables. The pairing is the app's voice — not one generic family. */
body,
.font-body {
    font-family: 'Public Sans', system-ui, -apple-system, sans-serif;
    color: var(--ink);
}
h1, h2, h3, h4,
.font-display {
    font-family: 'Bricolage Grotesque', 'Public Sans', sans-serif;
}

/* --- paper grain texture -------------------------------------------------
   A faint film-grain over the whole app so the background reads as warm
   paper, not a flat fill. SVG noise, inlined — no extra request. */
body {
    background-color: var(--paper);
    background-image:
        linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(0,0,0,0.015) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    background-attachment: fixed;
}

/* --- elevation: cards sit ABOVE the page --------------------------------
   Layered shadows — a tight contact shadow plus a soft ambient one — so
   panels and cards feel lifted, not painted on. */
.eh-card,
[class*="rounded-xl"].border {
    box-shadow:
        0 1px 2px rgba(34, 31, 26, 0.04),
        0 8px 20px -10px rgba(34, 31, 26, 0.18);
}

/* The dog cards and quick-link tiles lift on hover. */
.eh-lift {
    transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1),
                box-shadow 0.22s ease;
}
.eh-lift:hover {
    transform: translateY(-3px);
    box-shadow:
        0 2px 4px rgba(34, 31, 26, 0.06),
        0 18px 34px -12px rgba(34, 31, 26, 0.28);
}

/* --- the calendar "today" column gets a warm gradient wash -------------- */
.eh-today {
    background-image: linear-gradient(
        165deg,
        rgba(200, 105, 59, 0.10) 0%,
        rgba(200, 105, 59, 0.02) 55%,
        rgba(255, 255, 255, 0) 100%
    );
}

/* --- buttons: a subtle gradient + press motion ------------------------- */
.eh-btn-primary {
    background-image: linear-gradient(180deg,
        rgba(255, 255, 255, 0.14) 0%, rgba(0, 0, 0, 0.06) 100%);
    transition: transform 0.12s ease, box-shadow 0.18s ease;
    box-shadow: 0 2px 6px -1px rgba(174, 86, 48, 0.4);
}
.eh-btn-primary:hover { box-shadow: 0 4px 12px -2px rgba(174, 86, 48, 0.5); }
.eh-btn-primary:active { transform: translateY(1px); }

/* --- table rows: a soft moss wash on hover ----------------------------- */
.eh-row { transition: background-color 0.15s ease; }

/* --- the sidebar gets a deep inner gradient for dimension -------------- */
.eh-sidebar {
    background-image: linear-gradient(
        185deg, #44724F 0%, #3F6B4C 45%, #355B41 100%
    );
}