/* =================================================
   PURPOSEFUL MEDIA DESIGN SYSTEM - DESIGN TOKENS
   Version: 4.0
   Date: 2025-10-27
   Previous Version: v3.0-20251023
   Repository: github.com/GeoffreyCraig/purposeful-media-design-code
   ================================================= */

/* =================================================
   VERSION NOTES
   
   v4.0 Changes:
   - Added comprehensive component-specific tokens
   - Organized component sections (Cards, Banners, Hero, Nav extensions)
   - Added semantic aliases for dropdowns and card states
   - Integrated all Figma-mapped variables from Atomic Design
   - Maintained 100% backward compatibility with v3.0
   
   Migration from v3.0:
   - All v3.0 tokens remain unchanged
   - No breaking changes
   - New tokens are additions only
   - Safe to update without refactoring existing code
   ================================================= */

/* =================================================
   FONT IMPORTS
   ================================================= */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

/* =================================================
   COLOR TOKENS
   ================================================= */
:root {
  /* Primary Brand Colors */
  --color-primary-900: #06102B;
  --color-primary-800: #0B1F57;
  --color-primary-700: #1B1464; /* Primary Navy Blue */
  --color-primary-600: #1740B0;
  --color-primary-500: #1D50DE;
  --color-primary-400: #4872E7;
  --color-primary-300: #7595ED;
  --color-primary-200: #A3B8F3;
  --color-primary-100: #D1DCF9;
  --color-primary-50: #F0F3FD;
  
  /* Secondary Blue */
  --color-secondary: #36448F;
  --color-primary-light: #36448F; /* Alias */
  
  /* Accent Gold */
  --color-accent-900: #292209;
  --color-accent-800: #524312;
  --color-accent-700: #89701E;
  --color-accent-600: #B39226;
  --color-accent-500: #D4AF37; /* Accent Gold */
  --color-accent-400: #DCBE5D;
  --color-accent-300: #E4CD82;
  --color-accent-200: #ECDCA8;
  --color-accent-100: #F4EBCD;
  --color-accent-50: #FAF5E6;
  
  /* Teal/Success */
  --color-teal-900: #0A2727;
  --color-teal-800: #114141;
  --color-teal-700: #1E7575;
  --color-teal-600: #2BA9A9;
  --color-teal-500: #39CCCC; /* Accent Teal */
  --color-teal-400: #61D6D6;
  --color-teal-300: #88E0E0;
  --color-teal-200: #B0EBEB;
  --color-teal-100: #D7F5F5;
  --color-teal-50: #F2FCFC;
  
  /* Neutrals */
  --color-neutral-900: #0E0F10;
  --color-neutral-800: #1B1D1F;
  --color-neutral-700: #363A3E;
  --color-neutral-600: #51585E;
  --color-neutral-500: #6C757D; /* Slate Gray */
  --color-neutral-400: #868F97;
  --color-neutral-300: #A2A9AF; /* Medium Gray */
  --color-neutral-200: #C7CBCF;
  --color-neutral-100: #ECEEEF; /* Light Gray */
  --color-neutral-50: #F6F6F7; /* Off-White */
  --color-white: #FFFFFF;
  --color-black: #000000;
  
  /* Additional Grays (Legacy naming) */
  --color-darkest: #2D3748; /* Darkest Gray */
  --color-charcoal: #54595F; /* Charcoal Gray */
  --color-slate: #6C757D; /* Same as neutral-500 */
  --color-medium: #A0AEC0; /* Medium Gray */
  --color-light: #E2E8F0; /* Light Gray */
  --color-off-white: #F7FAFC; /* Off-White */
  
  /* Error/Warning States */
  --color-error-900: #7F1D1D;
  --color-error-800: #991B1B;
  --color-error-700: #B91C1C;
  --color-error-600: #DC2626;
  --color-error-500: #EF4444;
  --color-error-400: #F87171;
  --color-error-300: #FCA5A5;
  --color-error-200: #FECACA;
  --color-error-100: #FEE2E2;
  --color-error-50: #FEF2F2;
  
  --color-warning-900: #78350F;
  --color-warning-800: #92400E;
  --color-warning-700: #B45309;
  --color-warning-600: #D97706;
  --color-warning-500: #F97316;
  --color-warning-400: #FA8839;
  --color-warning-300: #FBA468;
  --color-warning-200: #FCC096;
  --color-warning-100: #FEDCC5;
  --color-warning-50: #FEF1E8;
}

