/**
 * @file
 * Corporate+ Design System - Colors, Typography & Bridge Mapping
 * 
 * This file establishes the design foundation for websites using
 * the Corporate+ theme. It provides:
 * 
 * 1. PROJECT COLORS - Your brand colors as CSS custom properties
 * 2. TYPOGRAPHY SYSTEM - Fluid responsive font sizing with clamp()
 * 3. BRIDGE MAPPING - Maps legacy --mt-* variables to project colors
 * 
 * USAGE:
 * - Use project color variables (--color-*) for new development
 * - Legacy --mt-* variables will automatically use project colors
 * - Typography utilities (.text-lg, .font-bold) available for rapid styling
 * 
 * REPLICATION:
 * - Copy this file to other Corporate+ theme instances
 * - Modify Section 1 (Project Colors) for each brand
 * - Sections 2-3 remain consistent across sites
 */

/* ==========================================================================
   SECTION 1: PROJECT COLORS
   Modify these for each website/brand
   ========================================================================== */

:root {
  /* 
   * Primary Brand Colors 
   */
  --color-primary: #005DAB;           /* LTDCA Blue - main brand color */
  --color-primary-dark: #004080;      /* Darker shade for hover states */
  --color-primary-light: #3385c6;     /* Lighter shade for backgrounds */
  
  --color-secondary: #0CA9BC;         /* Teal - accent color */
  --color-secondary-dark: #098a99;    /* Darker teal */
  --color-secondary-light: #4dc4d3;   /* Lighter teal */
  
  --color-accent: #FFD430;            /* Yellow - highlight/CTA accent */
  --color-accent-dark: #e6bc00;       /* Darker yellow */
  
  /* 
   * Text Colors 
   */
  --color-text: #555555;              /* Body text */
  --color-text-muted: #777777;        /* Secondary/muted text */
  --color-heading: #555555;           /* Headings (same as body for LTDCA) */
  --color-heading-dark: #333333;      /* Darker heading option */
  
  /* 
   * Background Colors 
   */
  --color-white: #ffffff;
  --color-off-white: #f5f5f5;         /* Tint backgrounds */
  --color-light-gray: #e9e9e9;        /* Subtle backgrounds */
  --color-gray: #757575;              /* Gray shade */
  --color-dark-gray: #363636;         /* Dark backgrounds */
  --color-black: #000000;
  
  /* 
   * UI State Colors 
   */
  --color-success: #3E9300;
  --color-warning: #EA9900;
  --color-danger: #CC0000;
  
  /* 
   * Link Colors 
   */
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-text);
  --color-link-visited: var(--color-primary-dark);
  
  /* 
   * Font Stacks 
   */
  --font-sans: "Cabin", Helvetica, Arial, sans-serif;
  --font-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-mono: "Source Code Pro", Consolas, Monaco, monospace;
  
  /* 
   * Button Styles - Consistent sizing across all button types
   * Buttons use --font-size-md for better prominence
   */
  --button-font-size: var(--font-size-md);
  --button-font-size-sm: var(--font-size-base);
  --button-font-size-lg: var(--font-size-lg);
  --button-font-weight: 700;
  --button-padding: 15px 24px;
  --button-padding-sm: 10px 18px;
  --button-padding-lg: 18px 32px;
  --button-border-radius: 4px;
  --button-border-width: 1px;
  --button-transition: all 0.2s ease-in-out;
}


/* ==========================================================================
   SECTION 2: TYPOGRAPHY SYSTEM
   Fluid responsive sizing - consistent across all sites
   
   Updated scale based on modern best practices (2024-2025):
   - Base text: 16-18px (industry standard for readability)
   - Headings: 1.25x to 2.5x base for clear hierarchy
   - Buttons: Slightly larger than body for prominence
   ========================================================================== */

