:root {
  --ocom-orange: #FF6633;
  --ocom-orange-dark: #C04A2B;
  --ocom-navy: #1A2B4A;
  --ocom-teal: #4AC9C0;
  --ocom-mint: #A8D8B9;
  --ocom-neutral-dark: #2C2C2C;
  --ocom-neutral-light: #F5F5F5;
  --ocom-white: #FFFFFF;

  --brand-logo: url("../assets/brand/ocom-logo.jpg");
  --brand-seal: url("../assets/brand/ocom-seal.png");

  --font-heading: "Kiona", "Poppins", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=Inter:wght@300;400;500;600&display=swap');

h1, h2, h3, h4, .page-title {
  font-family: var(--font-heading);
  font-weight: 700;
}

body, p, td, input, button, select, textarea {
  font-family: var(--font-body);
}

.brand-seal {
  background: var(--brand-seal) center/contain no-repeat;
}

.brand-logo-img {
  max-height: 48px;
}

.brand-seal-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
}

.btn-primary,
.badge-primary {
  background-color: var(--ocom-orange);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #0A2432 0%, #14344a 100%);
  color: var(--ocom-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brand-seal-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}

.sidebar-brand .brand-name {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.sidebar-brand .brand-tag {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #fff;
  background: var(--ocom-orange);
  padding: 1px 8px;
  border-radius: 999px;
}