/**
 * ============================================================================
 * EDITORIAL FINANCIAL EXCELLENCE - DESIGN SYSTEM
 * ============================================================================
 * 
 * CREATIVE NORTH STAR: "The Architectural Anchor"
 * 
 * Philosophy: This design system rejects the standard boxy corporate template
 * in favor of a high-end editorial experience. We achieve authority through
 * intentional asymmetry, tonal depth, and exaggerated white space.
 * 
 * The layering of deep navy shades and crisp whites creates a digital 
 * environment that feels as solid as a bank vault yet fluid as a modern 
 * concierge service.
 * 
 * AI MODIFICATION GUIDE:
 * -----------------------
 * This file uses CSS custom properties (variables) organized into semantic groups.
 * To modify the design system, update the values in the :root section.
 * All components reference these variables, so changes propagate automatically.
 * 
 * Color Format: Use hex codes (#RRGGBB) for maximum compatibility.
 * Spacing: Uses rem units based on a 4px grid (0.25rem = 4px).
 * Typography: Reference Google Fonts CDN for web fonts.
 * 
 * @version 1.0.0
 * @author AI Design System Generator
 * @lastModified 2026-03-19
 * ============================================================================
 */

/* ============================================================================
 * 1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
 * ============================================================================
 * 
 * IMPORTANT FOR AI: These are the core design tokens. Modify these values
 * to change the entire design system. Each token is documented with its
 * purpose and acceptable value ranges.
 */

