/* Central UI components and design tokens */
:root{
  --primary-100: #34E7BF;
  --primary-900: #0130C8;
  --text-primary: #001D5E;
  --muted: #6b7280;
  --surface: #ffffff;
  --radius: 8px;
}

/* Buttons */
.btn{
  display:inline-block;
  padding: .5rem .9rem;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(110deg, var(--primary-100) -35.98%, var(--primary-900) 93%);
  border: none;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.btn{ min-height:44px; min-width:120px; }
.btn:focus{ outline: none; box-shadow: 0 0 0 3px rgba(3,102,214,0.08); }
.btn-outline-primary{
  background: transparent; color: var(--primary-900); border: 1px solid var(--primary-900);
}

/* Card */
.card-component{
  background: var(--surface); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(13,38,76,0.04); padding: 1rem;
}

/* Section title */
.section-title{ font-weight:700; color:var(--text-primary); margin-bottom:.5rem; }

/* Utilities */
.text-muted{ color:var(--muted); }
.center-block{ margin-left:auto; margin-right:auto; }
.grid-gap{ gap: 1rem; }
/* Section spacing for consistent gaps between sections */
.section-gap{ padding-top:2.5rem; padding-bottom:2.5rem; }

/* Global focus/active handling:
   - Remove browser-native outlines on focus/click/input per request
   - Provide an accessible custom focus indicator using :focus-visible
   - Also handle :active to avoid persistent outlines on click
*/
:where(a, button, input, textarea, select):focus{ outline: none; }
:where(a, button, input, textarea, select):active{ outline: none; }
:where(a, button, input, textarea, select):focus-visible{
  box-shadow: 0 0 0 3px rgba(3,102,214,0.12);
  border-radius: 4px;
}
/* Inputs get a subtler inner focus ring */
input:focus-visible, textarea:focus-visible, select:focus-visible{
  box-shadow: 0 0 0 3px rgba(3,102,214,0.08);
  border-radius: 6px;
}