/* TheConverterHub theme — teal/cyan, clean modern sans, soft corners. */
:root {
  --color-bg: #ffffff;
  --color-surface: #f0fdfa;
  --color-text: #0b1a1a;
  --color-text-muted: #46615e;
  --color-border: #cdeae5;
  --color-primary: #0d9488;
  --color-primary-dark: #115e59;
  --color-primary-soft: #ccfbf1;
  --color-accent: #f59e0b;
  --color-success: #16a34a;
  --color-danger: #dc2626;
  --shadow-sm: 0 1px 2px rgba(13, 148, 136, .08);
  --shadow-md: 0 4px 16px rgba(13, 148, 136, .12);
  --shadow-lg: 0 12px 40px rgba(13, 148, 136, .18);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.brand-name { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; }
.hero h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; }
.calc-grid-section h2,
.calc-header h1,
.calc-result h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; }
.calc-icon-lg { background: linear-gradient(135deg, #ccfbf1 0%, #99f6e4 100%); }
.calc-card { background: linear-gradient(180deg, #ffffff 0%, #f5fffd 100%); }
.btn-primary { background: linear-gradient(135deg, #0d9488 0%, #115e59 100%); }
.btn-primary:hover { background: linear-gradient(135deg, #115e59 0%, #134e4a 100%); }