/* Global dark, low-contrast, eye-friendly theme */
:root{
  /* Light gray theme */
  --bg: #f2f4f7;           /* page background */
  --surface: #ffffff;      /* cards, inputs */
  --surface-2: #f7f9fc;    /* hover/focus surfaces */
  --text: #1a1f29;         /* primary text */
  --muted: #5b6472;        /* secondary text */
  --primary: #3b82f6;      /* accessible blue */
  --primary-600:#2563eb;   /* darker blue for hover */
  --accent: #0ea5a8;       /* teal links */
  --danger: #dc2626;       /* error */
  --radius: 14px;
  --shadow: 0 8px 24px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
}

html, body{
  height: 100%;
}
body{
  /* Soft light background with darker neutral gray vignette */
  background: radial-gradient(1200px 800px at 20% -10%, #d8dce3 0%, transparent 54%),
              radial-gradient(1000px 700px at 120% 10%, #cfd5dd 0%, transparent 54%),
              var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.navbar{
  background: #ffffffcc;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(16,24,40,.08);
}
.navbar-brand{ color: var(--text) !important; font-weight: 600; }

.container{
  max-width: 860px;
}

h1,h2,h3,h4{ color: var(--text); letter-spacing: .2px; }
.lead{ color: var(--muted); }

.app-card{
  background: var(--surface);
  border: 1px solid rgba(16,24,40,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(16px, 3vw, 28px);
}

/* Form styling */
.form-label{ color: var(--muted); }
.form-control{
  background: var(--surface);
  border: 1px solid rgba(16,24,40,.12);
  color: var(--text);
  border-radius: 10px;
}
.form-control:focus{
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--primary);
  box-shadow: 0 0 0 .2rem rgba(59,130,246,.18);
}

/* Modern validation styles */
.form-control.is-valid{
  border-color: #16a34a; /* green-600 */
  background-color: #f0fdf4; /* subtle green bg */
  box-shadow: 0 0 0 .18rem rgba(22,163,74,.15);
}
.form-control.is-invalid{
  border-color: #dc2626; /* red-600 */
  background-color: #fef2f2; /* subtle red bg */
  box-shadow: 0 0 0 .18rem rgba(220,38,38,.12);
}
.valid-feedback{ color: #166534; }
.invalid-feedback{ color: #b91c1c; }

/* Utility: monospace text (Bootstrap 5 uses font-monospace) */
.text-monospace{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.btn-primary{
  background: linear-gradient(180deg, var(--primary), var(--primary-600));
  border: 0;
  color: #ffffff;
  font-weight: 600;
}
.btn-primary:hover{ filter: brightness(1.05); }
.btn-secondary{
  background: #e6eaf0;
  border: 1px solid rgba(16,24,40,.14);
  color: #1f2937;
}
.btn-secondary:hover{ filter: brightness(1.08); }

/* Accessibility: larger targets on touch, comfortable line-length */
button, .btn{ min-height: 44px; padding-inline: 18px; }
input{ min-height: 44px; }

/* Utility spacing */
.stack > * + *{ margin-top: 16px; }

/* Links */
a{ color: var(--primary-600); }
a:hover{ color: var(--primary); }

/* Footer */
#footer{ color: var(--muted); opacity: .9; font-size: .95rem; }

/* Responsive tweaks */
@media (max-width: 480px){
  h1{ font-size: 1.5rem; }
  .container{ padding-left: 16px; padding-right: 16px; }
}