/* =================================================
   SEMANTIC COLOR ALIASES
   ================================================= */
:root {
  /* Text Colors */
  --text-heading: var(--color-primary-700);
  --text-body: var(--color-neutral-600);
  --text-muted: var(--color-neutral-500);
  --text-disabled: var(--color-neutral-300);
  --text-placeholder: var(--color-medium);
  --text-reverse: var(--color-white);
  --text-error: var(--color-error-500);
  --text-focus: var(--color-primary-400);
  
  /* Background Colors */
  --bg-primary: var(--color-white);
  --bg-secondary: var(--color-neutral-100);
  --bg-brand: var(--color-primary-700);
  --bg-dark: var(--color-primary-700);
  --bg-light: var(--color-off-white);
  
  /* Border Colors */
  --border-subtle: var(--color-neutral-200);
  --border-default: var(--color-neutral-300);
  --border-strong: var(--color-neutral-600);
  --border-primary: var(--color-primary-700);
  --border-accent: var(--color-accent-500);
  --border-teal: var(--color-teal-500);
  
  /* Interactive States */
  --state-hover: var(--color-accent-400);
  --state-active: var(--color-accent-600);
  --state-disabled: var(--color-neutral-300);
  --state-selected: var(--color-primary-100);
  
  /* Quote Specific */
  --quote-mark-color: var(--color-accent-500);
  --quote-attribution-color: var(--color-neutral-500);
}

/* =================================================
   TYPOGRAPHY TOKENS
   ================================================= */
:root {
  /* Font Families */
  --font-primary: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-secondary: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-ui: var(--font-primary); /* Lato for UI/Headlines */
  --font-content: var(--font-secondary); /* Open Sans for body text */
  
  /* Aliases for form components */
  --font-family-heading: var(--font-primary); /* Lato for headings */
  --font-family-body: var(--font-secondary); /* Open Sans for body text */
  --font-lato: var(--font-primary);
  --font-open-sans: var(--font-secondary);
  
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  
  /* Headlines (Lato) - Corrected sizes with 1.5x line heights */
  --text-h1-size: 36px;
  --text-h1-height: 54px;
  --text-h1-weight: var(--font-weight-bold);

  --text-h2-size: 30px;
  --text-h2-height: 45px;
  --text-h2-weight: var(--font-weight-bold);

  --text-h3-size: 24px;
  --text-h3-height: 36px;
  --text-h3-weight: var(--font-weight-bold);

  --text-h4-size: 21px;
  --text-h4-height: 31.5px;
  --text-h4-weight: var(--font-weight-bold);

  --text-h5-size: 18px;
  --text-h5-height: 27px;
  --text-h5-weight: var(--font-weight-bold);

  --text-h6-size: 16px;
  --text-h6-height: 24px;
  --text-h6-weight: var(--font-weight-bold);
  
  /* Paragraphs (Open Sans) */
  --text-large-size: 24px;
  --text-large-height: 36px;
  --text-large-weight: var(--font-weight-semibold);
  
  --text-lead-size: 21px;
  --text-lead-height: 31.5px;
  --text-lead-weight: var(--font-weight-regular);
  
  --text-default-size: 18px;
  --text-default-height: 27px;
  --text-default-weight: var(--font-weight-regular);
  
  --text-form-size: 18px;
  --text-form-height: 18px;
  --text-form-weight: var(--font-weight-regular);
  
  --text-small-size: 12px;
  --text-small-height: 18px;
  --text-small-weight: var(--font-weight-regular);
  
  --text-helper-size: 12px;
  --text-helper-height: 12px;
  --text-helper-weight: var(--font-weight-regular);
  --text-helper-style: italic;
  
  --text-caption-size: 10px;
  --text-caption-height: 15px;
  --text-caption-weight: var(--font-weight-regular);
  --text-caption-transform: uppercase;
  --text-caption-spacing: 0.05em;
  
  /* Labels (Lato) */
  --label-button-size: 16px;
  --label-button-weight: var(--font-weight-bold);
  --label-button-spacing: 0.05em;
  
  --label-form-size: 14px;
  --label-form-weight: var(--font-weight-bold);
  --label-form-spacing: 0.03em;
  
  --label-cta-size: 18px;
  --label-cta-weight: var(--font-weight-bold);
  --label-cta-spacing: 0.05em;
  
  /* Quotes (Lato Italic) */
  --quote-oversize-size: 30px;
  --quote-oversize-height: 45px;
  --quote-oversize-weight: var(--font-weight-light);
  
  --quote-large-size: 24px;
  --quote-large-height: 36px;
  --quote-large-weight: var(--font-weight-light);
  
  --quote-medium-size: 21px;
  --quote-medium-height: 31.5px;
  --quote-medium-weight: var(--font-weight-light);
  
  /* Links */
  --link-text-size: 18px;
  --link-text-height: 27px;
  --link-text-weight: var(--font-weight-regular);
  
  --link-menu-size: 21px;
  --link-menu-height: 21px;
  --link-menu-weight: var(--font-weight-regular);
  
  --link-attribution-size: 14px;
  --link-attribution-height: 21px;
  --link-attribution-weight: var(--font-weight-regular);
  
  /* Responsive Typography (Mobile) - Corrected with 1.5x line heights */
  --text-h1-mobile-size: 30px;
  --text-h1-mobile-height: 45px;

  --text-h2-mobile-size: 24px;
  --text-h2-mobile-height: 36px;

  --text-h3-mobile-size: 21px;
  --text-h3-mobile-height: 31.5px;
}

