/* ===============================
   Smart Circular Construction — Brand CSS
   Contrast-safe across light/dark
   =============================== */

/* --------- Design tokens --------- */
:root {
  /* Surfaces */
  --bg: #f7f7fb;
  --bg-2: #ffffff;
  --card: #ffffff;
  --card-2: #fafafa;
  --border: #e5e7eb;

  /* Text */
  --text: #0b0b0f;
  --muted: #60636b;

  /* Brand */
  --primary-50:#eef2ff; --primary-100:#e0e7ff; --primary-200:#c7d2fe; --primary-300:#a5b4fc;
  --primary-400:#818cf8; --primary-500:#6366f1; --primary-600:#4f46e5; --primary-700:#4338ca;
  --primary-800:#3730a3; --primary-900:#312e81;

  /* Effects */
  --ring: rgba(17, 17, 17, 0.08);
  --shadow-soft: 0 8px 24px rgba(0,0,0,.06);

  /* Charts */
  --chart-grid: #e5e7eb;
  --chart-text: #111827;
  --chart-line: var(--primary-600);
  --chart-fill: rgba(79,70,229,.14); /* primary-600 @ 14% */
}

.dark {
  --bg: #0b0b0f;
  --bg-2: #0f1116;
  --card: #111318;
  --card-2: #151821;
  --border: #2b2f36;

  --text: #f6f7fb;
  --muted: #a4a6ad;

  --ring: rgba(255, 255, 255, 0.12);
  --shadow-soft: 0 10px 28px rgba(0,0,0,.35);

  --chart-grid: #333741;
  --chart-text: #e5e7eb;
  --chart-line: #a5b4fc;   /* primary-300 for better contrast on dark */
  --chart-fill: rgba(165,180,252,.18); /* prim-300 @ 18% */
}

/* --------- Base --------- */
html, body {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  color: var(--text);
}
* { -webkit-tap-highlight-color: transparent; }

/* --------- Cards / Panels --------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: var(--shadow-soft);
}
.card-ghost {
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 1rem;
}

/* --------- Buttons --------- */
.btn { border-radius: .9rem; padding: .7rem 1rem; }
.btn-primary {
  background: var(--primary-600);
  color: #fff;
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-outline {
  border: 1px solid var(--border);
  background: transparent;
}
.btn-ghost {
  background: var(--card-2);
  border: 1px solid var(--border);
}

/* --------- Progress --------- */
.progress { height: .55rem; background: var(--card-2); border:1px solid var(--border); border-radius:999px; overflow:hidden; }
.progress > div { height: 100%; background: var(--primary-600); }

/* --------- Icon buttons --------- */
.icon-btn {
  display:inline-grid; place-items:center; height:40px; width:40px;
  border-radius:12px; border:1px solid var(--border);
  color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85));
}
.dark .icon-btn {
  background: linear-gradient(180deg, rgba(17,18,21,.7), rgba(17,18,21,.55));
}

/* --------- Chips / Meters --------- */
.chip {
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--border); border-radius:999px; padding:.35rem .7rem;
  background: var(--card-2); color: var(--text);
}
.meter-track { width:100%; height:.5rem; background: var(--card-2); border:1px solid var(--border); border-radius:999px; }
.meter-fill  { height:100%; background: var(--primary-600); border-radius:999px; }

/* --------- Form feedback --------- */
.field-error{ border-color:#ef4444!important; box-shadow:0 0 0 3px rgba(239,68,68,.15)!important; }

/* --------- Utilities --------- */
.text-muted { color: var(--muted); }
.surface   { background: var(--card); border:1px solid var(--border); border-radius:1rem; }
.surface-ghost { background: var(--card-2); border:1px solid var(--border); border-radius:1rem; }
.shadow-glass { box-shadow: var(--shadow-soft); }


/* Form controls: readable on both themes */
input, select, textarea {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: .75rem;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .9; }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 3px var(--ring); }
::-webkit-calendar-picker-indicator { filter: invert(0); }
.dark ::-webkit-calendar-picker-indicator { filter: invert(1); }

/* Autofill fix (Chrome) */
input:-webkit-autofill,
select:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
}