/* ==========================================================================
   EMI Calculator.loan — Base Stylesheet & Design Tokens
   Banking / Fintech Trust Palette: Deep Navy, Professional Blue, Muted Teal
   ========================================================================== */

:root {
  /* Color Palette */
  --color-primary: #1e3a8a;          /* Deep Navy / Primary Brand */
  --color-primary-hover: #1e40af;
  --color-primary-light: #eff6ff;
  --color-accent: #2563eb;           /* Professional Vibrant Blue */
  --color-accent-hover: #1d4ed8;
  --color-teal: #0d9488;             /* Muted Teal for Principal/Savings */
  --color-teal-light: #f0fdfa;
  --color-amber: #d97706;            /* Warm Amber for Interest */
  --color-amber-light: #fffbeb;
  --color-emerald: #10b981;          /* Emerald for Low DTI / Success */
  --color-rose: #e11d48;             /* Rose for High Risk / Taxes / Fees */
  --color-rose-light: #fff1f2;
  
  /* Neutrals */
  --bg-app: #f8fafc;                 /* Clean Soft Gray Background */
  --bg-card: #ffffff;                /* Crisp White Cards */
  --bg-card-alt: #f1f5f9;
  --border-color: #e2e8f0;           /* Subtle Dividers */
  --border-focus: #3b82f6;
  --text-main: #0f172a;              /* Slate 900 */
  --text-muted: #64748b;             /* Slate 500 */
  --text-subtle: #94a3b8;            /* Slate 400 */
  --text-inverted: #ffffff;

  /* Typography - Comprehensive Indic, Arabic, Asian & International Font Stack */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Telugu', 'Noto Sans Tamil', 'Noto Sans Gujarati', 'Noto Sans Kannada', 'Noto Sans Malayalam', 'Noto Sans Gurmukhi', 'Noto Sans Oriya', 'Noto Sans Arabic', 'Segoe UI Devanagari', 'Nirmala UI', 'Mangal', 'Lohit Devanagari', 'Noto Sans CJK SC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  
  /* Spacing & Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  
  /* Layout */
  --max-width: 1200px;
  --header-height: 68px;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
}

/* Reset & Box Sizing */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-main);
  background-color: var(--bg-app);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-app);
  color: var(--text-main);
  font-family: inherit;
}

/* Typography Hierarchy */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-main);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

h1 { font-size: 2.25rem; margin-bottom: 0.75rem; }
h2 { font-size: 1.625rem; margin-bottom: 0.75rem; }
h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
h4 { font-size: 1.05rem; margin-bottom: 0.35rem; }

p {
  margin-bottom: 1rem;
  color: var(--text-muted);
  line-height: 1.6;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

img, svg {
  vertical-align: middle;
  max-width: 100%;
}

/* Container */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* Utility Helpers */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--text-muted); }
.text-bold { font-weight: 700; }
.text-success { color: var(--color-emerald); }
.text-warning { color: var(--color-amber); }
.text-danger { color: var(--color-rose); }
.text-primary { color: var(--color-primary); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}

.badge-success {
  background-color: #ecfdf5;
  color: #065f46;
}

.badge-warning {
  background-color: var(--color-amber-light);
  color: #92400e;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Accessible Focus States */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}