/* am24 design tokens — Phase E. Palette: design/DECISIONS.md (Pets4homes green). Owner: orchestrator.
   Every other css/am24/*.css file uses these variables; do not hard-code colours elsewhere. */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../../fonts/PlusJakartaSans-latin-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* colour */
    --am24-forest: #1C3324;        /* hero, footer */
    --am24-accent: #2F6B3F;        /* buttons, links, active tab */
    --am24-accent-hover: #234F2F;
    --am24-tint: #E7F0E3;          /* icon tiles, soft fills */
    --am24-cream: #FBF5D3;         /* hero accent shape */
    --am24-bg: #F5F4F0;            /* page */
    --am24-surface: #FFFFFF;       /* cards */
    --am24-surface-2: #EFEEE9;     /* chips, tab track */
    --am24-text: #1A1A1A;
    --am24-muted: #5F6673;         /* 4.9:1 on --am24-bg, 5.6:1 on white */
    --am24-border: #E5E7EB;
    --am24-border-strong: #C9CDD3;  /* form controls in the filter (checkbox-style rows, inputs) */
    --am24-on-forest: #CFE3C8;     /* body text on forest */
    --am24-danger: #B42318;

    /* type */
    --am24-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --am24-fs-base: 16px;
    --am24-fs-sm: 14px;
    --am24-fs-xs: 13px;
    --am24-fs-h1: 32px;
    --am24-fs-h2: 26px;
    --am24-fs-h3: 18px;
    --am24-fw-head: 700;

    /* shape */
    --am24-radius: 12px;           /* cards */
    --am24-radius-input: 8px;
    --am24-radius-pill: 999px;
    --am24-shadow-hover: 0 8px 24px rgba(16, 24, 16, .08);
    --am24-shadow-hero: 0 10px 30px rgba(0, 0, 0, .25);

    /* spacing (8px scale) */
    --am24-s1: 8px;
    --am24-s2: 16px;
    --am24-s3: 24px;
    --am24-s4: 32px;
    --am24-s5: 40px;
    --am24-s6: 48px;

    /* layout */
    --am24-container: 1200px;
    --am24-gutter: 24px;           /* side padding of every section container; 16px at <= 991px */
    --am24-header-h: 64px;
    --am24-tap: 44px;              /* minimum touch target */
}

@media (max-width: 991px) {
    :root { --am24-gutter: 16px; }
}

/* 2026-10-12 P4H polish: wider page on large screens (Pets4homes ~1320px) so category cards get ~310px photos */
@media (min-width: 1400px) {
    :root { --am24-container: 1320px; }
}