:root {
  /* 
   * Root font size: 16px minimum, scaling to 18px on large displays
   */
  --font-size-root: clamp(16px, calc(15px + 0.25vw), 18px);
  
  /* 
   * Type Scale - Using clamp() for fluid responsive sizing
   * Format: clamp(min, preferred, max)
   * 
   * Scale ratio: ~1.2 (Minor Third) for balanced hierarchy
   */
  
  /* 2X Small - Footer fine print, legal text (11-12px / ~0.75rem) */
  --font-size-2xs: clamp(11px, calc(10px + 0.15vw), 12px);
  
  /* Extra Small - Captions, fine print, badges (12-13px) */
  --font-size-xs: clamp(12px, calc(11px + 0.2vw), 13px);
  
  /* Small - Secondary text, labels, meta info (14-15px) */
  --font-size-sm: clamp(14px, calc(13px + 0.2vw), 15px);
  
  /* Base - Body text (16-18px) - industry standard */
  --font-size-base: clamp(16px, calc(15px + 0.3vw), 18px);
  
  /* Medium - Slightly emphasized body, buttons, lead text (17-19px) */
  --font-size-md: clamp(17px, calc(16px + 0.3vw), 19px);
  
  /* Large - Small headings, h5, emphasized content (18-21px) */
  --font-size-lg: clamp(18px, calc(17px + 0.4vw), 21px);
  
  /* Extra Large - h4 level headings (20-24px) */
  --font-size-xl: clamp(20px, calc(18px + 0.5vw), 24px);
  
  /* 2XL - h3-h4 level headings (22-26px) */
  --font-size-2xl: clamp(22px, calc(20px + 0.6vw), 26px);
  
  /* 3XL - h3 level headings (24-30px) */
  --font-size-3xl: clamp(24px, calc(22px + 0.8vw), 30px);
  
  /* 4XL - h2 level headings (28-38px) */
  --font-size-4xl: clamp(28px, calc(26px + 1.2vw), 38px);
  
  /* 5XL - h1 level headings (32-44px) */
  --font-size-5xl: clamp(32px, calc(30px + 1.4vw), 44px);
  
  /* 6XL - Hero headings (38-52px) */
  --font-size-6xl: clamp(38px, calc(34px + 1.8vw), 52px);
  
  /* 7XL - Display/Jumbo headings (44-64px) */
  --font-size-7xl: clamp(44px, calc(40px + 2.2vw), 64px);
  
  /* 
   * Line Heights 
   */
  --line-height-tight: 1.2;
  --line-height-snug: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.8;
  
  /*
   * Font Weights
   */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /*
   * Letter Spacing
   */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;
}


/* ==========================================================================
   SECTION 3: BRIDGE MAPPING - MT Variables to Project Colors
   Maps legacy Corporate+ --mt-* variables to project colors
   ========================================================================== */