:root {
  /* ========================================================================
   * 1.1 COLOR PALETTE - SURFACE HIERARCHY
   * ========================================================================
   * 
   * AI NOTE: The surface hierarchy creates depth WITHOUT borders.
   * Use lighter shades for nested/elevated elements, darker for backgrounds.
   * 
   * STRICT RULE: NO 1px solid borders for sectioning. Use background shifts.
   */
  
  /* Base surfaces - Use for page backgrounds and main content areas */
  --surface: #f9f9ff;                     /* AI: Base level background, slightly blue-tinted white */
  --surface-container-low: #f1f3ff;       /* AI: Secondary sections, cards on surface */
  --surface-container: #e8ebf8;           /* AI: Tertiary level, nested containers */
  --surface-container-high: #dfe4f5;      /* AI: Higher elevation items */
  --surface-container-highest: #d8e2ff;   /* AI: Maximum elevation (popovers, dropdowns) */
  --surface-container-lowest: #ffffff;    /* AI: Primary cards, interactive elements - pure white */

  /* ========================================================================
   * 1.2 COLOR PALETTE - PRIMARY (DEEP NAVY - "TRUST")
   * ========================================================================
   * 
   * AI NOTE: Primary colors convey trust, authority, stability.
   * Use for hero sections, primary CTAs, and critical UI elements.
   */
  
  --primary: #00173e;                     /* AI: Deep navy - primary brand color */
  --primary-container: #152c57;           /* AI: Lighter navy for gradient endpoints */
  --on-primary: #ffffff;                  /* AI: Text/icons on primary backgrounds */
  --on-primary-container: #d8e2ff;        /* AI: Text on primary-container backgrounds */
  
  /* Signature Gradient - Use for hero sections and primary CTAs */
  /* AI: Gradient goes from primary to primary-container at 135 degrees */
  --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);

  /* ========================================================================
   * 1.3 COLOR PALETTE - SECONDARY (SOPHISTICATED BLUE)
   * ========================================================================
   * 
   * AI NOTE: Secondary colors for supporting actions, links, accents.
   * Used for secondary buttons, input focus states, highlights.
   */
  
  --secondary: #276293;                   /* AI: Rich blue - secondary actions */
  --secondary-container: #93c8ff;         /* AI: Light blue - secondary backgrounds, progress tracks */
  --on-secondary: #ffffff;                /* AI: Text/icons on secondary backgrounds */
  --on-secondary-container: #001d36;      /* AI: Text on secondary-container backgrounds */

  /* ========================================================================
   * 1.4 COLOR PALETTE - TERTIARY (GOLD ACCENT - "PREMIUM")
   * ========================================================================
   * 
   * AI NOTE: Tertiary "gold" color signifies premium services.
   * Use SPARINGLY for small labels, icons, progress indicators.
   * Creates a "Gold Standard" / "Gold Leaf" aesthetic.
   */
  
  --tertiary: #745b00;                    /* AI: Rich gold - premium accent */
  --tertiary-container: #ffe08c;          /* AI: Light gold - premium backgrounds */
  --on-tertiary: #ffffff;                 /* AI: Text on tertiary backgrounds */
  --on-tertiary-container: #241a00;       /* AI: Text on tertiary-container backgrounds */

  /* ========================================================================
   * 1.5 COLOR PALETTE - ERROR STATES
   * ========================================================================
   * 
   * AI NOTE: IMPORTANT - Do NOT use "alert red" for everything.
   * Use softer error containers for professional warnings.
   */
  
  --error: #ba1a1a;                       /* AI: Error red - critical only */
  --error-container: #ffdad6;             /* AI: Soft pink - error backgrounds */
  --on-error: #ffffff;                    /* AI: Text on error backgrounds */
  --on-error-container: #93000a;          /* AI: Dark red text on error-container - professional warnings */

  /* ========================================================================
   * 1.6 COLOR PALETTE - TEXT & OUTLINES
   * ========================================================================
   * 
   * AI NOTE: NEVER use 100% black (#000000) for text.
   * Use on-surface to maintain the "Financial Blue" soul in typography.
   */
  
  --on-surface: #0d1b35;                  /* AI: Primary text color - deep navy-black */
  --on-surface-variant: #44474e;          /* AI: Secondary text, less emphasis */
  --outline: #74777f;                     /* AI: Borders, dividers when absolutely needed */
  --outline-variant: #c4c6d0;             /* AI: Ghost borders at 15% opacity for form fields */

  /* ========================================================================
   * 1.7 TYPOGRAPHY - FONT FAMILIES
   * ========================================================================
   * 
   * AI NOTE: Three font families create the "Financial Magazine" aesthetic:
   * - Plus Jakarta Sans: Display/headlines - commanding presence
   * - Inter: Body text - high readability for loan terms
   * - Work Sans: Labels/metadata - small caps, tracked out
   */
  
  --font-display: 'Plus Jakarta Sans', sans-serif;  /* AI: Hero text, major headings */
  --font-body: 'Inter', sans-serif;                 /* AI: Body copy, descriptions */
  --font-label: 'Work Sans', sans-serif;            /* AI: Labels, chips, metadata */

  /* ========================================================================
   * 1.8 TYPOGRAPHY - SIZE SCALE
   * ========================================================================
   * 
   * AI NOTE: Type scale uses rem units for accessibility.
   * Base size is 16px (1rem). Scale follows musical intervals.
   */
  
  --text-display-lg: 3.5rem;              /* AI: 56px - Hero value propositions */
  --text-display-md: 2.75rem;             /* AI: 44px - Major section headers */
  --text-display-sm: 2.25rem;             /* AI: 36px - Subsection headers */
  
  --text-headline-lg: 2rem;               /* AI: 32px - Page titles */
  --text-headline-md: 1.75rem;            /* AI: 28px - Section headers, "Architectural" tone */
  --text-headline-sm: 1.5rem;             /* AI: 24px - Card titles */
  
  --text-title-lg: 1.375rem;              /* AI: 22px - Bold/semi-bold card titles */
  --text-title-md: 1.125rem;              /* AI: 18px - Subheadings */
  --text-title-sm: 1rem;                  /* AI: 16px - Small titles */
  
  --text-body-lg: 1rem;                   /* AI: 16px - Primary body text */
  --text-body-md: 1rem;               /* AI: 14px - Secondary body text */
  --text-body-sm: 0.75rem;                /* AI: 12px - Captions */
  
  --text-label-lg: 1rem;              /* AI: 14px - Form labels */
  --text-label-md: 0.75rem;               /* AI: 12px - All-caps metadata, chips */
  --text-label-sm: 0.6875rem;             /* AI: 11px - Small labels */

  /* ========================================================================
   * 1.9 SPACING SCALE
   * ========================================================================
   * 
   * AI NOTE: Based on 4px grid (0.25rem increments).
   * Use larger spacing (5-6rem) between major sections for breathing room.
   * Use asymmetrical margins for editorial feel.
   */
  
  --spacing-1: 0.25rem;                   /* AI: 4px - Tight spacing */
  --spacing-2: 0.5rem;                    /* AI: 8px - Element spacing */
  --spacing-3: 0.75rem;                   /* AI: 12px */
  --spacing-4: 1rem;                      /* AI: 16px - Base unit */
  --spacing-5: 1.25rem;                   /* AI: 20px */
  --spacing-6: 1.5rem;                    /* AI: 24px */
  --spacing-8: 2rem;                      /* AI: 32px - Card padding */
  --spacing-10: 2.5rem;                   /* AI: 40px - List item spacing */
  --spacing-12: 3rem;                     /* AI: 48px */
  --spacing-16: 4rem;                     /* AI: 64px */
  --spacing-20: 5rem;                     /* AI: 80px - Major section spacing */
  --spacing-24: 6rem;                     /* AI: 96px - Major section spacing */

  /* ========================================================================
   * 1.10 BORDER RADIUS
   * ========================================================================
   * 
   * AI NOTE: Subtle roundness for modern feel without being "bubbly".
   * Primary buttons use md (0.375rem / 6px).
   */
  
  --radius-sm: 0.25rem;                   /* AI: 4px - Small elements */
  --radius-md: 0.375rem;                  /* AI: 6px - Buttons, inputs */
  --radius-lg: 0.5rem;                    /* AI: 8px - Cards */
  --radius-xl: 1rem;                      /* AI: 16px - Large cards, modals */
  --radius-full: 9999px;                  /* AI: Pill shapes */

  /* ========================================================================
   * 1.11 SHADOWS & ELEVATION
   * ========================================================================
   * 
   * AI NOTE: Traditional shadows create visual noise. We prefer tonal layering.
   * When shadows ARE needed (dropdowns), use ambient shadows:
   * - Color: on-surface at 8% opacity
   * - Blur: 32px
   * - Y-offset: 16px
   * - NEVER use pure black or grey
   */
  
  --shadow-ambient: 0 16px 32px rgba(13, 27, 53, 0.08);     /* AI: Floating elements (dropdowns) */
  --shadow-soft: 0 8px 24px rgba(13, 27, 53, 0.06);         /* AI: Subtle lift */
  --shadow-none: none;                                       /* AI: Default - use tonal layering instead */

  /* ========================================================================
   * 1.12 GLASSMORPHISM (FOR NAVIGATION/MODALS)
   * ========================================================================
   * 
   * AI NOTE: Glass effect for floating navigation or modal overlays.
   * Uses surface-container-lowest at 80% opacity with 20px backdrop blur.
   * Ensures layout feels integrated, not "pasted on".
   */
  
  --glass-background: rgba(255, 255, 255, 0.8);             /* AI: 80% white */
  --glass-backdrop-blur: blur(20px);                        /* AI: 20px blur */
  --glass-border: 1px solid rgba(196, 198, 208, 0.15);      /* AI: Ghost border at 15% */

  /* ========================================================================
   * 1.13 TRANSITIONS
   * ========================================================================
   * 
   * AI NOTE: Smooth transitions for interactive elements.
   * Use ease-out for entering, ease-in for exiting.
   */
  
  --transition-fast: 150ms ease-out;
  --transition-normal: 250ms ease-out;
  --transition-slow: 400ms ease-out;

  /* ========================================================================
   * 1.14 Z-INDEX SCALE
   * ========================================================================
   * 
   * AI NOTE: Consistent layering for overlapping elements.
   */
  
  --z-base: 0;
  --z-above: 100;
  --z-nav: 500;
  --z-modal: 1000;
  --z-tooltip: 1500;
}