/* =================================================
   NAVIGATION TYPOGRAPHY TOKENS
   Extracted from Figma Dev Mode - Navigation Components
   ================================================= */
:root {
  /* Base Navigation Font */
  --nav-font-family: 'Lato', sans-serif;
  --nav-font-weight: 800; /* Heavy */
  --nav-font-style: normal;

  /* Navigation H1/36pt Simple (Desktop Large Menus) */
  --nav-h1-font-size: 36px;
  --nav-h1-line-height: 54px; /* 1.5 ratio */
  --nav-h1-text-transform: uppercase;
  --nav-h1-white-space: nowrap;
  --nav-h1-simple-default: var(--color-white);
  --nav-h1-simple-accent: var(--color-accent-500);
  --nav-h1-simple-hover: var(--color-accent-400);
  --nav-h1-simple-active: var(--color-accent-600);
  --nav-h1-simple-disabled: var(--color-neutral-400);

  /* Navigation H2/30 Simple (Desktop Menu Items) */
  --nav-h2-font-size: 30px;
  --nav-h2-line-height: 45px; /* 1.5 ratio */
  --nav-h2-text-transform: uppercase;
  --nav-h2-white-space: nowrap;
  --nav-h2-simple-default: var(--color-white);
  --nav-h2-simple-accent: var(--color-accent-500);
  --nav-h2-simple-hover: var(--color-accent-400);
  --nav-h2-simple-active: var(--color-accent-600);
  --nav-h2-simple-disabled: var(--color-neutral-400);

  /* Navigation H3/24 Simple (Tablet/Mobile Menu Items) */
  --nav-h3-font-size: 24px;
  --nav-h3-line-height: 36px; /* 1.5 ratio */
  --nav-h3-text-transform: uppercase;
  --nav-h3-white-space: nowrap;
  --nav-h3-simple-default: var(--color-white);
  --nav-h3-simple-accent: var(--color-accent-500);
  --nav-h3-simple-hover: var(--color-accent-400);
  --nav-h3-simple-active: var(--color-accent-600);
  --nav-h3-simple-disabled: var(--color-neutral-400);

  /* Navigation H4/21 Dropdown & Footer */
  --nav-h4-font-size: 21px;
  --nav-h4-line-height: 30.5px; /* ~1.45 ratio */
  --nav-h4-text-transform: none; /* normal case */
  --nav-h4-white-space: nowrap;
  --nav-h4-dropdown-default: var(--color-primary-700);
  --nav-h4-dropdown-hover: var(--color-primary-500);
  --nav-h4-dropdown-active: var(--color-primary-900);
  --nav-h4-dropdown-disabled: var(--color-neutral-400);
  --nav-h4-dropdown-hover-decoration: underline;
  --nav-h4-dropdown-hover-decoration-style: solid;
  --nav-h4-footer-default: var(--color-primary-700);
  --nav-h4-footer-hover: var(--color-primary-700);
  --nav-h4-footer-active: var(--color-primary-700);
  --nav-h4-footer-disabled: var(--color-neutral-400);

  /* Navigation H5/18 Simple (Small Menu Items) */
  --nav-h5-font-size: 18px;
  --nav-h5-line-height: 27px; /* 1.5 ratio */
  --nav-h5-text-transform: uppercase;
  --nav-h5-white-space: nowrap;
  --nav-h5-simple-default: var(--color-primary-700);
  --nav-h5-simple-accent: var(--color-accent-500);
  --nav-h5-simple-hover: var(--color-accent-400);
  --nav-h5-simple-active: var(--color-accent-600);
  --nav-h5-simple-disabled: var(--color-neutral-400);

  /* Navigation H6/16 Simple (Extra Small Menu Items) */
  --nav-h6-font-size: 16px;
  --nav-h6-line-height: 24px; /* 1.5 ratio */
  --nav-h6-text-transform: uppercase;
  --nav-h6-white-space: nowrap;
  --nav-h6-simple-default: var(--color-primary-700);
  --nav-h6-simple-accent: var(--color-accent-500);
  --nav-h6-simple-hover: var(--color-accent-400);
  --nav-h6-simple-active: var(--color-accent-600);
  --nav-h6-simple-disabled: var(--color-neutral-400);

  /* Navigation Accordion (H2/30 variant for Mobile) */
  --nav-accordion-font-size: 30px;
  --nav-accordion-line-height: 45px;
  --nav-accordion-text-transform: uppercase;
  /* Uses same color states as H2 Simple */
}

