/*
  ClinovaVet public site theme — shared by every page in /public.
  Change colors here to retheme the whole website. Pages use these tokens
  (var(--primary), var(--surface), …) instead of hardcoded colors.
  Matches the app's "VetLog Default" theme (app/theme/themes.css).
*/

:root {
    --primary: #2e6b5e;
    --primary-dark: #245449;
    --primary-rgb: 46, 107, 94;
    --secondary: #5a6a8a;
    --secondary-rgb: 90, 106, 138;
    --accent: #a65a2c;
    --accent-dark: #8c4a22;
    --accent-rgb: 166, 90, 44;
    --success: #4b7a3d;
    --success-rgb: 75, 122, 61;
    --rose: #9a4e60;
    --rose-rgb: 154, 78, 96;
    --danger: #a8463b;
    --danger-rgb: 168, 70, 59;
    --warning: #a8742a;
    --warning-rgb: 168, 116, 42;
    --bg: #f3f1ea;
    --bg-alt: #ebe8de;
    --surface: #fbfaf6;
    --surface-2: #f0ede4;
    --text: #1f2e2b;
    --text-light: #55625e;
    --text-muted: #55625e;
    --text-faint: #8a928c;
    --ink-rgb: 31, 46, 43;
    --border: #dcd7ca;
    --border-strong: #c3bcab;
    --card-bg: var(--surface);
    --card-border: var(--border);
    --shadow-sm: 0 1px 2px rgba(31, 46, 43, 0.06), 0 1px 3px rgba(31, 46, 43, 0.05);
    --shadow-md: 0 4px 12px -2px rgba(31, 46, 43, 0.08), 0 2px 4px rgba(31, 46, 43, 0.04);
    --shadow-lg: 0 18px 40px -16px rgba(31, 46, 43, 0.22);
    --ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* Legacy names used by some pages */
    --green: var(--success);
    --red: var(--danger);

    --font-body: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-heading: 'Figtree', 'Noto Sans', system-ui, sans-serif;
}

html,
body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
}

::selection {
    background: rgba(var(--primary-rgb), 0.18);
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid rgba(var(--primary-rgb), 0.45);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}