/* ============================================================================
 * 2. GLOBAL RESET & BASE STYLES
 * ============================================================================
 * 
 * AI NOTE: Base styles applied to all elements. These establish the 
 * foundation for the editorial design language.
 */

/* Box sizing for all elements */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Base body styles */
body {
  /* AI: Use on-surface for text - NEVER pure black */
  color: var(--on-surface);
  
  /* AI: Surface background creates the base layer */
  background-color: var(--surface);
  
  /* AI: Inter for body text - high readability */
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: 1.6;
  
  /* AI: Subtle font smoothing for crisp text */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
 * 3. TYPOGRAPHY
 * ============================================================================
 * 
 * AI NOTE: Typography establishes the "Financial Magazine" aesthetic.
 * Plus Jakarta Sans for display, Inter for body, Work Sans for labels.
 */

/* Display text - Hero and major headings */
.display-lg,
.display-md,
.display-sm {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--on-surface);
  /* AI: Asymmetrical margins create editorial feel */
  margin: 0 0 var(--spacing-6) 0;
}

.display-lg { font-size: var(--text-display-lg); }
.display-md { font-size: var(--text-display-md); }
.display-sm { font-size: var(--text-display-sm); }

/* Headline text - Section headers with "Architectural" tone */
.headline-lg,
.headline-md,
.headline-sm,
h1, h2 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--on-surface);
  margin: 0 0 var(--spacing-4) 0;
}

