/* brand.css — shared design tokens for SRMASC Certificate Management
   Colors are sampled from the official certificate templates (navy + crimson).
   Include after Tailwind's CDN script so these can override utility defaults where needed. */

:root{
  --brand-navy-900:#0d1b36;
  --brand-navy-800:#142a52;
  --brand-navy-700:#1e3a72;
  --brand-navy-600:#2a4b8f;
  --brand-crimson:#9c1c34;
  --brand-crimson-600:#b5223e;

  --bg:#f3f5f9;
  --panel:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:rgba(15,23,42,0.08);
  --shadow-sm:0 4px 12px rgba(13,27,54,0.06);
  --shadow-md:0 10px 30px rgba(13,27,54,0.08);
  --radius:12px;
}

body{ background:var(--bg); color:var(--text); font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }

/* Top navigation bar shared across dashboard, generators, and editors */
.brand-topbar{
  background:linear-gradient(120deg, var(--brand-navy-900), var(--brand-navy-700));
  color:#fff;
}
.brand-topbar-inner{
  max-width:1200px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.brand-mark{
  width:42px; height:42px; border-radius:9px; background:rgba(255,255,255,0.12);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px;
  border:1px solid rgba(255,255,255,0.18); flex-shrink:0;
}
.brand-titles{ flex:1; min-width:0; }
.brand-title{ margin:0; font-size:17px; font-weight:700; line-height:1.2; }
.brand-subtitle{ margin:0; font-size:12.5px; color:rgba(255,255,255,0.72); }
.brand-back{
  display:inline-flex; align-items:center; gap:6px; padding:8px 14px;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.18);
  color:#fff; border-radius:8px; text-decoration:none; font-size:13.5px; font-weight:600;
  transition:background .15s;
}
.brand-back:hover{ background:rgba(255,255,255,0.2); }
.brand-logout{
  display:inline-flex; align-items:center; gap:6px; padding:8px 14px;
  background:rgba(156,28,52,0.85); border:1px solid rgba(255,255,255,0.14);
  color:#fff; border-radius:8px; text-decoration:none; font-size:13.5px; font-weight:600;
  transition:background .15s;
}
.brand-logout:hover{ background:var(--brand-crimson-600); }

/* Shared panel / card styling used by both generator forms */
.brand-panel{
  background:var(--panel); border-radius:var(--radius); padding:20px;
  border:1px solid var(--border); box-shadow:var(--shadow-sm);
}
.brand-panel:hover{ box-shadow:var(--shadow-md); }

.brand-btn{
  padding:10px 16px; border-radius:8px; border:none; cursor:pointer;
  font-weight:600; font-size:14px; transition:filter .15s, transform .15s;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.brand-btn-primary{ background:var(--brand-navy-700); color:#fff; box-shadow:0 6px 16px rgba(30,58,114,0.18); }
.brand-btn-primary:hover{ filter:brightness(1.08); }
.brand-btn-accent{ background:var(--brand-crimson); color:#fff; box-shadow:0 6px 16px rgba(156,28,52,0.18); }
.brand-btn-accent:hover{ filter:brightness(1.08); }
.brand-btn-ghost{ background:transparent; color:var(--brand-navy-700); border:1px solid rgba(30,58,114,0.18); }
.brand-btn-ghost:hover{ background:rgba(30,58,114,0.05); }

.brand-input, input[type="text"].brand-input, input[type="date"].brand-input, select.brand-input, textarea.brand-input{
  width:100%; padding:10px 12px; border-radius:8px; border:1px solid rgba(15,23,42,0.12);
  font-size:14px; box-sizing:border-box; background:#fff; color:var(--text);
  transition:border-color .15s, background .15s;
}
.brand-input:focus{ outline:none; border-color:var(--brand-navy-600); background:#f8faff; }

.brand-label{ display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:6px; }