/**
 * variables.css
 *
 * Shared theme tokens.
 */

:root {
	--site-width: 65rem;
	--content-inset: 1.25rem;

	--font-brand: "Mark OT", Georgia, serif;
	--font-size-site-title-hero: 1.75rem;
    --font-size-site-title: 1.4rem;
	--font-size-page-title: 1.75rem;
	--font-size-nav: 1rem;
	--font-size-body: 0.875rem;
	--font-size-footer: 1rem;
	--font-size-intro: 1.25rem;

	--line-title: 1.1;
	--line-nav: 1.2;
	--line-body: 1.55;
	--line-intro: 1.4;

	--color-gold: #cb8507;
	--color-brown: #943b25;
    --color-body: #e7e7e9;
	--color-background: #eaeaeb;
	--color-card-bg: #f7f7f7;
	--color-body-text: #7f7c7d;
	--color-white: #ffffff;

	--radius-pill: 0.775rem;
	--radius-nav: 0.775rem;
	--radius-card: 0.625rem;
	--radius-media: 0.625rem;

	--shadow-card: 0.45rem 0.5rem 0.8rem rgba(188, 133, 57, 0.5);
	--shadow-card-hover: 0.5rem 0.6rem 1rem rgba(188, 133, 57, 0.4);
	--transition-base: 0.2s ease;

    @media screen and (min-width: 768px) {
        
        --content-inset: 3.25rem;

    }
}