h1, .headline-lg { font-size: var(--text-headline-lg); }
h2, .headline-md { font-size: var(--text-headline-md); }
h3, .headline-sm { font-size: var(--text-headline-sm); }

/* Title text - Card titles and sub-heads */
.title-lg,
.title-md,
.title-sm,
h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.3;
  color: var(--on-surface);
  margin: 0 0 var(--spacing-3) 0;
}

h4, .title-lg { font-size: var(--text-title-lg); }
h5, .title-md { font-size: var(--text-title-md); }
h6, .title-sm { font-size: var(--text-title-sm); }

/* Body text */
.body-lg { font-size: var(--text-body-lg); line-height: 1.6; }
.body-md { font-size: var(--text-body-md); line-height: 1.5; }
.body-sm { font-size: var(--text-body-sm); line-height: 1.4; }

p {
  margin: 0 0 var(--spacing-4) 0;
  color: var(--on-surface);
}

/* Label text - All-caps, tracked out for metadata/chips */
.label-lg,
.label-md,
.label-sm {
  font-family: var(--font-label);
  text-transform: uppercase;
  /* AI: +5% letter spacing for metadata/chips */
  letter-spacing: 0.05em;
  font-weight: 500;
}

.label-lg { font-size: var(--text-label-lg); }
.label-md { font-size: var(--text-label-md); }
.label-sm { font-size: var(--text-label-sm); }

/* Gold accent for premium labels */
/* AI: Use tertiary color SPARINGLY for "Gold Standard" premium accents */
.label-premium {
  color: var(--tertiary);
}

/* Links */
a {
  color: var(--secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--primary);
  text-decoration: underline;
}


/* ============================================================================
 * 4. SURFACE HIERARCHY & CONTAINERS
 * ============================================================================
 * 
 * AI NOTE: THE "NO-LINE" RULE - Boundaries must be defined through 
 * background color shifts, NOT 1px solid borders.
 * 
 * Place lighter surfaces on darker ones to create "soft lift" effect.
 */

/* Base surface - main page background */
.surface {
  background-color: var(--surface);
}

/* Surface containers for layering */
.surface-container-lowest {
  /* AI: Primary cards, interactive elements - pure white */
  background-color: var(--surface-container-lowest);
}

.surface-container-low {
  /* AI: Secondary sections, creates clear transition on surface */
  background-color: var(--surface-container-low);
}

.surface-container {
  background-color: var(--surface-container);
}

.surface-container-high {
  background-color: var(--surface-container-high);
}

.surface-container-highest {
  /* AI: Maximum elevation for popovers, dropdowns */
  background-color: var(--surface-container-highest);
  box-shadow: var(--shadow-ambient);
}

