/* ==========================================================================
   Clarity Cashflow — base.css
   Global foundation styles (keep this file lean)
   ========================================================================== */

:root{
  /* Brand + palette */
  --bg: #0b1220;
  --surface: rgba(255,255,255,0.06);
  --surface2: rgba(255,255,255,0.04);
  --border: rgba(148,163,184,0.18);

  --text: rgba(234,240,255,0.92);
  --muted: rgba(234,240,255,0.66);

  --brand: rgba(42,168,255,1);
  --brandSoft: rgba(42,168,255,0.14);

  --danger: rgba(255,99,132,1);
  --success: rgba(38,191,120,1);

  /* Layout */
  --max: 1180px;
  --pad: 18px;

  /* Radii + shadows */
  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 14px;

  --shadow-lg: 0 20px 55px rgba(0,0,0,0.50);
  --shadow-md: 0 14px 32px rgba(0,0,0,0.42);

  color-scheme: dark;
}

/* Reset-ish */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:
    radial-gradient(circle at 20% 0%, rgba(42,168,255,0.14), transparent 55%),
    radial-gradient(circle at 80% 10%, rgba(122,92,255,0.12), transparent 55%),
    var(--bg);
  color: var(--text);
}

img{ max-width: 100%; height: auto; display: block; }
a{ color: rgba(210,224,255,0.92); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Typography helpers */
h1,h2,h3{ margin: 0; letter-spacing: -0.01em; }
p{ margin: 0; }
.small{ font-size: 12px; }
.muted{ color: var(--muted); }
.kicker{
  font-size: 12px;
  font-weight: 800;
  color: rgba(234,240,255,0.72);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Containers */
.shell{
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--pad);
}
.shell--public{ padding-top: 10px; }
.public{ padding-bottom: 28px; }

/* Panels / cards */
.card{
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), var(--surface2));
  box-shadow: var(--shadow-lg);
}

.hr{
  height: 1px;
  background: var(--border);
  margin: 14px 0;
  border: 0;
}

/* Inputs */
input, select, textarea, button{
  font: inherit;
}
input, select, textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  outline: none;
}
input::placeholder, textarea::placeholder{
  color: rgba(234,240,255,0.45);
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(42,168,255,0.45);
  box-shadow: 0 0 0 4px rgba(42,168,255,0.12);
}

/* Utility */
.row{ display:flex; gap: 12px; }
.wrap{ flex-wrap: wrap; }
.right{ justify-content: flex-end; }
.center{ align-items: center; }
.gap-sm{ gap: 8px; }
.gap-md{ gap: 12px; }
.mt-sm{ margin-top: 10px; }
.mt-md{ margin-top: 16px; }
.mt-lg{ margin-top: 22px; }

/* Responsive defaults */
@media (max-width: 980px){
  :root{ --pad: 14px; }
}
@media (max-width: 720px){
  .row{ flex-direction: column; }
}
.public{
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px;
}