/* app.css - minimal, uses CSS variables for dynamic branding.
   For a production-ready UI, replace with a built Tailwind bundle.
*/
@import url('fonts.css');

:root{
  --primary-color: #2563EB;
  --secondary-color: #10B981;
  --accent-color: #F59E0B;
  --text-color: #111827;
  --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --base-font-size: 16px;
  --heading-scale: 1.5;
  --border-radius: 8px;
}

*{box-sizing:border-box}
body{
  font-family: var(--font-family);
  font-size: var(--base-font-size);
  color: var(--text-color);
  background:#f3f4f6;
  margin:0;
  padding:0;
}
.container{max-width:1100px;margin:24px auto;padding:16px;}
.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:48px;width:auto;border-radius:6px}
.btn{display:inline-block;padding:8px 12px;border-radius:6px;text-decoration:none;color:#fff;background:var(--primary-color)}
.card{background:white;padding:16px;border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,0.04)}
.form-row{display:flex;gap:8px;flex-wrap:wrap}
.input, select, textarea{padding:8px;border:1px solid #e5e7eb;border-radius:6px;width:100%}
.table{width:100%;border-collapse:collapse}
.table th, .table td{padding:8px;border-bottom:1px solid #eaeaea;text-align:left}
.preview-box{padding:12px;border-radius:6px;border:1px dashed #e5e7eb;margin-top:12px}
.small{font-size:0.9rem}