/* ==================================================================
   THEME VARIABLES
   ------------------------------------------------------------------
   Central place to re-brand the framework: colors, and the shared
   height used by buttons, inputs, selects and other controls.

   This file is NOT part of the framework itself. It lives alongside
   css-framework/ so you can pull future framework updates without
   your overrides being overwritten, and without editing any of the
   framework's own files.

   Every variable below has a matching fallback baked into the
   framework (e.g. var(--color-primary, #0092ff)).
   ================================================================== */

:root {
	/* ---- Brand colors ------------------------------------------- */
	--color-primary: #4c915a;
	--color-primary-hover: #65C178;
	--color-secondary: #555555;
	--color-secondary-hover: #3d3d3d;
	--color-tertiary: #4c915a;
	--color-tertiary-hover: #65C178;

	/* Text/icon color used on top of primary/secondary backgrounds */
	--color-on-brand: #ffffff;

	/* ---- Disabled controls ---------------------------------------- */
	--color-disabled-text: #a6a6a6;
	--color-disabled-bg: #dddddd;

	/* ---- Base text, links, page background ------------------------- */
	--color-text: #555555;
	--color-heading: #555555;
	--color-muted: #777777;
	--color-body-bg: #212121;
	--color-link: #4c915a;
	--color-link-hover: #65C178;

	/* ---- Borders & dividers ----------------------------------------- */
	--color-border: #cccccc;
	--color-divider: #dadada;

	/* ---- Status colors ------------------------------------------------ */
	--color-error-text: #c62828;
	--color-error-bg: #ffe6e9;

	/* ---- Tables ---------------------------------------------------------*/
	--color-table-border: #dddddd;
	--color-table-hover-bg: #f1f1f1;
	--color-table-heading-text: #999999;

	/* ---- Hamburger menu -----------------------------------------------*/
	--color-menu-bg: #444444;
	--color-menu-border: #555555;
	--color-menu-hover-bg: #555555;
	--color-menu-button-hover-bg: #333333;

	/* ---- Control heights -------------------------------------------- */
	/* Shared by buttons, text inputs, and selects */
	--control-height: 40px;
	/* Default textarea height */
	--control-height-textarea: 150px;

	--control-radius: 3px;
	--control-padding-inline: 20px;
	--input-padding-inline: 10px;

	/* Space between items in layout helpers like .button-bar */
	--control-gap: 8px;

	/* ---- Typography ----------------------------------------------------*/
	--font-family-base: 'Open Sans', Arial, Helvetica, sans-serif;

	/* ---- Image Reserve app-specific ------------------------------------*/
	--color-app-header-bg: #1d1d1d;
	--color-app-panel-bg: #1d1d1d;
	--color-app-accent: #4c915a;
	--color-app-accent-hover: #65C178;
}