/* =================================================
   SPACING TOKENS
   ================================================= */
:root {
  /* Base Unit: 8px */
  --space-0: 0;
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem;  /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem;    /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem;  /* 24px */
  --space-8: 2rem;    /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem;   /* 48px */
  --space-16: 4rem;   /* 64px */
  --space-20: 5rem;   /* 80px */
  --space-24: 6rem;   /* 96px */
  
  /* Component Spacing */
  --padding-button: 16px 24px;
  --padding-button-small: 12px 16px;
  --padding-button-large: 20px 32px;
  --padding-form: 12px 16px;
  --padding-card: 1.5rem;
  --padding-section: 2rem;
  
  /* Margins */
  --margin-element: 1rem;
  --margin-section: 3rem;
  --margin-paragraph: 1.5rem;
}

/* =================================================
   EFFECTS & SHADOWS
   ================================================= */
:root {
  /* Box Shadows */
  --shadow-none: 0px 4px 4px 0px rgba(0, 0, 0, 0);
  --shadow-subtle: 4px 4px 12px 0px rgba(0, 0, 0, 0.1);
  --shadow-standard: 4px 4px 12px 0px rgba(0, 0, 0, 0.15);
  --shadow-medium: 4px 4px 12px 0px rgba(0, 0, 0, 0.2);
  --shadow-strong: 4px 4px 12px 0px rgba(0, 0, 0, 0.25);
  
  /* Focus States */
  --focus-outline: 2px solid var(--color-accent-500);
  --focus-outline-offset: 2px;
  
  /* Transitions */
  --transition-fast: 0.15s ease-in-out;
  --transition-base: 0.2s ease-in-out;
  --transition-slow: 0.3s ease-in-out;
  
  /* Border Radius */
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-large: 12px;
  --radius-round: 9999px;
}

/* =================================================
   LAYOUT TOKENS
   ================================================= */