/* Card component using tonal layering */
/* AI: Place surface-container-lowest cards on surface-container sections for focus */
.card {
  background-color: var(--surface-container-lowest);
  border-radius: var(--radius-lg);
  padding: var(--spacing-6);
  /* AI: NO border - use tonal shift from parent for separation */
  border: none;
}

/* Card on tinted background for immediate focus */
.card--elevated {
  background-color: var(--surface-container-lowest);
  box-shadow: var(--shadow-soft);
}

/* Section with breathing room */
/* AI: Use spacing-20 (5rem) or spacing-24 (6rem) between major sections */
.section {
  padding: var(--spacing-20) 0;
}

.section--large {
  padding: var(--spacing-24) 0;
}


/* ============================================================================
 * 5. BUTTONS
 * ============================================================================
 * 
 * AI NOTE: Button design following the design system specification.
 * - Primary: Gradient fill, md roundedness, no border
 * - Secondary: Surface-tinted, ghost border, secondary text
 * - Hover: Primary +10% brightness, secondary gains background
 */

/* Base button styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-5);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  /* AI: NO border on primary buttons */
  border: none;
}

/* Primary button - Gradient fill */
/* AI: Uses signature gradient from primary to primary-container at 135deg */
.btn-primary {
  background: var(--gradient-primary);
  color: var(--on-primary);
  /* AI: Text shadow removed for cleaner look */
  text-shadow: none;
}

.btn-primary:hover {
  /* AI: On hover, shift +10% brightness */
  background: linear-gradient(135deg, #0a2956 0%, #1f3d6d 100%);
  color: var(--on-primary);
  text-decoration: none;
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
}

/* Secondary button - Surface-tinted with ghost border */
.btn-secondary {
  background-color: transparent;
  color: var(--secondary);
  /* AI: Ghost border at 15% opacity - felt, not seen */
  border: 1px solid rgba(196, 198, 208, 0.15);
}

.btn-secondary:hover {
  /* AI: Gains surface-container-high background on hover */
  background-color: var(--surface-container-high);
  color: var(--secondary);
  text-decoration: none;
}

/* Tertiary/text button */
.btn-text {
  background-color: transparent;
  color: var(--secondary);
  padding: var(--spacing-2) var(--spacing-3);
  border: none;
}

.btn-text:hover {
  background-color: var(--surface-container-low);
  text-decoration: none;
}

/* Button sizes */
.btn-sm {
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--text-body-sm);
}

.btn-lg {
  padding: var(--spacing-4) var(--spacing-6);
  font-size: var(--text-body-lg);
}


/* ============================================================================
 * 6. INPUT FIELDS & FORMS
 * ============================================================================
 * 
 * AI NOTE: Input field styling following design specification.
 * - Background: surface-container-low
 * - No bottom line or full border
 * - Focus: Transition to surface-container-lowest with 2px secondary glow
 */

/* Base input styles */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
textarea,
select {
  display: block;
  width: 100%;
  padding: var(--spacing-3) var(--spacing-4);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: 1.5;
  color: var(--on-surface);
  /* AI: Surface-container-low as field background */
  background-color: var(--surface-container-low);
  /* AI: NO border - following the no-line rule */
  border: none;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  outline: none;
}

/* Focus state */
/* AI: Background transitions to surface-container-lowest with secondary glow */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
  background-color: var(--surface-container-lowest);
  /* AI: 2px secondary glow (soft shadow), NOT a hard stroke */
  box-shadow: 0 0 0 2px var(--secondary), 0 4px 12px rgba(39, 98, 147, 0.15);
}

/* Placeholder styling */
input::placeholder,
textarea::placeholder {
  color: var(--on-surface-variant);
  opacity: 0.7;
}

/* Form labels */
label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-label-lg);
  font-weight: 500;
  color: var(--on-surface);
  margin-bottom: var(--spacing-2);
}

/* Form groups */
.form-group {
  margin-bottom: var(--spacing-5);
}

