:root {
  /* Brand Palette */
  --brand-primary: #1052a2;
  --brand-primary-hover: #0b3f80;
  --brand-secondary: #0f172a;
  --brand-secondary-hover: #1e293b;
  --brand-accent: #06b6d4;
  --brand-deep: #090d16;
  --brand-wash: #f8fafc;
  --brand-muted: #64748b;
  --brand-line: #e2e8f0;
  --brand-white: #ffffff;

  /* Typography */
  --font-family-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-family-title: 'Inter', system-ui, -apple-system, sans-serif;

  /* Sizing and Spacing */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 30px;

  /* Extended palette — v5_04 design system */
  --brand-primary-deep:  #0b3f80;
  --brand-accent-light:  #70dcf4;
  --brand-ink:           #102033;
  --brand-wash-2:        #eef6fb;
  --brand-card:          rgba(255, 255, 255, 0.86);
  --brand-shadow:        0 24px 70px rgba(16, 82, 162, 0.13);
  --brand-shadow-soft:   0 12px 40px rgba(16, 82, 162, 0.08);
  --radius-card:         16px;
  --radius-pill:         34px;
  --section-y:           112px;

  /* Module accent colors */
  --mod-company:    #805746;
  --mod-finance:    #1c9add;
  --mod-retail:     #079384;
  --mod-sales:      #83bd5d;
  --mod-project:    #6b3bb0;
  --mod-asset:      #e80b6d;
  --mod-inventory:  #ef0000;
  --mod-production: #ff8e2b;
  --mod-purchase:   #ffc13d;
  --mod-payroll:    #c9da55;
  --mod-hr:         #12b7c8;

  /* Gradient presets */
  --gradient-brand:  linear-gradient(135deg, var(--brand-primary), var(--mod-finance) 42%, var(--mod-hr));
  --gradient-stripe: linear-gradient(135deg, #1052a2 0%, #1c9add 22%, #12b7c8 42%, #83bd5d 58%, #ffc13d 73%, #ff8e2b 86%, #e80b6d 100%);
  --gradient-soft:   radial-gradient(circle at top left, rgba(28, 154, 221, 0.28), transparent 30%), radial-gradient(circle at top right, rgba(232, 11, 109, 0.18), transparent 33%), radial-gradient(circle at bottom left, rgba(255, 193, 61, 0.22), transparent 28%), #ffffff;
}

body {
  font-family: var(--font-family-body);
  color: var(--brand-secondary);
  background-color: var(--brand-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-title);
  font-weight: 700;
  color: var(--brand-secondary);
  letter-spacing: -0.02em;
}

.btn-brand-primary {
  background-color: var(--brand-primary);
  color: var(--brand-white);
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-sm);
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  transition: all 0.2s ease;
}

.btn-brand-primary:hover {
  background-color: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  color: var(--brand-white);
}

.btn-outline-brand {
  background-color: transparent;
  color: var(--brand-primary);
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-sm);
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  transition: all 0.2s ease;
}

.btn-outline-brand:hover {
  background-color: var(--brand-wash);
  color: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
}

.badge-accent {
  background-color: rgba(37, 99, 235, 0.1);
  color: var(--brand-primary);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-xl);
  display: inline-block;
}