:root {
  /* Container Widths */
  --container-standard: 1920px;     /* Primary content container - used by 95% of sections */
  --container-narrow: 1200px;       /* For text-heavy content (long-form articles, legal pages) */
  --container-medium: 1440px;       /* Rarely used - available if needed */
  --container-full: 100vw;          /* Full viewport for backgrounds */
  
  /* Legacy aliases - DEPRECATED but kept for backward compatibility */
  --container-max: 1920px;          /* Update to match standard */
  --container-wide: 1920px;         /* Update to match standard */
  
  /* Breakpoints */
  --breakpoint-mobile: 380px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1150px;
  --breakpoint-desktop-plus: 1920px;
  
  /* Grid */
  --grid-columns: 12;
  --grid-gap: var(--space-6);
  
  /* Z-Index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  
  /* DesktopPlus Viewport Background */
  --bg-viewport-tile: url('../assets/patterns/background-lines-white.svg');
  --bg-viewport-opacity: 0.05;
  --bg-viewport-size: 200px 200px;
  --bg-viewport-color: var(--color-neutral-50);
}

/* =================================================
   COMPONENT-SPECIFIC TOKENS
   ================================================= */

/* -------------------------------------------------
   BUTTONS
   ------------------------------------------------- */
:root {
  /* Primary Button */
  --button-primary-bg: var(--color-primary-700);
  --button-primary-hover: var(--color-primary-500);
  --button-primary-active: var(--color-primary-900);
  --button-primary-disabled: var(--color-primary-400);
  
  /* Secondary Button */
  --button-secondary-bg: var(--color-accent-500);
  --button-secondary-hover: var(--color-accent-400);
  --button-secondary-active: var(--color-accent-600);
  --button-secondary-disabled: var(--color-accent-400);
  
  /* Tertiary Button */
  --button-tertiary-bg: var(--color-teal-500);
  --button-tertiary-hover: var(--color-teal-300);
  --button-tertiary-active: var(--color-teal-700);
  
  /* Button Sizing */
  --button-height-small: 40px;
  --button-height-medium: 48px;
  --button-height-large: 56px;
  --button-gap: 12px;
  
  /* Semantic Success Aliases */
  --color-success: var(--color-teal-500);
  --state-success: var(--color-teal-500);
  --bg-success-subtle: var(--color-teal-50);
}

/* -------------------------------------------------
   NAVIGATION
   ------------------------------------------------- */