/* Ghost border fallback for accessibility */
/* AI: Use outline-variant at 15% opacity when container edge needed for high-density forms */
.input-bordered {
  border: 1px solid rgba(196, 198, 208, 0.15);
}


/* ============================================================================
 * 7. LISTS & DIVIDERS
 * ============================================================================
 * 
 * AI NOTE: THE "NO-DIVIDER" RULE - Forbid 1px horizontal lines between items.
 * Use vertical white space (spacing-8 or spacing-10) or alternating tints.
 */

/* List without dividers - uses spacing */
.list-spaced > li {
  padding: var(--spacing-4) 0;
}

.list-spaced > li + li {
  /* AI: Use spacing instead of borders */
  margin-top: var(--spacing-2);
}

/* List with alternating backgrounds */
.list-striped > li:nth-child(even) {
  background-color: var(--surface-container-low);
}

.list-striped > li:nth-child(odd) {
  background-color: var(--surface);
}

/* Remove default list styling */
.list-clean {
  list-style: none;
  margin: 0;
  padding: 0;
}


/* ============================================================================
 * 8. NAVIGATION - GLASSMORPHISM
 * ============================================================================
 * 
 * AI NOTE: Floating navigation uses glassmorphism for mobile.
 * 80% opacity with 20px backdrop blur - feels integrated, not pasted on.
 */

/* Glass navigation container */
.nav-glass {
  background: var(--glass-background);
  backdrop-filter: var(--glass-backdrop-blur);
  -webkit-backdrop-filter: var(--glass-backdrop-blur);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
}

/* Fixed header with glass effect */
.header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  background: var(--glass-background);
  backdrop-filter: var(--glass-backdrop-blur);
  -webkit-backdrop-filter: var(--glass-backdrop-blur);
}

/* Navigation links */
.nav-link {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-3) var(--spacing-4);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: 500;
  color: var(--on-surface);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.nav-link:hover {
  background-color: var(--surface-container-high);
  color: var(--primary);
  text-decoration: none;
}

.nav-link.active {
  background-color: var(--surface-container-highest);
  color: var(--primary);
}


/* ============================================================================
 * 9. HERO SECTION - GRADIENT BACKGROUND
 * ============================================================================
 * 
 * AI NOTE: Hero sections use the signature gradient for visual impact.
 * "Glass & Gradient" rule injects soul into the corporate blue palette.
 */

/* Hero with signature gradient */
.hero {
  background: var(--gradient-primary);
  color: var(--on-primary);
  padding: var(--spacing-24) 0;
  /* AI: Asymmetrical layout for editorial feel */
}

.hero h1,
.hero .display-lg {
  color: var(--on-primary);
  /* AI: Display-lg for hero value propositions */
  font-size: var(--text-display-lg);
}

.hero p {
  color: var(--on-primary-container);
  font-size: var(--text-body-lg);
  max-width: 600px;
}


/* ============================================================================
 * 10. SPECIALIZED COMPONENT: MORTGAGE "TRUST METER"
 * ============================================================================
 * 
 * AI NOTE: Custom progress component for application progress.
 * Uses secondary-container as track and tertiary for premium gold-leaf indicator.
 */

.trust-meter {
  width: 100%;
  height: 8px;
  /* AI: secondary-container for the track */
  background-color: var(--secondary-container);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.trust-meter-indicator {
  height: 100%;
  /* AI: tertiary gold for premium feel */
  background-color: var(--tertiary);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

/* Trust meter with label */
.trust-meter-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.trust-meter-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-label-md);
  color: var(--on-surface-variant);
}


/* ============================================================================
 * 11. ERROR & ALERT STATES
 * ============================================================================
 * 
 * AI NOTE: Professional error handling - NOT bright red alerts.
 * Use error-container with on-error-container text for softer warnings.
 */

/* Error state - soft professional warning */
.alert-error {
  /* AI: Soft pink background, not harsh red */
  background-color: var(--error-container);
  /* AI: Dark red text for readability */
  color: var(--on-error-container);
  padding: var(--spacing-4);
  border-radius: var(--radius-md);
  /* AI: NO red border - use background shift only */
  border: none;
}

