/**
 * Workflow GC Master Stylesheet
 * Design Tokens, CSS Variables, Typography
 * 
 * @package Workflow_GC
 * @version 2.0.0
 * 
 * IMPORTANT: This file contains ONLY design tokens and variables.
 * No component styles should be defined here.
 * Total lines: ~200 (within compliance limits)
 */

/* ==========================================================================
   CSS Variables & Design Tokens
   ========================================================================== */

:root {
	/* Updated Brand Colors (Exact match to Image 1 from user spec) */
	--wfg-base: #6B8E6B;
	/* Dark olive green - Primary buttons, headers */
	--wfg-contrast: #4A3B2F;
	/* Dark brown/grey - Primary text */
	--wfg-accent1: #D96B5B;
	/* Orange-red - Checkmarks, highlights */
	--wfg-accent2: #E8DDCF;
	/* Light beige - Title banner */
	--wfg-accent3: #F5F0EB;
	/* Off-white - Page background */
	--wfg-accent4: #F0E2D5;
	/* Light beige text */
	--wfg-accent5: #5C7A5C;
	/* Darker green - Hover states */
	--wfg-accent6: #808080;
	/* Medium grey - Secondary text */

	/* Semantic Color Aliases */
	--wfg-primary: var(--wfg-base);
	--wfg-secondary: var(--wfg-accent1);
	--wfg-success: var(--wfg-base);
	--wfg-danger: #e74c3c;
	--wfg-warning: #f39c12;
	--wfg-info: #3498db;

	/* Text Colors (Exact from Image 1) */
	--wfg-text-primary: #4A3B2F;
	/* Dark brown/grey */
	--wfg-text-secondary: #808080;
	/* Medium grey */
	--wfg-text-light: #F5F0EB;
	/* Light beige on dark backgrounds */
	--wfg-text-dark: #4A3B2F;
	/* Same as primary */

	/* Background Colors */
	--wfg-bg-page: #F5F0EB;
	/* Very light beige/off-white */
	--wfg-bg-banner: #dabea8;
	/* Light brown/tan - Title banners (STANDARD - Image 1 style) */image.png
	--wfg-bg-card: #FFFFFF;
	/* White cards */
	--wfg-bg-container: #F5F0EB;
	/* Same as page */
	--wfg-bg-input: #ffffff;
	--wfg-bg-hover: #5C7A5C;
	/* Darker green for hover */

	/* Banner Text Colors (STANDARD - Edit here to change all banners) */
	--wfg-banner-title-color: #4a6953;
	/* Dark Sage - Banner titles (TEST COLOR) */
	--wfg-banner-subtitle-color: #6c705d;
	/* Earth Grey - Banner subtitles */

	/* Icon Colors (STANDARD - All icons use this color) */
	--wfg-icon-color: #c48c6e;
	/* Clay Rose - All Material Design Icons */

	/* Border Colors */
	--wfg-border-color: #E0E0E0;
	--wfg-border-light: #E0E0E0;
	--wfg-border-dark: #D3D3D3;

	/* Spacing Scale (Mobile-First) */
	--wfg-space-xs: 4px;
	--wfg-space-sm: 8px;
	--wfg-space-md: 16px;
	--wfg-space-lg: 24px;
	--wfg-space-xl: 32px;
	--wfg-space-2xl: 48px;

	/* Typography Scale */
	--wfg-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--wfg-font-family-mono: 'Courier New', Courier, monospace;

	/* Font Sizes (Mobile-First) */
	--wfg-font-xs: 12px;
	--wfg-font-sm: 14px;
	--wfg-font-base: 16px;
	--wfg-font-md: 18px;
	--wfg-font-lg: 22px;
	/* Mobile banner title - STANDARD */
	--wfg-font-xl: 22px;
	/* Desktop banner title - STANDARD */
	/* Banner title size - 22px (readable on all screens) */
	--wfg-font-2xl: 28px;
	--wfg-font-3xl: 32px;

	/* Font Weights */
	--wfg-font-normal: 400;
	--wfg-font-medium: 500;
	--wfg-font-semibold: 600;
	--wfg-font-bold: 700;

	/* Line Heights */
	--wfg-line-tight: 1.25;
	--wfg-line-normal: 1.5;
	--wfg-line-relaxed: 1.75;

	/* Border Radius */
	--wfg-radius-sm: 4px;
	--wfg-radius-md: 8px;
	--wfg-radius-lg: 12px;
	--wfg-radius-xl: 16px;
	--wfg-radius-full: 9999px;

	/* Shadows */
	--wfg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--wfg-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
	--wfg-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);

	/* Transitions */
	--wfg-transition-fast: 150ms ease;
	--wfg-transition-base: 250ms ease;
	--wfg-transition-slow: 350ms ease;

	/* Touch Target Minimum (Mobile Compliance) */
	--wfg-touch-target: 44px;

	/* Z-Index Scale */
	--wfg-z-base: 1;
	--wfg-z-dropdown: 1000;
	--wfg-z-modal: 2000;
	--wfg-z-toast: 3000;
	--wfg-z-tooltip: 4000;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* Tablet: 768px and up */
