/* ==================================================================
   TRI-COUNTY RESCUE - EASY THEME SETTINGS
   ==================================================================

   This is the FIRST file to edit when changing the site's appearance.
   Most major colors, sizes, fonts, and spacing are controlled here.

   Example:
       Change --color-primary from #c71920 to another color and the
       buttons, accents, icons, and highlights will update site-wide.
   ================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700;800&display=swap");

:root {
    /* --------------------------------------------------------------
       BRAND COLORS
       -------------------------------------------------------------- */
    --color-primary: #c71920;
    --color-primary-dark: #a8141a;

    --color-navy: #111d28;
    --color-navy-light: #172a3c;

    --color-white: #ffffff;
    --color-text: #111d28;
    --color-text-muted: #4c545b;

    --color-background: #ffffff;
    --color-background-muted: #f3f4f5;
    --color-background-soft: #fafafa;

    --color-border: #d9dee2;
    --color-border-light: #eceff1;

    /* --------------------------------------------------------------
       FONTS
       -------------------------------------------------------------- */
    --font-body: "Inter", Arial, sans-serif;
    --font-heading: "Barlow Condensed", "Arial Narrow", sans-serif;

    /* --------------------------------------------------------------
       SITE WIDTH / SPACING
       -------------------------------------------------------------- */
    --site-width: 1200px;
    --page-gutter: 24px;

    --section-space: 64px;
    --section-space-small: 36px;

    /* --------------------------------------------------------------
       SHAPE / EFFECTS
       -------------------------------------------------------------- */
    --radius-small: 4px;
    --radius-medium: 7px;

    --shadow-small: 0 2px 10px rgba(0, 0, 0, 0.08);
    --shadow-header: 0 2px 12px rgba(0, 0, 0, 0.10);

    /* --------------------------------------------------------------
       RESPONSIVE BREAKPOINT NOTES
       Actual media queries are in styles.css.

       Desktop:  1050px+
       Tablet:   700px - 1049px
       Mobile:   under 700px
       -------------------------------------------------------------- */
}