/* Success state */
.alert-success {
  background-color: #d4edda;
  color: #155724;
  padding: var(--spacing-4);
  border-radius: var(--radius-md);
  border: none;
}

/* Info state */
.alert-info {
  background-color: var(--surface-container-high);
  color: var(--on-surface);
  padding: var(--spacing-4);
  border-radius: var(--radius-md);
  border: none;
}


/* ============================================================================
 * 12. FOOTER
 * ============================================================================
 * 
 * AI NOTE: Footer uses primary background for strong brand presence.
 */

.footer {
  background: var(--gradient-primary);
  color: var(--on-primary);
  padding: var(--spacing-20) 0 var(--spacing-10);
}

.footer a {
  color: var(--on-primary-container);
}

.footer a:hover {
  color: var(--on-primary);
}

.footer h3,
.footer h4 {
  color: var(--on-primary);
}


/* ============================================================================
 * 13. UTILITY CLASSES
 * ============================================================================
 * 
 * AI NOTE: Quick utility classes for common patterns.
 */

/* Text colors */
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-tertiary { color: var(--tertiary); }
.text-muted { color: var(--on-surface-variant); }

/* Background colors */
.bg-primary { background-color: var(--primary); color: var(--on-primary); }
.bg-secondary { background-color: var(--secondary); color: var(--on-secondary); }
.bg-surface { background-color: var(--surface); }

/* Spacing utilities */
.mt-20 { margin-top: var(--spacing-20); }
.mb-20 { margin-bottom: var(--spacing-20); }
.py-20 { padding-top: var(--spacing-20); padding-bottom: var(--spacing-20); }
.py-24 { padding-top: var(--spacing-24); padding-bottom: var(--spacing-24); }

/* Asymmetrical margin for editorial feel */
/* AI: Wider left margin creates editorial layout */
.ml-editorial { margin-left: var(--spacing-16); }
.pl-editorial { padding-left: var(--spacing-16); }

/* Text alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Flex utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-4 { gap: var(--spacing-4); }
.gap-6 { gap: var(--spacing-6); }
.gap-8 { gap: var(--spacing-8); }


/* ============================================================================
 * 14. RESPONSIVE DESIGN
 * ============================================================================
 * 
 * AI NOTE: Mobile-first responsive breakpoints.
 */

/* Tablet and up */
@media (min-width: 768px) {
  .display-lg { font-size: calc(var(--text-display-lg) * 0.85); }
  
  .section { padding: var(--spacing-16) 0; }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .display-lg { font-size: var(--text-display-lg); }
  
  .section { padding: var(--spacing-20) 0; }
  .section--large { padding: var(--spacing-24) 0; }
}

/* Mobile only */
@media (max-width: 767px) {
  :root {
    --text-display-lg: 2.5rem;
    --text-display-md: 2rem;
    --text-headline-lg: 1.75rem;
    --text-headline-md: 1.5rem;
  }
  
  .section { padding: var(--spacing-12) 0; }
  
  /* Glassmorphism for mobile navigation */
  .nav-mobile {
    background: var(--glass-background);
    backdrop-filter: var(--glass-backdrop-blur);
    -webkit-backdrop-filter: var(--glass-backdrop-blur);
  }
}


/* ============================================================================
 * END OF DESIGN SYSTEM
 * ============================================================================
 * 
 * AI MODIFICATION SUMMARY:
 * 
 * To change the overall theme:
 * 1. Update color variables in section 1.1-1.6
 * 2. Font families can be changed in section 1.7
 * 3. Spacing scale in section 1.9
 * 
 * Key design principles to maintain:
 * - NO 1px solid borders for section separation
 * - Use tonal layering (surface hierarchy) for depth
 * - Asymmetrical margins for editorial feel
 * - Large spacing (5-6rem) between major sections
 * - Glassmorphism for floating elements
 * - Plus Jakarta Sans for display, Inter for body
 * - Tertiary gold used sparingly for premium accents
 * 
 * ============================================================================
 */