:root {
  /* Main Menu - Desktop */
  --nav-link-color: var(--color-white);
  --nav-link-hover: var(--color-accent-400);
  --nav-link-active: var(--color-accent-600);
  --nav-dropdown-bg: var(--color-neutral-100);
  
  /* Main Menu Aliases */
  --link-menu: var(--nav-link-color);
  --link-hover: var(--nav-link-hover);
  --link-active: var(--nav-link-active);
  
  /* Dropdown Menu - Desktop */
  --link-dropdown: var(--color-primary-700);
  --link-dropdown-hover: var(--color-primary-500);
  --link-dropdown-active: var(--color-primary-900);
  --link-dropdown-disabled: var(--color-neutral-400);
  
  /* Dropdown Container */
  /* Dropdown Container Layout */
  --dropdown-padding-block: 32px;
  --dropdown-padding-inline-start: 32px;
  --dropdown-padding-inline-end: 64px;
  --dropdown-gap: 32px; /* Gap between link groups */
  --dropdown-link-gap: 16px; /* Gap between individual links */

  /* Dropdown Container Visual */
  --dropdown-border-radius: 8px;
  --dropdown-box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.1);
  --dropdown-overflow: clip;

  /* Dropdown Background Colors by State */
  --dropdown-bg-default: var(--color-neutral-100); /* #eceeef */
  --dropdown-bg-hover: var(--color-accent-100); /* #f4ebcd - Light Gold */
  --dropdown-bg-active: var(--color-teal-100); /* #d7f5f5 - Light Teal */
  --dropdown-bg-disabled: var(--color-neutral-100); /* Same as default */

  /* Dropdown Link Text Colors by State */
  --dropdown-link-default: var(--color-primary-700); /* Navy */
  --dropdown-link-hover: var(--color-primary-500); /* Bright Blue */
  --dropdown-link-hover-decoration: underline;
  --dropdown-link-hover-decoration-style: solid;
  --dropdown-link-active: var(--color-primary-900); /* Dark Navy */
  --dropdown-link-disabled: var(--color-neutral-400); /* Gray */
  --dropdown-link-sibling-disabled: var(--color-neutral-400); /* Gray out non-active items */

  /* Dropdown Typography (inherits from Navigation H4/21) */
  --dropdown-font-family: var(--nav-font-family);
  --dropdown-font-weight: var(--nav-font-weight);
  --dropdown-font-size: var(--nav-h4-font-size);
  --dropdown-line-height: var(--nav-h4-line-height);
  --dropdown-text-transform: var(--nav-h4-text-transform);
  --dropdown-white-space: var(--nav-h4-white-space);

  /* Dropdown Mix Blend Mode */
  --dropdown-hover-blend-mode: multiply; /* Applied to container on hover */

  /* Tablet Dropdown - Card Variant (768-1149px) */
  --dropdown-tablet-card-width: clamp(250px, 28vw, 325px);
  --dropdown-tablet-card-padding-block: 20px;
  --dropdown-tablet-card-padding-inline-start: 24px;
  --dropdown-tablet-card-padding-inline-end: 16px;
  --dropdown-tablet-card-gap-sections: 20px;
  --dropdown-tablet-card-gap-items: 10px;
  --dropdown-tablet-card-border-radius: 8px;
  --dropdown-tablet-card-box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.1);
  --dropdown-tablet-card-overflow: clip;
  --dropdown-tablet-card-bg-default: var(--color-neutral-100); /* #eceeef */
  --dropdown-tablet-card-bg-hover: var(--color-accent-100); /* #f4ebcd - Light Gold */
  --dropdown-tablet-card-list-padding: 10px;
  --dropdown-tablet-position-top: 100px;
  --dropdown-tablet-position-right: 45px;

  /* Tablet Dropdown Typography */
  --dropdown-tablet-heading-font-size: 30px;
  --dropdown-tablet-heading-line-height: 45px;
  --dropdown-tablet-heading-text-transform: uppercase;
  --dropdown-tablet-heading-color: var(--color-primary-700);
  --dropdown-tablet-item-font-size: 21px;
  --dropdown-tablet-item-line-height: 30.5px;
  --dropdown-tablet-item-text-transform: none;
  --dropdown-tablet-item-color-default: var(--color-primary-700);
  --dropdown-tablet-item-color-hover: var(--color-primary-500);
  --dropdown-tablet-item-min-height: 44px;

  /* Dropdown Animation - Slow and Smooth */
  --dropdown-transition-duration: 0.4s;
  --dropdown-transition-timing: ease;

  /* Mobile Menu Icons */
  --menu-icon-tablet-width: 54px;
  --menu-icon-tablet-height: 53px;
  --menu-icon-mobile-width: 54px;
  --menu-icon-mobile-height: 45px;
}

/* -------------------------------------------------
   FORMS
   ------------------------------------------------- */
:root {
  /* Form Borders */
  --form-border-default: 2px solid var(--color-neutral-300);
  --form-border-focus: 2px solid var(--color-primary-700);
  --form-border-error: 2px solid var(--color-error-500);
  --form-border-success: 2px solid var(--color-teal-500);
  
  /* Form Colors */
  --form-text-color: var(--color-darkest);
  --form-placeholder: var(--color-medium);
  
  /* Form Sizing */
  --form-input-height-large: 48px;
  --form-input-height-medium: 36px;
  --form-input-height-small: 32px;
  --form-label-margin: var(--space-2);
  --form-helper-margin: var(--space-1);
  
  /* Form Container Responsive Padding */
  --form-container-padding-desktop: 29px 27px;
  --form-container-padding-tablet: 24px 20px;
  --form-container-padding-mobile: 16px 12px;
  
  /* Form Backgrounds */
  --bg-form-container: var(--color-neutral-100);
  --bg-form-field: var(--color-white);
}

/* -------------------------------------------------
   ICONS
   ------------------------------------------------- */
:root {
  /* Icon Sizing System */
  --icon-size-small: 16px;
  --icon-size-medium: 24px;
  --icon-size-large: 32px;
  --icon-margin: var(--space-2);
}

/* -------------------------------------------------
   CARDS (NEW IN v4.0)
   ------------------------------------------------- */