@media (min-width: 768px) {
	:root {
		--wfg-font-base: 16px;
		--wfg-font-xl: 25px;
		/* Desktop banner title - STANDARD */
		--wfg-font-2xl: 32px;
		--wfg-font-3xl: 36px;
		--wfg-space-xl: 40px;
		--wfg-space-2xl: 64px;
	}
}

/* Desktop: 1025px and up */
@media (min-width: 1025px) {
	:root {
		--wfg-font-xl: 25px;
		/* Desktop banner title - STANDARD */
		--wfg-font-2xl: 36px;
		--wfg-font-3xl: 40px;
	}
}

/* ==========================================================================
   Base Typography (Mobile-First)
   ========================================================================== */

.wfg-container {
	font-family: var(--wfg-font-family);
	font-size: var(--wfg-font-base);
	line-height: var(--wfg-line-normal);
	color: var(--wfg-text-primary);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.wfg-heading-1 {
	font-size: var(--wfg-font-3xl);
	font-weight: var(--wfg-font-bold);
	line-height: var(--wfg-line-tight);
	color: var(--wfg-base);
	margin: 0 0 var(--wfg-space-lg) 0;
}

.wfg-heading-2 {
	font-size: var(--wfg-font-2xl);
	font-weight: var(--wfg-font-bold);
	line-height: var(--wfg-line-tight);
	color: var(--wfg-base);
	margin: 0 0 var(--wfg-space-md) 0;
}

.wfg-heading-3 {
	font-size: var(--wfg-font-xl);
	font-weight: var(--wfg-font-semibold);
	line-height: var(--wfg-line-tight);
	color: var(--wfg-contrast);
	margin: 0 0 var(--wfg-space-md) 0;
}

.wfg-text-body {
	font-size: var(--wfg-font-base);
	line-height: var(--wfg-line-normal);
	color: var(--wfg-text-primary);
}

.wfg-text-small {
	font-size: var(--wfg-font-sm);
	line-height: var(--wfg-line-normal);
	color: var(--wfg-text-secondary);
}

.wfg-text-xs {
	font-size: var(--wfg-font-xs);
	line-height: var(--wfg-line-normal);
	color: var(--wfg-text-light);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Spacing Utilities */
.wfg-mt-sm {
	margin-top: var(--wfg-space-sm);
}

.wfg-mt-md {
	margin-top: var(--wfg-space-md);
}

.wfg-mt-lg {
	margin-top: var(--wfg-space-lg);
}

.wfg-mb-sm {
	margin-bottom: var(--wfg-space-sm);
}

.wfg-mb-md {
	margin-bottom: var(--wfg-space-md);
}

.wfg-mb-lg {
	margin-bottom: var(--wfg-space-lg);
}

.wfg-p-sm {
	padding: var(--wfg-space-sm);
}

.wfg-p-md {
	padding: var(--wfg-space-md);
}

.wfg-p-lg {
	padding: var(--wfg-space-lg);
}

/* Display Utilities */
.wfg-hidden {
	display: none;
}

.wfg-block {
	display: block;
}

.wfg-inline-block {
	display: inline-block;
}

.wfg-flex {
	display: flex;
}

/* Text Alignment */
.wfg-text-left {
	text-align: left;
}

.wfg-text-center {
	text-align: center;
}

.wfg-text-right {
	text-align: right;
}