/* ======================================================
   LifeCalc Brand Theme
   Navy × Mint
   ====================================================== */

/* 0. Color Variables */
:root {
  /* Brand */
  --lc-navy: #0F172A;
  --lc-mint: #2DD4BF;

  /* Background */
  --lc-bg: #F8FAFC;
  --lc-card: #FFFFFF;

  /* Text */
  --lc-text-main: #0F172A;
  --lc-text-sub: #475569;
  --lc-text-muted: #94A3B8;

  /* Border */
  --lc-border: #CBD5E1;

  /* Status */
  --lc-success: #22C55E;
  --lc-warning: #F59E0B;
  --lc-danger: #EF4444;
}

/* ======================================================
   1. Global
   ====================================================== */

body {
  background: var(--lc-bg);
  color: var(--lc-text-main);
}

/* ======================================================
   2. Header
   ====================================================== */

header {
  background: var(--lc-navy);
  color: #FFFFFF;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

header a {
  color: #FFFFFF;
  font-weight: 500;
  text-decoration: none;
}

header a:hover {
  color: var(--lc-mint);
}

/* ======================================================
   3. Buttons
   ====================================================== */

.btn-primary {
  background: var(--lc-mint);
  color: var(--lc-navy);
  border: none;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
}

.btn-primary:hover {
  background: #14B8A6;
}

.btn-secondary {
  background: #FFFFFF;
  color: var(--lc-navy);
  border: 1px solid var(--lc-border);
  padding: 12px 18px;
  border-radius: 10px;
}

/* ======================================================
   4. Cards
   ====================================================== */

.card {
  background: var(--lc-card);
  border: 1px solid var(--lc-border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 4px 14px rgba(15,23,42,0.04);
}

/* ======================================================
   5. Inputs
   ====================================================== */

input,
select {
  border: 1px solid var(--lc-border);
  border-radius: 8px;
  padding: 10px;
  font-size: 15px;
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--lc-mint);
}

/* ======================================================
   6. Result Display
   ====================================================== */

.result-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--lc-navy);
}

.result-highlight {
  color: var(--lc-mint);
}

/* ======================================================
   7. Salary Rank (Top % Visualization)
   ====================================================== */

.rank-1  { color: #D4AF37; font-weight: 700; }
.rank-5  { color: var(--lc-mint); font-weight: 700; }
.rank-10 { color: var(--lc-success); font-weight: 600; }
.rank-30 { color: var(--lc-navy); }
.rank-50 { color: var(--lc-text-muted); }

/* ======================================================
   End
   ====================================================== */