:root {
  /* Card/BlogPost States */
  --card-blog-bg-default: var(--bg-primary);
  --card-blog-bg-hover: var(--color-accent-50);
  --card-blog-bg-active: var(--color-accent-100);
  --card-blog-bg-disabled: var(--color-neutral-100);
  
  /* Card/BlogPost Read More Link */
  --card-blog-link-default: var(--color-primary-500);
  --card-blog-link-hover: var(--color-teal-500);
  --card-blog-link-active: var(--color-primary-600);
  
  /* Card/FAQ Accordion */
  --faq-transition-speed: var(--transition-base);
  --faq-height-transition: var(--transition-slow);
  --faq-rotation-transition: var(--transition-base);
  --faq-chevron-size: 30px;
  --faq-chevron-line-height: 45px;
  --faq-answer-indent-desktop: var(--space-8);
  --faq-answer-indent-mobile: var(--space-5);
  
  /* Card/Resources Dimensions */
  --card-resources-width: 310px;
  --card-resources-content-width: 286px;
  --card-resources-header-height: 90px;
  --card-resources-button-height: 42px;
  --card-resources-button-padding-x: 64px;
  
  /* Card/Resources Background Overlays */
  --card-resources-overlay: rgba(27, 20, 100, 0.85);
  --card-resources-overlay-gradient: linear-gradient(180deg, rgba(27,20,100,0.7) 0%, rgba(27,20,100,0.95) 100%);
  
  /* Card/BannerGraphic */
  --card-banner-icon-container: 90px;
  --card-banner-icon-max-width: 85px;
  --card-banner-icon-max-height: 68px;
}

/* -------------------------------------------------
   BANNERS (NEW IN v4.0)
   ------------------------------------------------- */
:root {
  /* Banner Semantic Colors */
  --banner-headline: var(--text-reverse);
  --banner-subheading: var(--color-neutral-200);
  --banner-bg: var(--bg-brand);
  --banner-accent: var(--color-accent-500);
  
  /* Banner Typography - Desktop */
  --banner-headline-size-desktop: 36px;
  --banner-headline-height-desktop: 54px;
  --banner-subheading-size: 24px;
  --banner-subheading-height: 36px;
  
  /* Banner Typography - Mobile */
  --banner-headline-size-mobile: 24px;
  --banner-headline-height-mobile: 36px;
  
  /* Banner Icon Sizing */
  --banner-icon-container-size: 90px;
  --banner-icon-max-width: 85px;
  --banner-icon-max-height: 68px;
}

/* -------------------------------------------------
   HERO (NEW IN v4.0)
   ------------------------------------------------- */
:root {
  /* Hero Custom Padding */
  --hero-padding-x: 40px;
  --hero-padding-mobile: 0;
  
  /* Hero Container Padding */
  --container-padding-x: 16px;
}

/* -------------------------------------------------
   FOOTER (NEW IN v4.0)
   ------------------------------------------------- */
:root {
  /* Footer specific tokens if needed */
  /* Currently using standard nav and text tokens */
}

/* -------------------------------------------------
   TEXT BLOCK COMPONENT (NEW - Week 47 Thursday)
   Generic text block style tokens for ACF integration
   ------------------------------------------------- */