:root {
  /* 
   * Body & Heading Colors 
   */
  --mt-body-color: var(--color-text);
  --mt-heading-color: var(--color-heading);
  --mt-color-high-contrast: var(--color-heading-dark);
  
  /* 
   * Link Colors 
   */
  --mt-link-color: var(--color-link);
  --mt-link-color-value: 0, 93, 171;  /* RGB for rgba() usage */
  --mt-link-color-hover: var(--color-link-hover);
  
  /* 
   * Button Colors 
   */
  --mt-button-primary: var(--color-primary);
  --mt-button-secondary: var(--color-secondary);
  --mt-button-secondary-contrast: var(--color-white);
  
  /* 
   * Base/Primary Theme Color
   * Used for: colored backgrounds, accents, borders
   */
  --mt-color-base: var(--color-primary);
  --mt-color-base-value: 0, 93, 171;  /* RGB of --color-primary */
  --mt-color-base-contrast: var(--color-white);
  --mt-color-base-contrast-value: 255, 255, 255;
  --mt-color-base-light: var(--color-primary-light);
  --mt-color-base-dark: var(--color-primary-dark);
  --mt-color-base-dark-value: 0, 64, 128;
  --mt-color-base-dark-contrast: var(--color-white);
  
  /* 
   * Primary Color System 
   */
  --mt-color-primary: var(--color-primary);
  --mt-color-primary-dark: var(--color-primary-dark);
  --mt-color-primary-light: var(--color-primary-light);
  --mt-color-primary-contrast: var(--color-white);
  --mt-color-primary-value: 0, 93, 171;
  --mt-color-primary-dark-value: 0, 64, 128;
  --mt-color-primary-light-value: 51, 133, 198;
  
  /* 
   * Accent Color System 
   */
  --mt-color-accent: var(--color-accent);
  --mt-color-accent-dark: var(--color-accent-dark);
  --mt-color-accent-dark-value: 230, 188, 0;
  --mt-color-accent-light: var(--color-accent);
  --mt-color-accent-contrast: var(--color-heading-dark);
  --mt-color-accent-value: 255, 212, 48;
  
  /* 
   * Secondary Color System 
   */
  --mt-color-secondary: var(--color-secondary);
  --mt-color-secondary-dark: var(--color-secondary-dark);
  --mt-color-secondary-light: var(--color-secondary-light);
  --mt-color-secondary-contrast: var(--color-white);
  --mt-color-secondary-value: 12, 169, 188;
  
  /* 
   * Background Systems 
   */
  
  /* Default (white) */
  --mt-color-default: var(--color-white);
  --mt-color-default-contrast: var(--color-text);
  --mt-color-default-contrast-body: var(--color-text);
  --mt-color-default-contrast-heading: var(--color-heading);
  --mt-color-default-contrast-value: 85, 85, 85;
  
  /* Bright (white) */
  --mt-color-bright: var(--color-white);
  --mt-color-bright-value: 255, 255, 255;
  --mt-color-bright-contrast: var(--color-text);
  --mt-color-bright-contrast-value: 85, 85, 85;
  
  /* Tint (off-white) */
  --mt-color-tint: var(--color-off-white);
  --mt-color-tint-contrast: var(--color-text);
  
  /* Shade (gray) */
  --mt-color-shade: var(--color-light-gray);
  --mt-color-shade-contrast: var(--color-text);
  
  /* Colored (primary color background) */
  --mt-color-colored: var(--color-primary);
  --mt-color-colored-contrast: var(--color-white);
  --mt-color-colored-value: 0, 93, 171;
  
  /* Dark Colored (darker primary) */
  --mt-color-dark-colored: var(--color-primary-dark);
  --mt-color-dark-colored-contrast: var(--color-white);
  --mt-color-dark-colored-value: 0, 64, 128;
  
  /* Dark (near black) */
  --mt-color-dark: var(--color-dark-gray);
  --mt-color-dark-contrast: var(--color-white);
  --mt-color-dark-value: 54, 54, 54;
  
  /* Pattern background contrast */
  --mt-color-pattern-contrast: var(--color-text);
  --mt-color-pattern-contrast-value: 85, 85, 85;
  
  /* 
   * State Colors 
   */
  --mt-color-success: var(--color-success);
  --mt-color-success-dark: #2d6b00;
  --mt-color-success-contrast: var(--color-white);
  
  --mt-color-danger: var(--color-danger);
  --mt-color-danger-dark: #990000;
  --mt-color-danger-contrast: var(--color-white);
  
  --mt-color-warning: var(--color-warning);
  --mt-color-warning-dark: #cc8500;
  --mt-color-warning-contrast: var(--color-white);
}

/* Override for dark backgrounds - keep white text/links */
.region--shade-background,
.region--colored-background,
.region--dark-colored-background,
.region--dark-background {
  --mt-heading-color: var(--color-white);
  --mt-link-color: var(--color-white);
  --mt-link-color-hover: var(--color-accent);
  --mt-color-high-contrast: var(--color-white);
}


/* ==========================================================================
   SECTION 4: TYPOGRAPHY UTILITY CLASSES
   ========================================================================== */

/* Font Size Utilities */
.text-2xs { font-size: var(--font-size-2xs) !important; }
.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }
.text-base { font-size: var(--font-size-base) !important; }

