/* TimeTonic External Form Customization Variables
 * ================================================
 *
 * This file contains CSS variables used to customize TimeTonic external forms.
 * 
 * USAGE INSTRUCTIONS:
 * 1. Modify any variable values below to customize your form's appearance
 * 2. Remove any variable you don't want to customize to use the default value
 * 3. For custom fonts, uncomment the Google Fonts import line and adjust as needed
 * 4. Ensure all values follow proper CSS syntax
 * 5. For advanced customization, you can target specific CSS classes in the form
 *    by inspecting the form's source code in your browser
 */

/* Uncomment to use Google Fonts (example using Roboto) */
/* @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); */

:root {
	/* ==================
	 * GLOBAL PROPERTIES
	 * ================== */

	/* Typography - Controls the font family used throughout the form */
	--externform-font-family: "Roboto", sans-serif;

	/* Colors - Define the main color scheme */
	--externform-bg-color: #fafafa; /* Form background color */
	--externform-text-color: #1c2c39; /* Primary text color */
	--externform-secondary-text-color: #a4a4a4; /* Secondary/helper text color */

	/* ==================
	 * FORM CONTAINER
	 * ================== */
	--externform-max-width: 800px; /* Maximum width of the form */
	--externform-border-radius: 6px; /* Rounded corners for the form container */

	/* ==================
	 * FORM HEADER
	 * ================== */
	--externform-title-font-size: 28px; /* Form title font size */
	--externform-title-font-weight: 700; /* Form title font weight (boldness) */
	--externform-title-color: #1c2c39; /* Form title color */

	--externform-description-font-size: 16px; /* Form description font size */
	--externform-description-color: #1c2c39; /* Form description color */
	--externform-description-font-weight: 700; /* Form description font weight */

	/* ==================
	 * FORM GROUPS/SECTIONS
	 * ================== */
	--externform-group-header-bg-color: #fafafa; /* Background color for group headers */
	--externform-group-header-color: rgba(0, 0, 0, 0.54); /* Text color for group headers */
	--externform-group-bg-color: #fafafa; /* Background color for group content */
	--externform-group-border-color: transparent; /* Border color for groups */
	--externform-group-name-font-size: 16px; /* Group title font size */
	--externform-group-name-font-weight: 500; /* Group title font weight */

	/* ==================
	 * BUTTONS & ACTIONS
	 * ================== */
	--externform-actions-bg-color: #fafafa; /* Background color for action area */
	--externform-actions-border-color: #e5e5e5; /* Border color for action area */
	--externform-button-border-radius: 6px; /* Rounded corners for buttons */
	--externform-button-font-size: 14px; /* Button text font size */

	/* ==================
	 * INPUT FIELDS
	 * ================== */
	--externform-input-card-bg-color: #fafafa; /* Background color for input cards */

	/* ==================
	 * BREADCRUMB NAVIGATION
	 * ================== */
	--externform-breadcrumb-bg-color: #fafafa; /* Background color for breadcrumb */
	--externform-breadcrumb-border-color: #e5e5e5; /* Border color for breadcrumb */
	--externform-breadcrumb-separator-color: #e5e5e5; /* Color for breadcrumb separators */

	/* ==================
   * SUCCESS MESSAGE
   * ================== */
	--externform-success-icon-color: #30b465; /* Color for success icons */
	--externform-success-icon-size: 80px; /* Size of success icons */
	--externform-success-message-bg-color: #fafafa; /* Background for success messages */
	--externform-success-message-border-radius: 24px; /* Rounded corners for success messages */
	--externform-success-message-font-size: 24px; /* Font size for success messages */
}