/* ========================================
   TYPOGRAPHY SPECIFICATION SHEET
   Based on Open Sans Font Family
   ======================================== */

:root {
  /* Font Family */
  --font-family-primary: 'Open Sans', sans-serif;
  
  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  
  /* Font Sizes */
  --font-size-xs: 13px;
  --font-size-s: 14px;
  --font-size-m: 16px;
  --font-size-l: 20px;
  --font-size-xl: 24px;
  
  /* Line Heights */
  --line-height-h1: 52px;
  --line-height-h2: 49px;
  --line-height-h3: 34px;
  --line-height-label: 24px;
  --line-height-cta: 25px;
  --line-height-body: 29px;
  --line-height-caption: 28px;
  
  /* ========================================
     COLOR SPECIFICATION - COMPLETE PALETTE
     Based on Ingredion Brand Guidelines
     ======================================== */
  
  /* ========================================
     GREEN PALETTE
     ======================================== */
  --color-green-900: #314326;
  --color-green-800: #45692e;
  --color-green-700: #51862f;
  --color-green-600: #6cb33e;
  --color-green-500: #91c66e;
  --color-green-400: #b5d99e;
  --color-green-300: #E2F0D8;
  
  /* Backward compatibility aliases (deprecated - use 300-900 scale) */
  --color-green-100: var(--color-green-900);
  --color-green-90: var(--color-green-900);
  --color-green-80: var(--color-green-800);
  --color-green-70: var(--color-green-700);
  --color-green-60: var(--color-green-600);
  --color-green-50: var(--color-green-500);
  --color-green-40: var(--color-green-400);
  --color-green-30: var(--color-green-300);
  --color-green-20: var(--color-green-500);
  --color-green-10: var(--color-green-400);
  
  /* ========================================
     BLACK/DARK PALETTE
     ======================================== */
  --color-black-100: #000000;
  --color-black-90: #1A1A1A;
  --color-black-80: #333333;
  --color-black-70: #4D4D4D;
  --color-black-60: #666666;
  --color-black-50: #808080;
  --color-black-40: #999999;
  --color-black-30: #B3B3B3;
  --color-black-20: #CCCCCC;
  --color-black-10: #E6E6E6;
  
  /* ========================================
     GRAY PALETTE
     ======================================== */
  --color-gray-100: #4A4A4A;
  --color-gray-90: #5E5E5E;
  --color-gray-80: #727272;
  --color-gray-70: #868686;
  --color-gray-60: #9A9A9A;
  --color-gray-50: #AEAEAE;
  --color-gray-40: #C2C2C2;
  --color-gray-30: #D6D6D6;
  --color-gray-20: #EAEAEA;
  --color-gray-10: #F5F5F5;
  
  /* ========================================
     TEAL PALETTE
     ======================================== */
  --color-teal-100: #003D3A;
  --color-teal-90: #00544F;
  --color-teal-80: #006B64;
  --color-teal-70: #00827A;
  --color-teal-60: #00998F;
  --color-teal-50: #00B0A4;
  --color-teal-40: #33C0B6;
  --color-teal-30: #66D0C8;
  --color-teal-20: #99E0DA;
  --color-teal-10: #CCF0EC;
  
  /* ========================================
     RED/BROWN PALETTE
     ======================================== */
  --color-red-brown-100: #3D0A00;
  --color-red-brown-90: #5C1000;
  --color-red-brown-80: #7B1600;
  --color-red-brown-70: #9A1C00;
  --color-red-brown-60: #B92200;
  --color-red-brown-50: #D82800;
  --color-red-brown-40: #E55333;
  --color-red-brown-30: #ED7F66;
  --color-red-brown-20: #F5AA99;
  --color-red-brown-10: #FDD6CC;
  
  /* ========================================
     YELLOW PALETTE
     ======================================== */
  --color-yellow-100: #665200;
  --color-yellow-90: #856A00;
  --color-yellow-80: #A38100;
  --color-yellow-70: #C29900;
  --color-yellow-60: #E0B000;
  --color-yellow-50: #FFC800;
  --color-yellow-40: #FFD333;
  --color-yellow-30: #FFDD66;
  --color-yellow-20: #FFE899;
  --color-yellow-10: #FFF2CC;
  
  /* ========================================
     ORANGE PALETTE
     ======================================== */
  --color-orange-100: #4D2200;
  --color-orange-90: #6B2F00;
  --color-orange-80: #893D00;
  --color-orange-70: #A74A00;
  --color-orange-60: #C55700;
  --color-orange-50: #E36500;
  --color-orange-40: #E98433;
  --color-orange-30: #EFA366;
  --color-orange-20: #F5C299;
  --color-orange-10: #FBE1CC;
  
  
  /* ========================================
     BRAND PRIMARY COLORS
     ======================================== */
  --color-brand-primary-green: #6CB33E;
  --color-brand-primary-black: #000000;
  
  /* ========================================
     SEMANTIC/UI COLORS
     ======================================== */
  
  /* Success States */
  --color-success-dark: #1B3D0C;
  --color-success-primary: #6CB33E;
  --color-success-light: #BDEA5D;
  --color-success-bg: #E1F9EC; 
  
  /* Warning States */  
  --color-warning-dark: #665200;
  --color-warning-primary: #FFC800;
  --color-warning-light: #FFF2CC;
  --color-warning-bg: #FFF7CF;
  
  /* Error States */
  --color-error-dark: #3D0A00;
  --color-error-primary: #D82807;
  --color-error-light: #FDD6CC;
  --color-error-bg: #FFF5F3;
  
  /* Info/Neutral States */
  --color-info-dark: #003D3A;
  --color-info-primary: #00B0A4;
  --color-info-light: #CCF0EC;
  --color-info-bg: #D6E6FF;
  
  /* ========================================
     UI STATE COLORS
     ======================================== */
  
  /* Default State */
  --color-default-bg: #FFFFFF;
  --color-default-border: #D6D6D6;
  --color-default-text: #4A4A4A;
  
  /* Hover State */
  --color-hover-bg: var(--color-green-300);
  --color-hover-navbg: #E8E9E8;
  --color-hover-border: #AEAEAE;
  --color-hover-text: #000000;
  
  /* Focus State */
  --color-focus-border: #00B0A4;
  --color-focus-outline: rgba(0, 176, 164, 0.3);
  --color-focus-bg: #FFFFFF;
  
  /* Active/Selected State */
  --color-active-bg: #6CB33E;
  --color-active-text: #FFFFFF;
  --color-active-border: #517727;
  
  /* Disabled State */
  --color-disabled-bg: #F5F5F5;
  --color-disabled-text: #C2C2C2;
  --color-disabled-border: #B2B4B34D;
  --color-disabled-bg-primary: #B2B4B34D;
  --color-disabled-bg-secondary: #B2B4B31A;
  
  /* Button State Colors */
  --color-button-text: #373738;
  --color-button-shadow-primary: #387D0C;
  --color-button-shadow-secondary: #6CB33E;
  --color-button-border-focus-primary: #387D0C;
  --color-button-border-focus-secondary: #6CB33E;
  --color-button-border-active-secondary: #6CB33E;
  
  /* Button Icon Colors */
  --color-icon-default: #706F73;
  --color-icon-hover: #408613;
  --color-icon-active: #408613;
  --color-icon-focus: #373738;
  --color-icon-disabled: #B2B4B3;
  
  /* Text Link Colors */
  --color-link-default: #373738;
  --color-link-hover: #408613;
  --color-link-active: #408613;
  --color-link-focus: #373738;
  --color-link-disabled: #B2B4B3;
  
  
  /* ========================================
     BACKGROUND & SURFACE COLORS
     ======================================== */
  
  /* Background Levels */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F5F5F5;
  --color-bg-tertiary: #EAEAEA;
  --color-bg-dark: #000000;
  --color-bg-overlay: rgba(0, 0, 0, 0.6);
  --color-bg-overlay-light: rgba(0, 0, 0, 0.3);
  --color-bd-hover: #68E0A133;
  
  /* Surface Variants */
  --color-surface-elevated: #FFFFFF;
  --color-surface-container: #F5F5F5;
  --color-surface-card: #FFFFFF;
  --color-surface-modal: #FFFFFF;
  
  /* ========================================
     TEXT COLORS
     ======================================== */
  
  /* Text Hierarchy */
  --color-text-primary: #373738;
  --color-text-secondary: #4A4A4A;
  --color-text-tertiary: #9A9A9A;
  --color-text-disabled: #C2C2C2;
  --color-text-inverse: #FFFFFF;
  --color-text-link: #00B0A4;
  --color-text-link-hover: #006B64;
  --color-text-link-visited: #003D3A;
  --color-text-on-color: #FFFFFF;
  
  /* ========================================
     BORDER & DIVIDER COLORS
     ======================================== */
  
  --color-border-default: #D6D6D6;
  --color-border-light: #EAEAEA;
  --color-border-medium: #AEAEAE;
  --color-border-dark: #727272;
  --color-divider: #EAEAEA;
  --color-divider-strong: #C2C2C2;
  
  /* ========================================
     SHADOW COLORS
     ======================================== */
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-modal: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
  --shadow-card: 0px 2px 8px 0px rgba(217, 217, 217, 0.15);
  --shadow-elevated: 0px 4px 16px rgba(0, 0, 0, 0.2);
  
  /* ========================================
     BACKDROP & SURFACE COLORS
     ======================================== */
  
  --color-backdrop: rgba(0, 0, 0, 0.5);
  --color-surface-secondary: rgba(112, 111, 115, 0.05);
  
  /* Legacy aliases (for backward compatibility) */
  --color-primary: #6CB33E;
  --color-secondary: #4A4A4A;
  --color-black: #000000;
  
  /* Headings - H1 */
  --h1-font-size: 52px;
  --h1-font-weight: var(--font-weight-bold);
  --h1-line-height: var(--line-height-h1);
  --h1-color: var(--color-black);
  
  /* Headings - H2 */
  --h2-font-size: 24px;
  --h2-font-weight: var(--font-weight-semi-bold);
  --h2-line-height: var(--line-height-h2);
  --h2-color: var(--color-black);
  
  /* Headings - H3 */
  --h3-font-size: 20px;
  --h3-font-weight: var(--font-weight-semi-bold);
  --h3-line-height: var(--line-height-h3);
  --h3-color: var(--color-primary);
  
  /* Headings - H4 */
  --h4-font-size: 24px;
  --h4-font-weight: var(--font-weight-semi-bold);
  --h4-line-height: 48px;
  --h4-color: var(--color-primary);
  
  /* Body Text - Paragraph */
  --body-paragraph-font-size: 14px;
  --body-paragraph-line-height: 29px;
  --body-paragraph-font-weight: var(--font-weight-normal);
  --body-paragraph-color: var(--color-primary);
  
  /* Body Text - Small Text */
  --body-small-font-size: 12px;
  --body-small-line-height: 14px;
  --body-small-font-weight: var(--font-weight-normal);
  --body-small-color: #706F73;
  
  /* PaletteSection Layout */
  --palette-section-width: 967px;
  --palette-section-gap: 24px;
  --palette-section-height-default: 905.5px;
  --palette-section-height-variant: 921.5px;
}