/* Footer Small Text */
.footer-text-small,
.footer-text-small p,
.footer-text-small li,
.footer-text-small a {
  font-size: var(--font-size-2xs);
  line-height: 1.5;
}
.text-md { font-size: var(--font-size-md) !important; }
.text-lg { font-size: var(--font-size-lg) !important; }
.text-xl { font-size: var(--font-size-xl) !important; }
.text-2xl { font-size: var(--font-size-2xl) !important; }
.text-3xl { font-size: var(--font-size-3xl) !important; }
.text-4xl { font-size: var(--font-size-4xl) !important; }
.text-5xl { font-size: var(--font-size-5xl) !important; }
.text-6xl { font-size: var(--font-size-6xl) !important; }
.text-7xl { font-size: var(--font-size-7xl) !important; }

/* Font Weight Utilities */
.font-light { font-weight: var(--font-weight-light) !important; }
.font-normal { font-weight: var(--font-weight-normal) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }

/* Line Height Utilities */
.leading-tight { line-height: var(--line-height-tight) !important; }
.leading-snug { line-height: var(--line-height-snug) !important; }
.leading-normal { line-height: var(--line-height-normal) !important; }
.leading-relaxed { line-height: var(--line-height-relaxed) !important; }
.leading-loose { line-height: var(--line-height-loose) !important; }

/* Letter Spacing Utilities */
.tracking-tight { letter-spacing: var(--letter-spacing-tight) !important; }
.tracking-normal { letter-spacing: var(--letter-spacing-normal) !important; }
.tracking-wide { letter-spacing: var(--letter-spacing-wide) !important; }
.tracking-wider { letter-spacing: var(--letter-spacing-wider) !important; }
.tracking-widest { letter-spacing: var(--letter-spacing-widest) !important; }

/* Text Transform Utilities */
.uppercase { text-transform: uppercase !important; }
.lowercase { text-transform: lowercase !important; }
.capitalize { text-transform: capitalize !important; }
.normal-case { text-transform: none !important; }

/* Text Alignment Utilities */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

/* Font Family Utilities */
.font-sans { font-family: var(--font-sans) !important; }
.font-serif { font-family: var(--font-serif) !important; }
.font-mono { font-family: var(--font-mono) !important; }


/* ==========================================================================
   SECTION 5: COLOR UTILITY CLASSES
   ========================================================================== */

/* Text Colors */
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-accent { color: var(--color-accent) !important; }
.text-muted { color: var(--color-text-muted) !important; }
.text-white { color: var(--color-white) !important; }
.text-dark { color: var(--color-heading-dark) !important; }

/* Background Colors */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-accent { background-color: var(--color-accent) !important; }
.bg-white { background-color: var(--color-white) !important; }
.bg-off-white { background-color: var(--color-off-white) !important; }
.bg-light-gray { background-color: var(--color-light-gray) !important; }
.bg-dark { background-color: var(--color-dark-gray) !important; }


/* ==========================================================================
   SECTION 6: CONTENT AREA TYPOGRAPHY
   Larger, more readable text for main content areas
   ========================================================================== */

/*
 * Main content paragraphs get larger text for better readability
 * This applies to paragraphs within the main content area and Bootstrap Paragraphs
 */
.main-content p,
.main-content__section p,
.paragraph p,
.node__main-content p,
.field--name-body p,
.text-formatted p {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
}

/* Ensure nested elements don't double-up the sizing */
.main-content p p,
.paragraph p p {
  font-size: inherit;
}

/*
 * Feature Text - For hero/call-out sections on dark backgrounds
 * Uses serif font, centered, bold, white text
 */
.feature-text,
.feature-text p {
  font-size: var(--font-size-xl);
  text-align: center;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  line-height: var(--line-height-snug);
  margin-bottom: 1.25rem;
}

/*
 * Intro Text - DEPRECATED: Use default paragraph styling instead
 * Kept for backward compatibility but now matches base content size
 */
.intro-text {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  margin: 0 0 0.5rem 0;
}