/* theme-default.css */
:root {

	/* Brand */
	--primary: #3AB1A7;
	--secondary: #151E47;
	--accent: #FF9900;

	/* Core */
	--bg: var(--secondary);
	--text: #000;
	--text-on-dark: #fff;
	--muted: #555;

	--header-font-weight: 300;

	/* Surfaces */
	--surface: #fff;
	--surface-2: #F7F7F7;

	/* Links */
	--link: #000;
	--link-hover: #000;

	/* Nav/header */
	--header-bg: var(--secondary);
	--footer-bg: var(--secondary);
	--nav-link: #fff;
	--nav-hover: var(--primary);
	--dropdown-bg: var(--secondary);
	--dropdown-hover-bg: var(--primary);
	--submenu-bg: #158582;
	--submenu-hover-bg: #21b5b0;

	/* Buttons */
	--contact-btn-bg: var(--primary);
	--contact-btn-border: var(--primary);
	--contact-btn-hover-bg: var(--secondary);

	/* Dividers/borders */
	--divider: #cacaca;
	--page-title-divider: var(--secondary);
	--products-divider: var(--primary);

	/* Overlays */
	--blog-overlay: rgba(21, 30, 71, 0.6);
	--blog-overlay-hover: rgba(21, 30, 71, 0.8);
	--quicklinks-overlay-hover: rgba(0, 176, 171, 0.25);

	/* Shadows / radius */
	--radius-sm: 0px;
	--radius-md: 0px;
	--radius-pill: 0px;
	--shadow-highlight: 17px 21px var(--primary); /* brief image */
	--shadow-hl-image: 16px 12px var(--primary);

	/* Typography tweaks */
	--nav-font: inherit;
	--nav-weight: inherit;

	/* Motif */
	--motif-image: url(/images/motif_pattern.png);
	--motif-opacity: 1;
	--motif-height: 122px;

	/* Leisure underline token (default theme doesn’t really use it) */
	--underline-accent: var(--primary);

	/* Forms */
	--form-line: var(--secondary);
	--input-bg: #6c9dbe;
	--input-bg-alt: #97d6d6;
	--input-text: #fff;
	--placeholder: #b5b5b5;

	/* Check/radio selected */
	--check-selected: #3F54C7;

	/* =========================
		Responsive-base tokens
		========================= */

	/* Mobile sidebar background */
	--header-mobile-sidebar-bg: var(--bg);
	--mobile-nav-link: #fff;

	/* Mobile shadows (default theme uses teal) */
	--brief-mobile-image-shadow: 8px 7px var(--primary);
	--hl-mobile-image-shadow: 8px 6px var(--primary);

	/* Desktop contact-section card styling (default = none) */
	--contact-section-desktop-border: none;
	--contact-section-desktop-radius: 0px;
	--contact-section-desktop-filter: none;

	/* Mobile contact box wrapper padding (default keeps existing padding) */
	--contactboxwrapper-mobile-padding: initial;

	/* Smallest breakpoint CTA box background (default transparent) */
	--cta-box-mobile-bg: transparent;

	/* Smallest breakpoint "book" styling (default expects overlay style: no bg + white text) */
	--book-mobile-bg: none;
	--book-mobile-shadow: none;
	--book-mobile-radius: 0px;
	--book-mobile-h1-color: #FFF;
	--book-mobile-p-color: #FFF;

	/* Highlight section mobile typography (default values from responsive.css) */
	--hl-title-mobile-font-size: 1.6em;
	--hl-title-mobile-margin-bottom: 25px;
	--hl-title-mobile-line-height: normal;
	--hl-title-mobile-padding: 0;
	--hl-link-mobile-margin-top: 30px;
	--hl-bottom-mobile-margin-bottom: 0;

	/* Product headers sizing on small screens (default doesn't force sizes) */
	--product-categories-header-mobile-font-size: inherit;
	--products-header-mobile-font-size: inherit;

}