:root {
  /* Base Text Block Tokens */
  --text-block-padding-y: var(--space-16); /* 64px vertical */
  --text-block-padding-y-tablet: var(--space-12); /* 48px tablet */
  --text-block-padding-y-mobile: var(--space-10); /* 40px mobile */

  --text-block-container-padding-x: 40px;
  --text-block-container-padding-x-mobile: 20px;

  --text-block-content-max-width: 800px;
  --text-block-section-margin: var(--space-12); /* 48px */
  --text-block-section-margin-mobile: var(--space-8); /* 32px */

  /* Default Variant Tokens */
  --text-block-default-bg: var(--color-white);
  --text-block-default-text: var(--color-neutral-600);
  --text-block-default-heading: var(--color-primary-700);
  --text-block-default-max-width: 800px;

  /* Wide Variant Tokens */
  --text-block-wide-bg: var(--color-white);
  --text-block-wide-text: var(--color-neutral-600);
  --text-block-wide-heading: var(--color-primary-700);
  --text-block-wide-max-width: 100%; /* Full width */
  --text-block-wide-padding-x: 64px;
  --text-block-wide-padding-x-mobile: 32px;

  /* Narrative Variant Tokens (Blog posts) */
  --text-block-narrative-bg: var(--color-white);
  --text-block-narrative-text: var(--color-neutral-600);
  --text-block-narrative-heading: var(--color-primary-700);
  --text-block-narrative-max-width: 800px;
  --text-block-narrative-lead-text: var(--color-neutral-700);

  /* Pillar Variant Tokens (Guides with gray background) */
  --text-block-pillar-bg: var(--color-neutral-50);
  --text-block-pillar-text: var(--color-neutral-600);
  --text-block-pillar-heading: var(--color-primary-700);
  --text-block-pillar-max-width: 900px;
  --text-block-pillar-lead-text: var(--color-neutral-700);

  /* Featured Variant Tokens (Emphasized content) */
  --text-block-featured-bg: var(--color-neutral-50);
  --text-block-featured-text: var(--color-neutral-700);
  --text-block-featured-heading: var(--color-primary-700);
  --text-block-featured-max-width: 800px;
  --text-block-featured-padding: var(--space-10); /* 40px */
  --text-block-featured-border: 2px solid var(--color-accent-500);
  --text-block-featured-radius: var(--radius-medium);

  /* Sidebar Variant Tokens (Condensed style) */
  --text-block-sidebar-bg: var(--color-neutral-50);
  --text-block-sidebar-text: var(--color-neutral-600);
  --text-block-sidebar-heading: var(--color-primary-700);
  --text-block-sidebar-max-width: 400px;
  --text-block-sidebar-padding: var(--space-6); /* 24px */
  --text-block-sidebar-font-size: var(--text-paragraph-small-size);
  --text-block-sidebar-line-height: var(--text-paragraph-small-height);

  /* Icon Integration Tokens */
  --text-block-icon-callout-bg: var(--color-neutral-50);
  --text-block-icon-callout-border-color: var(--color-accent-500);
  --text-block-icon-callout-padding: var(--space-8); /* 32px */
  --text-block-icon-callout-gap: var(--space-6); /* 24px */

  --text-block-icon-grid-gap: var(--space-8); /* 32px */
  --text-block-icon-grid-gap-mobile: var(--space-5); /* 20px */
  --text-block-icon-grid-min-width: 250px;

  /* List Tokens */
  --text-block-list-margin-y: var(--space-8); /* 32px */
  --text-block-list-margin-y-mobile: var(--space-6); /* 24px */
  --text-block-list-padding-left: var(--space-8); /* 32px */
  --text-block-list-padding-left-mobile: var(--space-6); /* 24px */
  --text-block-list-item-margin: var(--space-5); /* 20px */
  --text-block-list-item-margin-mobile: var(--space-4); /* 16px */

  /* Typography Spacing Tokens */
  --text-block-h1-margin-bottom: var(--space-8); /* 32px */
  --text-block-h2-margin-top: var(--space-12); /* 48px */
  --text-block-h2-margin-top-mobile: var(--space-8); /* 32px */
  --text-block-h2-margin-bottom: var(--space-6); /* 24px */
  --text-block-h2-margin-bottom-mobile: var(--space-5); /* 20px */
  --text-block-h3-margin-top: var(--space-10); /* 40px */
  --text-block-h3-margin-top-mobile: var(--space-6); /* 24px */
  --text-block-h3-margin-bottom: var(--space-5); /* 20px */
  --text-block-h3-margin-bottom-mobile: var(--space-4); /* 16px */

  --text-block-paragraph-margin: var(--space-6); /* 24px */
  --text-block-paragraph-lead-margin: var(--space-8); /* 32px */

  /* Quote Tokens */
  --text-block-quote-margin-y: var(--space-12); /* 48px */
  --text-block-quote-margin-y-mobile: var(--space-8); /* 32px */
  --text-block-quote-padding: var(--space-10); /* 40px */
  --text-block-quote-padding-mobile: var(--space-6); /* 24px */
  --text-block-quote-bg: var(--color-neutral-50);
  --text-block-quote-border-color: var(--color-accent-500);
}

/* =================================================
   END OF VARIABLES
   ================================================= */