/* ========================================
   TYPOGRAPHY CLASSES
   ======================================== */

/* Headings */
h1, .h1 {
  font-family: var(--font-family-primary);
  font-size: var(--h1-font-size);
  font-weight: var(--h1-font-weight);
  line-height: var(--h1-line-height);
  color: var(--h1-color);
}

h2, .h2 {
  font-family: var(--font-family-primary);
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  line-height: var(--h2-line-height);
  color: var(--h2-color);
}

h3, .h3 {
  font-family: var(--font-family-primary);
  font-size: var(--h3-font-size);
  font-weight: var(--h3-font-weight);
  line-height: var(--h3-line-height);
  color: var(--h3-color);
}

h4, .h4 {
  font-family: var(--font-family-primary);
  font-size: var(--h4-font-size);
  font-weight: var(--h4-font-weight);
  line-height: var(--h4-line-height);
  color: var(--h4-color);
}

/* Body Text */
p, .body-text {
  font-family: var(--font-family-primary);
  font-size: var(--body-paragraph-font-size);
  line-height: var(--body-paragraph-line-height);
  font-weight: var(--body-paragraph-font-weight);
  color: var(--body-paragraph-color);
}

.small-text {
  font-family: var(--font-family-primary);
  font-size: var(--body-small-font-size);
  line-height: var(--body-small-line-height);
  font-weight: var(--body-small-font-weight);
  color: var(--body-small-color);
}

/* ========================================
   PALETTE SECTION LAYOUT
   ======================================== */

.palette-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: var(--palette-section-gap);
  width: var(--palette-section-width);
  height: var(--palette-section-height-default);
  border-radius: 0px;
  flex: none;
  align-self: stretch;
  flex-grow: 0;
}

/* Order variants */
.palette-section:nth-child(1) { order: 1; }
.palette-section:nth-child(2) { order: 2; }
.palette-section:nth-child(3) { order: 3; }
.palette-section:nth-child(4) { order: 4; }
.palette-section:nth-child(5) { 
  order: 5;
  height: var(--palette-section-height-variant);
}
.palette-section:nth-child(6) { order: 6; }
.palette-section:nth-child(7) { order: 7; }