/* Shared theme tokens + Materialize overrides.
   Source: idonotcair-design-visualizer-choices.json (Elegant / Compact / Ocean / Light / Inter / slightly rounded). */
:root {
  color-scheme: light;
  --bg: #FFFFFF;
  --text: #1A1D23;
  --muted: #5B6270;
  --border: rgba(0,0,0,.1);
  --border-strong: rgba(0,0,0,.22);
  --primary: #2563EB;
  --on-primary: #FFFFFF;
  --accent: #06B6D4;
  --on-accent: #0B2530;
  --hero-bg: #EEF4FF;
  --footer-bg: #1A1D23;
  --footer-text: #E8EAED;
  --fun-1: color-mix(in srgb, #2563EB 10%, #fff);
  --fun-2: color-mix(in srgb, #06B6D4 22%, #fff);
  --fun-3: color-mix(in srgb, color-mix(in srgb, #2563EB, #06B6D4) 14%, #fff);
  --font: 'Inter', sans-serif;
  --r: 8px;
  --btn-r: 6px;
}

html { font-size: 15px; }
body { background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.5; }
h1, h2, h3, h4 { font-family: var(--font); font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
a { color: var(--primary); }

/* Materialize overrides */
.btn, .btn-large {
  background: var(--primary); color: var(--on-primary); border-radius: var(--btn-r);
  box-shadow: none; text-transform: none; letter-spacing: 0;
  font-weight: 500; font-size: 1rem; height: auto; min-height: 44px; line-height: 44px;
}
.btn:hover, .btn:focus { background: #1d4fc4; box-shadow: none; }
.btn:active { box-shadow: none; }
.btn.red { background: #b3261e !important; }
.btn[disabled], .btn.disabled { background: #cfd2d7 !important; color: #8a9099 !important; box-shadow: none; }
.btn-flat { color: var(--primary); text-transform: none; font-weight: 500; border-radius: var(--btn-r); min-height: 44px; line-height: 44px; }
.btn-flat:hover { background: var(--fun-1); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

input:not([type]), input[type=text]:not(.browser-default), input[type=search]:not(.browser-default),
input[type=email]:not(.browser-default), input[type=password]:not(.browser-default),
input[type=date]:not(.browser-default) {
  border-bottom: 1px solid var(--border-strong); color: var(--text);
}
input:not(.browser-default):focus:not([readonly]) { border-bottom: 2px solid var(--primary) !important; box-shadow: none !important; }
.input-field > label { color: var(--muted); }
.input-field > input:focus:not([readonly]) + label { color: var(--primary) !important; }
.red-text { color: #b3261e !important; }

.chip.tag { background: var(--fun-2); color: var(--on-accent); border: 0; border-radius: 999px; cursor: pointer; font-family: var(--font); }
.chip.tag.on { background: var(--primary); color: var(--on-primary); }

/* Labels sit above the field (no floating labels, so they never overlay typed text) */
.input-field > label, .input-field > label.active, .input-field > input:focus + label {
  position: static !important; display: block; transform: none !important;
  font-size: .8rem; margin-bottom: 2px; pointer-events: auto;
}
.input-field { margin-top: .6rem; display: flex; flex-direction: column; }
.input-field > label { order: -1; }
.input-field > input { margin-bottom: 8px; }