/* assets/style-utils.css - design tokens & utilities for Phase 3
   Added as a separate file to avoid touching the large existing assets/style.css
*/
:root {
  --color-primary: var(--brand);
  --color-primary-600: var(--brand-dark);
  --color-muted: #6c757d;
  --color-border: #e9ecef;

  --sp-xxs: 4px;
  --sp-xs: 8px;
  --sp-sm: 12px;
  --sp-md: 16px;
  --sp-lg: 24px;

  --radius-sm: 4px;
  --radius-md: 8px;

  --td-font-base: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --td-font-size-base: 16px;
}

/* Utilities */
.u-gap-sm{ gap:var(--sp-sm); }
.u-gap-md{ gap:var(--sp-md); }
.u-p-sm{ padding:var(--sp-sm); }
.u-p-md{ padding:var(--sp-md); }
.u-mb-md{ margin-bottom:var(--sp-md); }
.rounded-sm{ border-radius:var(--radius-sm); }
.rounded-md{ border-radius:var(--radius-md); }

/* Small, non-colliding primary button for project-specific use */
.btn-primary-custom,
.td-btn-primary{
  display:inline-block;
  background:var(--color-primary);
  color:#fff;
  border:1px solid var(--color-primary);
  padding:0.45rem 0.9rem;
  border-radius:var(--radius-sm);
  transition:background .12s ease, transform .08s ease;
  text-decoration:none;
}
.td-btn-primary:hover,
.btn-primary-custom:hover{ background:var(--color-primary-600); transform:translateY(-1px); }

/* Form controls */
.form-control-custom {
  display:block;
  width:100%;
  padding:0.5rem 0.75rem;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  background:#fff;
  color:inherit;
  transition:box-shadow .12s ease, border-color .12s ease;
  font-family:var(--td-font-base);
  font-size:1rem;
  line-height:1.25;
}
.form-control-custom:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 4px rgba(11,94,215,0.06);
}

/* Lightweight card helper */
.card-elevated{
  border-radius:var(--radius-md);
  box-shadow:0 6px 20px rgba(0,0,0,0.06);
  border:1px solid rgba(0,0,0,0.02);
  background:#fff;
}

/* Small accessibility helper */
.visually-focusable:focus{ outline:3px solid rgba(11,94,215,0.12); outline-offset:2px; }

/* Image helper */
.img-responsive{ max-width:100%; height:auto; display:block; }